From AI design to React Native: design first, then hand off

Getting from an AI design to React Native goes better when the design exists first. DraftScreens does not write React Native today. It produces what a coding agent needs to write it well: the screens, the design tokens and the navigation map in one file.

A prompt pack, not a screenshot

One Markdown file: the design language as a token table, every screen with the intent behind it, which element opens which screen, and the HTML of each screen at 390 by 844.

Tokens before components

The pack leads with palette roles, fonts, radius and spacing, so the first thing the agent builds is your theme, and every component after it matches.

Navigation is written down

Because every button and tab has a tap link in the prototype, the pack can say where each one goes. The agent wires routes instead of inventing them.

What is and is not shipped

A direct Expo and React Native export is next on the roadmap and a SwiftUI export is planned. Today the route to React Native is the prompt pack and a coding tool.

From AI design to React Native, step by step

  1. Describe the app and generate the flow in one design language. Fix copy, colours and spacing by hand in the editor.
  2. Give every button, tab and row a destination and tap through the prototype on your phone until the flow is right.
  3. Export the prompt pack (Pro and Studio) and add it to your repository.
  4. Tell Cursor or Claude Code to set up the tokens as a theme, then build the screens in order and wire navigation as listed.

Questions people ask

Does DraftScreens export React Native code?
Not yet. It exports a prompt pack that a coding tool turns into React Native, plus HTML per screen. A direct Expo and React Native export is next on the roadmap.
Which coding tools does the prompt pack work with?
It is written for Cursor, Claude Code, Lovable, Bolt and v0, and it is plain Markdown, so any agent that reads a file can use it.
Which plans include the prompt pack?
Pro and Studio.
Why not let the coding tool design the app too?
It can, and the result tends to be the default look many generated apps share. Designing first gives the agent a specific target, so reviews are about padding values rather than taste.

Related