Design mode
Describe a page and get working HTML back. Design mode generates landing pages and web app UIs as self-contained documents with every style inline, then lets you refine them element by element.
The first three questions
Before it spends anything it asks what it needs: whether you are building a landing page or an app UI, which theme and palette to use, and which kinds of imagery the page may include. Nothing is generated until those are answered, so a wrong first guess costs you a click rather than a generation.
| Choice | Options |
|---|---|
| Kind | Landing page, or app UI |
| Theme | 13, or let it choose |
| Palette | 11, or match the app theme |
| Imagery | Web photos, inline SVG, Excalidraw, three.js, background video |
App projects start as wireframes
An app UI opens as grayscale wireframe pages rather than finished screens, so the structure gets reviewed before anything is styled. Upgrading a page to full fidelity is one action and preserves the content and section structure, rewriting only the styling. Each page keeps both versions and you choose which to preview.
Editing
Click an element on the canvas and only that fragment is rewritten. The rest of the document is left untouched rather than regenerated, which is what stops iteration from wandering. An inspector panel handles direct changes that are faster to make than to describe.
Output
One self-contained HTML file with all CSS in a single <style> tag. No build step, no bundler and no framework. Export the HTML, export a clickable prototype that walks through several pages, or open the page in Chrome.
It does not emit React or Vue components, editable vector files, or native mobile or desktop screens. The device buttons set the preview width to 100%, 768px or 390px, so what you are checking is a responsive web page at a narrow viewport.
Which engine runs it
Claude Code or the Codex CLI, spawned locally with your own login. Cursor CLI and OpenCode drive coding tabs but not this one. Changing the provider respawns the design sidecar, so it takes a moment.
If your provider choice will not stick
A config.toml in your workspace root that names a provider takes precedence over the in-app picker, because the engine reads the workspace file before the home-directory one. That is the usual cause of a picker that appears to do nothing.