Section 05

The 4D framework

A small loop that keeps vibe coding honest: Define, Design, Develop, Demonstrate.

D1

Define

Frame the problem in plain language before any UI exists.

  • Who is the user?
  • What problem are we solving?
  • Why does it matter?
  • What decision does the app support?
  • What does success look like?
D2

Design

Sketch the flow before you sketch the pixels.

  • What screens are needed?
  • What information is collected?
  • What result should the app show?
  • What scoring or decision logic is needed?
  • What should the user do next?
D3

Develop

Land the spine end-to-end. Polish only the demo screen.

  • Plan
  • Core pages
  • Data model
  • Main user flow
  • Logic
  • Test / fix
  • Polish
D4

Demonstrate

Tell the business story in 60 seconds.

  • What did we build?
  • Why did we build it?
  • Who does it help?
  • How does it work?
  • What logic does it use?
  • What business value does it deliver?
  • What would we improve next?
Tip
You can re-enter the loop at any phase. Stuck in Develop? Drop back to Define and cut something.