Design mode is a distinct chat mode in LADLE. It swaps in a dedicated system prompt, pins the routing to Sonnet at 16K max output tokens, and instructs the model to produce complete, self-contained single-file HTML documents. Every reply is captured as an artifact of type=design; every iteration is a new version pointing back to the message that produced it. The right-side panel previews the file live in a sandboxed iframe with desktop/tablet/phone width toggles.
Entering design mode
Three ways: (a) click Design in the sidebar and start a new chat from the /design surface; (b) hit ⌘K and pick 'New design chat'; (c) visit /chat?new=1&mode=design directly. All three paths set chats.mode='design' on the freshly created row, which persists for the life of the chat. The mode is set once at chat creation; existing chats do not become design chats retroactively.
What the model produces
Every reply is a single ```html``` code block containing a complete HTML document with `<!doctype html>`, `<html>`, `<head>` (title + one Google Fonts link + inline `<style>`), and `<body>` (with optional inline `<script>` for interactivity). No external dependencies beyond one Google Fonts family and images from picsum.photos / unsplash.com for placeholder art. Mobile-responsive by default; a max-width for the main column; tasteful defaults across type, spacing, color.
Artifact + version lifecycle
Every design reply is captured as an artifact. Every subsequent revision is a new version pointing back at the message that produced it. The panel opens on the newest by default.
Preview device toggle
The artifact panel's design preview offers three widths: DESKTOP (100%), TABLET (768px), PHONE (390px). The width is applied client-side by resizing the iframe wrapper; the underlying HTML is unchanged. Frame chrome adds padding around the wrapped iframe so the mobile/tablet preview reads as a device, not a crop.
Iterating a design
Send feedback and the model modifies the previous design rather than starting over — the design system prompt instructs it to preserve every choice you did not ask to change. It re-emits the full document in every reply so the preview always has a runnable file to render. Truncated replies (rare, but possible when a design pushes past 16K output tokens) are salvaged by a partial-HTML fallback that closes tags before rendering — the preview stays functional even when the model runs out of budget.
Tokens, cost, and timing
Design replies use substantially more tokens than normal chat. The model outputs a full HTML document with inline styles on every turn. Budget these turns like the biggest calls in your day.
When design mode is the right tool
Best for: single-page landing designs, one-screen posters, transactional emails, isolated components (a hero, a pricing tier, a testimonial card). Not appropriate for: multi-file applications (React apps, SPAs, anything requiring build tooling); designs that require third-party dependencies beyond one Google Fonts family; anything that needs a real backend. For code that needs a build step, use a normal code artifact (assistant reply with a 40+-line code block) instead.