Blog · Product

What is DraftScreens?

DraftScreens is an AI designer for mobile apps: describe an app and get connected phone screens in one design language, to edit, tap through and export.

By DraftScreens · · 5 min read

DraftScreens is an AI mobile app designer. You describe an app in a sentence or two, and it returns designed phone screens with real content, in one consistent design language. You can then edit any element, tap through the screens as a prototype on your own phone, and export them to Figma or to a coding tool.

It is a web app at draftscreens.com. There is nothing to install.

What it is for

DraftScreens is an AI app designer for the stage between "I have an app idea" and "someone is building it". That stage usually goes one of two ways. Either a designer spends days in Figma, or a coding tool invents the design while it writes the code, and the app comes out looking like every other generated app.

DraftScreens covers that stage on its own. The output is a design: screens you can look at, change, show to people and hand to whoever builds the app, whether that is a developer or a coding agent such as Cursor or Claude Code.

What makes it different

It only designs mobile screens. Every screen is 390 by 844 points, the size of a phone, with a status bar, safe areas and a tab bar where one belongs. Tools that design web pages and shrink them get these details wrong.

It commits to a design language first. Before the first screen is drawn, a planner decides the palette, the type, the corner radius and the spacing. Every screen, and every later edit, is held to those decisions. That is why screen four looks like it belongs with screen one.

You can edit anything. Select a headline and retype it. Select a button and change its colour or where it leads. Edits by hand cost nothing. For bigger changes, describe what you want and the AI revises that screen only.

The screens are a prototype. Buttons, tabs and rows link to other screens. Scan a QR code and the prototype opens on your phone.

Failed generations are never charged. If a generation fails, the credit comes back automatically.

What you get out of it

  • PNG images of every screen, on every plan.
  • Editable Figma layers, on Pro and Studio: paste a screen into Figma and the text is still text.
  • HTML for each screen and a ZIP of the whole project, on Pro and Studio.
  • A prompt pack, on Pro and Studio: one Markdown file with the design tokens, the screens and the navigation map, written for coding tools.

What it does not do

It does not build the app. There is no backend, no App Store submission and no generated React Native or SwiftUI code today. A direct Expo and React Native export is next on the roadmap and SwiftUI is planned. Until then, the route from design to code is the prompt pack and a coding tool.

It also does not design websites or desktop software. Mobile only is a deliberate limit.

Who uses it

  • Founders and indie makers who want to see the app, and show it to people, before paying for it to be built.
  • Developers who can build anything but do not want to be the designer too.
  • Designers who want a strong first draft in a real design language instead of a blank artboard.

What it costs

There is a free plan with one design a day, up to five a month. Pro is $15 a month or $144 a year. Studio is $49 a month and adds your own design system and three seats. The details are on the pricing page, and how credits and plans work explains what counts as a design.

Where to go next

Keep reading