Sketch Your Screens and Flows

1.7.1Your spec describes logic, not screensAdd note

A spec that covers requirements, data, and quality targets still says nothing about the surface the user touches. It describes what happens under the hood, not the rooms the user walks through to get there.

That missing piece is the interface map: the set of screens your app has, and the route a user takes across them. Leave it out and the agent fills the gap with its own guess, which is rarely the one in your head.

1.7.2List your screensAdd note

Start with a screen inventory: one line per distinct screen the app has, nothing more. Name each screen the way a user would think of it, not by its technical route.

This list is deliberately dumb. Its whole job is to name every place a user can be, so nothing gets invented and nothing gets forgotten.

1.7.3Draw the flow between themAdd note

The inventory names the rooms; the user flow names the doors. It is the ordered path a real user takes, drawn as arrows from one screen to the next.

One arrow per move keeps it honest. If two screens have no arrow between them, the user has no way to travel that route, and now you can see it.

1.7.4Add it to the specAdd note

The list and the flow are worth nothing sitting in a side note. Paste both into the spec, the one short document your agent reads before it builds, so the interface is an input, not an afterthought.

Give them their own section, next to the data model and the requirements. Now every part of what to build lives in one place the agent already opens every time.

This prompt turns your idea into both artifacts, ready to paste in:

Do this now: paste the prompt, describe your app, and drop the screen inventory and flow into your spec as their own section.