Blog · How-to
How to design an app for Cursor or Claude Code: the prompt-pack workflow
A design-first workflow for coding agents: plan the flow, fix it by hand, wire the prototype, then hand Cursor or Claude Code exact screens and tokens.
By DraftScreens · · 6 min read
Coding agents are very good at building what you specify and poor at inventing what you did not. "A calm meditation app with a nice home screen" tends to produce the same purple gradient every time. The fix is not a better adjective. It is a design step that turns the idea into screens, tokens and a navigation map the agent can match. This is that workflow.
The export steps below use the prompt pack, which is on the Pro and Studio plans of DraftScreens.
1. Plan the flow, not the screen
Start with the journey: onboarding, home, the core screen, detail, settings. A flow planned as one unit gets one design language. Screens generated one at a time drift apart.
In DraftScreens a flow prompt plans the screens and the tokens first, meaning palette roles, fonts, radius and spacing, and then drafts every screen against them. If you have a brand, a Studio plan lets you load it as a design system, so the palette, fonts, voice, rules and logo are fixed before anything is drawn.
2. Fix it by hand before you fix it in code
Every change you make in code later costs an agent run and risks other changes coming along with it. Make the cheap changes now. Select the element and change the text, the colour, the spacing or the tap link. Hand edits are free. For bigger changes, select the screen and ask the AI.
3. Wire the prototype
Give every button, tab and row a destination. There are two reasons. You will find the missing screens: where does "See all" go? And the navigation map becomes part of the hand-off. Scan the QR code and tap through on your phone. What feels wrong on a phone is wrong.
4. Export the prompt pack
The prompt pack is one Markdown file. It contains:
- the design language, as a token table
- the screen list, with the intent behind each screen
- the navigation map: which element opens which screen
- the HTML of every screen at 390 by 844
It is written to be read by an agent, with instructions at the top.
5. Hand it to the agent
In Cursor or Claude Code, add the pack to the repository and open with something like this:
Read prompt-pack.md. Set up the design tokens as a theme first.
Build the screens in the order listed, matching layout, hierarchy,
palette and copy exactly. Wire navigation per the Navigation section.
Use our component library where a component exists; otherwise build
to the HTML. Do not restyle.In Lovable, Bolt or v0, paste the pack into the first message with the same instruction. Then review screen by screen against the design, not against memory.
What changes
The agent stops guessing. Reviews become "this padding is 16 instead of 20" rather than "this feels off". And the app does not look like every other agent-built app, which matters to users and to store reviewers, who see a lot of near-identical apps.
The design step takes about an hour. The alternative is a long series of prompts that say "make it look better".
A note on React Native
DraftScreens does not generate React Native or SwiftUI code today. A direct Expo and React Native export is next on the roadmap. Until then the prompt pack is the route, and it works with whatever stack the agent is building in. From AI design to React Native covers that case.
Related: DraftScreens vs Rork on where design fits with app builders, and DraftScreens vs v0.