Design app screens from your AI agent
Connect Claude Code, Cursor, Codex, ChatGPT or any MCP client. Your agent drafts screens in a real design language, edits them and exports the app as React Native, SwiftUI or Flutter code, while you watch every screen land in the studio.
Works with
- Claude Code
- Cursor
- Codex
- VS Code
- Windsurf
- Gemini CLI
- Zed
- opencode
- Claude
- ChatGPT
How it works
Connect
Pick your agent and paste one command or config block. Apps like Claude and ChatGPT only need the URL and ask you to sign in.
Ask
Tell your agent what to build: "draft the onboarding for this app", "add a paywall", "make the home screen darker".
Watch and ship
Screens appear in your DraftScreens project with the agent's logo on its prompts. Export the code straight back into your repo.
Tools your agent gets
| Tool | What it does |
|---|---|
| create_project | Start a project in a named design language, light or dark. |
| generate_flow | Plan and draw a 4 to 6 screen app flow, linked as a prototype. |
| generate_screen | Draw one screen and return a picture of it. |
| edit_screen | Change a screen with an instruction; the old version stays in history. |
| get_project | Read a project's screens, flows and links. |
| get_screen | A screen as HTML to build from, or as a PNG to look at. |
| export_code | The app as React Native (Expo), SwiftUI, Flutter, or a prompt pack. |
| run_on_phone | A QR code that runs the app on a phone: Expo Go, or a Flutter web build. |
| share_project | A public link where anyone can play the prototype. |
| list_projects | Your projects, newest first. |
| list_styles | The design languages a project can use. |
Questions people ask
- Which agents work with DraftScreens?
- Any client that speaks the Model Context Protocol over Streamable HTTP. There are ready setups for Claude Code, Cursor, Codex, VS Code with GitHub Copilot, Windsurf, Gemini CLI, Zed, opencode, Claude and ChatGPT, and a generic config for the rest (Cline, Goose, Warp and others).
- What does it cost?
- Agents use your DraftScreens plan: one credit per generated screen, the same as in the studio. A generation that fails is never charged. Reading projects, exporting and sharing cost nothing extra.
- How does my agent sign in?
- Coding agents use a personal key you make in Settings, Agents (it starts with ds_live_). Apps that only take a URL, like Claude and ChatGPT, sign in with OAuth: you see which app is asking and allow it. Revoke a key or disconnect an app any time.
- Can I see what an agent did?
- Yes. The studio shows the agents that worked on a project as logos in the header, with a live dot while one is working, and every prompt an agent sent appears in the project chat under its name. Each screen keeps its full version history.
- Is my key safe?
- Keys are stored as a hash, so even we cannot read them back, and each one is shown to you once. A key acts as you, so keep it out of shared repositories; Codex can read it from an environment variable instead of a config file.