Select an app and a new Design tab appears in your workspace sidebar. It's a
visual editor for your app's design system: drag a slider, pick a font, tap a
preset — and the app's live preview restyles itself instantly. Under the hood
every change is written straight into the app's globals.css design tokens, so
what you see is exactly what ships, and your agents keep working with the same
tokens you do.
Color
Your app's palette is built from a few perceptual color inputs, each with its own slider:
- Hue — sweep the accent color around the full color wheel.
- Chroma — dial the accent from muted to vivid.
- Lightness — set how light or dark the accent sits.
- Gray tint — subtly warm your grays toward the accent hue.
Moving any of them regenerates the entire palette — backgrounds, cards, borders, inputs, rings, and state colors all stay in harmony. A reset button takes the accent back to the default, and every slider works with the keyboard too (hold shift for fine adjustments).
Shape
Pick a corner radius from six presets, from perfectly square to fully rounded. One choice drives a whole radius scale, so buttons, cards, and fields all round consistently.
Type
Choose from thirteen font families — Geist, Inter, DM Sans, Figtree, Outfit, and more — with live previews in the picker. Your pick applies to both headings and body text across the app.
Presets and shuffle
Not sure where to start? Apply one of eleven theme presets — from clean defaults to palettes inspired by products you know — with an animated transition. Or hit shuffle and let design mode pick one for you.
Locks
Found a hue you love but still exploring type? Lock any value — hue, chroma, lightness, gray tint, radius, or font — and presets and shuffle will work around it, changing everything except what you've pinned down.
Light and dark
A mode toggle switches which side of your theme you're editing. Design mode
follows your site theme by default, and both light and dark tokens live in the
same globals.css, so your app looks right in both. Try your design at
different sizes too, and check the theme holds up everywhere.
Bring your own agent
Design mode doesn't care where a design came from. Push a design to Prototyper from Claude Code, Codex, or any other agent — or generate one with the in-app agents — and the Design tab works on it the same way.
Designs are synced in real time, so the loop closes both ways: dial in the precise design language visually, then ask Codex or Claude to integrate the updated design into your main app. The tokens you tuned are exactly what your agent reads.
How it works
A handful of inputs in the panel derive the full token set in your app's
globals.css, and every change is written through immediately:
There's no separate stylesheet or hidden state — the panel reads the tokens your app already uses, and writes them back. Anything you (or your agent) can do in CSS, design mode stays in sync with.
Design mode is available to everyone starting today — you'll find it in the left sidebar whenever an app is selected.