Designs 02 / 03
The Designer
The full-screen design workspace — chat, code editors, and live preview side by side — with element-scoped AI edits, automatic version history, and keyboard-first controls.
The Designer is where you make a design: a full-screen, dark editor shell at /designer/{slug}/edit with three resizable panes — AI chat on the left, code editors in the middle, and a live preview on the right. Drag the gutters to resize any pane, or collapse down to only the parts you need.
The three panes
- Chat ("Assistant"). Your conversation with the AI: past prompts, the assistant's notes about what it changed, a composer, the engine picker, and the Select element inspector. Press ⌘K to focus the prompt from anywhere.
- Code. Three Monaco editor tabs — HTML, CSS, and JS — the same editors you know from VS Code. AI generations stream into them token-by-token, and you can edit by hand at any time. Press ⌘P to jump between
design.html,design.css, anddesign.js. - Preview. A live iframe of the composed page that updates as you (or the AI) type. It shows the design's slug, a refresh button, the current measured width, and an open-in-new-tab button that loads your private draft at
/design/preview/{slug}.
The top bar holds the menu, an AI-chat toggle, the design name (click it to rename), a save-state dot (Unsaved / Saving… / Saved / Save failed), device and view-mode toggles, and the Publish / Share button.
Views and device sizes
Three view modes — Code Only, Split, and Preview Only — and three device widths — Desktop (full), Tablet (768px), and Phone (390px). Both are remembered per browser. When you're not typing, the 1 / 2 / 3 keys switch device sizes directly.
Iterating with the AI
Type what you want and press Enter. While the AI works, the canvas blurs behind a designing veil that narrates the phases — Thinking… → Writing the structure → Styling the design → Adding interactions → Polishing… — with a live character count, then fades to reveal the result. After each turn the assistant posts a short note describing what changed.
- Element-scoped edits. Click Select (or press ⌘I), then click any element in the preview. A selector chip attaches to your next prompt and the AI changes only that element — the fastest way to fix one button without touching the rest of the page.
- Stop is safe. The Stop button aborts a generation mid-stream, and an aborted or failed generation never half-applies: the canvas is restored exactly to its pre-generation state.
- Engines. The picker chooses the engine per request — Z.ai for everyone; Claude, OpenAI, Gemini, Grok, Kimi, Qwen, DeepSeek, and MiniMax on Pro. Hovering a provider slides out its available models (Claude offers Fable 5, Opus 5, and Opus 4.8) — pick one to pin that model, or click the provider row for its default. If a stream goes silent for ~45 seconds it aborts with a suggestion to try another engine.
Talk in outcomes, not diffs. The AI sees your last few messages and the current canvas, so "make the pricing cards feel more premium" works better than a list of CSS properties. When you do want surgical control, use Select to scope the change to one element.
Versions and autosave
You never manage saving or snapshots yourself:
- Autosave writes your manual edits about 2.5 seconds after you stop typing; ⌘S saves immediately. The dot in the top bar tells you where things stand, and the browser warns you before leaving with unsaved work.
- Version history (menu → Version History) records a snapshot automatically before every AI change (badged "AI" and labeled with your prompt) and before every restore. Restoring swaps the canvas back to any snapshot — and since the current state is snapshotted first, a restore is itself undoable. The last 30 versions are kept per design.
Settings
The Settings modal (menu → Settings) controls the canvas environment.
- Tailwind CSS — on by default: the Tailwind v4 browser build compiles the classes in your HTML and CSS live. Turn it off for a plain HTML/CSS/JS document with no build step at all.
- Extra head tags — meta tags, font links, or library scripts injected into the page's
<head>, in the editor, the published page, and the export alike.
Every design keeps its own exact CSS wherever it goes — write plain CSS or raw hex for pixel-precise control, or build with the platform's semantic utility classes (bg-background, text-foreground, border-border, font-display, rounded-large, …) and it inherits whatever palette a Site defines the moment you insert it from the Library, through ordinary CSS — no contract to choose, no publishing check to satisfy.
The menu also holds Duplicate Design, Export (Download ZIP / Open Preview Tab), a light/dark editor theme toggle, and Delete Design.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| ⌘S | Save now |
| ⌘I | Toggle the element inspector (Select) |
| ⌘K | Focus the chat prompt |
| ⌘P | Pane palette — jump between HTML / CSS / JS |
| 1 / 2 / 3 | Desktop / Tablet / Phone preview |
| Enter · ⌘⏎ | Send the prompt |
| Esc | Close palette, settings, history, or exit inspect |
Good to know
- Prompts max out at 4,000 characters, generations at 10 per minute, and each pane (HTML/CSS/JS) at roughly 500KB.
- The AI reads the last 8 chat messages as context, so long threads stay fast.
- Only the design's owner can open the workspace, generate, preview drafts, or export — everyone else sees nothing but the published page.
Where to go next
- Publishing & Community — put the design live and share it.
- Designs Overview — the concepts behind designs and the library views.