Design a page, then build it, in the same window.
Describe a page and Design mode returns working HTML you can look at, click through and edit, then implement in the repo you already have open.
Design mode is the desktop app's visual design surface. You give it a one line brief, it asks whether you are building a landing page or an app UI, and it returns self contained HTML documents with every style in a single style tag. You pick a theme from thirteen, a palette from eleven, and whether the page may use web photos, inline SVG illustrations, Excalidraw diagrams, a three.js scene or a background video. App projects start as grayscale wireframes so the structure gets reviewed before anything is styled. Clicking any element rewrites just that fragment rather than regenerating the page.
Wireframe first, then fidelity
An app project opens as grayscale wireframe pages rather than finished screens. This is the well documented effect where a polished mockup attracts feedback about colour and copy while a rough one attracts feedback about whether the flow makes sense. Once the structure is agreed, upgrading a page to full fidelity is one action, and the content survives the upgrade because only the styling is rewritten.
Editing is local, not a regeneration
Click an element on the canvas and only that fragment is rewritten. That matters more than it sounds: the usual failure of prompt driven design is that asking for a smaller heading returns a different page, so every fix costs you the parts you already liked. Refining one element leaves the rest byte identical, which makes iteration converge instead of wandering.
It runs on the CLI you already pay for
Design mode is powered by the Claude Code or Codex CLI installed on your machine, signed in as you. There is no separate design subscription and no API key for the design engine specifically. The engine is chosen from the picker in the tab and the sidecar restarts on the change.
Output you can actually use
Export the HTML, or export a clickable prototype that walks through multiple pages, or open the page in Chrome. Because the output is one file with inline styles and no build step, it drops into a brief, a pull request or a static host without carrying a toolchain with it. The same window then has the coding agent that can implement it properly in your framework.
Where this sits
| Need | Use |
|---|---|
| Landing page or app UI as HTML | Lucid Train |
| Wireframes reviewed before styling | Lucid Train |
| Design that the coding agent then implements | Lucid Train |
| React or Vue component output | v0, Lovable, Bolt.new |
| Editable vector design files | Figma, Figma Make |
| Native iOS or Android screens | Figma, Uizard |
Questions
Does it design mobile apps?
It designs responsive web pages you can preview at a 390px mobile width. It does not emit iOS, Android, React Native or Flutter screens, and nothing in it targets a native mobile runtime.
Is this a Figma alternative?
For a first draft of a page, often yes, because the output is a real page rather than a picture of one. For design systems, component libraries and handoff to a team, no. Figma is a collaborative editor and this is a desktop tool that writes HTML.
Which engine powers it?
The Claude Code CLI or the Codex CLI, whichever you pick, spawned as a local process using the login you already have. Cursor CLI and OpenCode are supported engines for coding tabs but not for Design.
Can it turn the design into real code?
The coding agent is in the same window with the same repository open, so the exported page becomes the reference for an implementation turn in whatever framework the project actually uses.
Related
- App Wireframe GeneratorLow fidelity on purpose. A wireframe that looks finished gets reviewed as a design instead of as a structure.
- User Flow Diagram GeneratorThe value is in the branches you had not thought about, which is exactly what drawing the flow forces you to name.
- AI Short Video from Your DiagramsA narrow feature with a specific use: explaining a system to people who will not read a diagram.
- Local-First AI Coding AgentSame agent core in a native desktop app and a 6 MB Rust binary, running whichever model you choose, including one on your own laptop.
Last updated