Blog · Product
How DraftScreens works: from a prompt to a prototype on your phone
A step-by-step look at how DraftScreens turns a prompt into mobile screens: the planner, the design tokens, editing, the phone prototype and the hand-off.
By DraftScreens · · 6 min read
DraftScreens has three steps on the surface: draft, refine, ship. This post goes one level down and explains what happens in each, and why the screens come out consistent.
1. You write a prompt
A prompt can be one sentence: "Habit tracker called Ember: streak flames, weekly ring, gentle nudges." Say what the app is and anything distinctive about it. This is text to app design: the prompt is the brief.
Two choices sit next to the prompt box:
- Flow or screen. A flow is four to six connected screens from one prompt, available on Pro and Studio. A screen is a single screen, available on every plan.
- Design language. Pick one of ten built-in languages, pick a design system you have saved, or leave it open and let the planner choose.
2. The planner commits to a design language
This is the step most tools skip. Before any screen is drawn, a planning pass writes down the decisions a designer would make at the start of a project:
- the palette, by role: background, surface, text, accent
- the fonts and the type scale
- the corner radius
- the spacing
It also plans the screens: which ones the flow needs and what each is for.
These decisions are stored as tokens. If you chose a design language, the tokens come from that. If you linked your own design system on a Studio plan, they come from your brand and are not invented at all.
3. Every screen is drafted against the same tokens
Each screen is then generated with the same token block and with knowledge of its sibling screens. It is told to use exactly those colours, that font and that radius. That is why the tab bar has the same items on every screen and the buttons keep their corners.
Screens are drawn at 390 by 844, the size of a phone, with a status bar and realistic content: names, numbers and copy the app would really show.
If a generation fails, it is refunded automatically.
4. You refine
There are two ways to change a screen, and they cost differently.
By hand, free. Click any element. Change the text, the colour, the spacing, or the screen it links to. These edits are instant, undoable and use no credits.
By asking. Select a screen and describe the change: "make this onboarding friendlier", "add a weekly summary card". The AI revises that screen only, still held to the project's tokens. The other screens do not move.
5. You tap through it
Buttons, tabs and rows carry links to other screens. In the studio you can click through the flow. Scan the QR code and the same prototype opens on your phone, where you find out quickly whether the flow makes sense in the hand.
A share link gives someone else a public page with the prototype. On the free plan the share carries a DraftScreens badge. More on this in the app prototype generator page.
6. You ship it somewhere
What happens next depends on who builds the app.
- A designer finishes it. On Pro and Studio, paste the screens into Figma as editable layers.
- A coding tool builds it. Export the prompt pack: a Markdown file with the tokens, every screen and the navigation map. Cursor, Claude Code, Lovable, Bolt and v0 can build from it. See the prompt-pack workflow.
- You just need the images. PNG export is on every plan, and the free App Store Screenshot Maker turns screens into store listings.
A direct Expo and React Native export is next on the roadmap. It is not shipped yet.
Why it is built this way
Left alone, a language model draws the most common interface it has seen, and it draws a slightly different one each time. Planning the design language first and repeating it on every screen fixes both problems. Why every AI-generated app looks the same goes into the reasons.
For the full feature list, see DraftScreens features.