Tweak your running app like it's a Figma file.
Then hand the changes to your AI coding agent. Click anything on the page, change its variant, color, spacing or text and see it live. Copy one prompt that tells your agent exactly which file and line to change.
Design Mode is running on this page right now. In your own app it only runs while the Vite dev server is running, and is never part of a production build.
From "that looks off" to a precise change, without opening the code
Design reviews usually end in vague notes. Design Mode lets you make the change on the real app first, then turns it into instructions a coding agent can follow exactly.
Select
Press the cursor button, bottom right, and click anything. Design Mode tells you if it's a component or a plain HTML tag, and the exact file and line it was written on.
Tweak
Switch a variant, toggle a prop, pick a color token, nudge the padding, rewrite a label. It changes on the page immediately, and stays changed as the app re-renders.
Copy the prompt
Every change goes into one prompt: where it is, what it was, what it should be, and how far it should reach. Paste it into Claude Code, Cursor, Codex or any agent that edits code, and it makes the change.
Built for how design systems actually work
It reads your components and your theme, not just pixels, so changes land in the right place in the code.
Variants from your types
Props and their options come straight from each component's TypeScript types: variant: 'primary' | 'quiet' becomes a picker, booleans become toggles.
Tokens, scale, or raw
Every value says what it is: one of your design tokens (the named colors and sizes your app defines, like color-card), a step on Tailwind's scale, or a hard-coded one-off, marked "raw".
This one, or all of them
Choose who a change applies to: just this one, everything one line of code draws, every Button with this variant, or the component's default. Hover a choice to see what it covers.
Layers, like Figma
The page as a tree of components. Plain HTML is hidden until you want it, and repeats fold into one row ("Card ×3").
Hover and pressed states
Show any element in its hover or pressed look without holding the mouse on it, and freeze open menus while you inspect them.
Out of your app's way
Lives in its own sealed-off layer, so it can't break your styles. While selecting, clicks and keys never reach your app. Nothing ships to production.
One prompt, nothing to explain
The prompt is written for a reader who has your code but not your screen.
- Exact file and line for every change
- Old value → new value, as token names where you used tokens
- The Tailwind class to swap, when it can tell
- How far each change should reach, spelled out
- Changes you switched off are left out
Apply these design changes. I made them live in Design Mode; they are not in the code yet. 1. src/ui/HeaderBtn.tsx:51 — <Button> - variant: "control" → "primary", for all of them (all 8 from this line) 2. src/ui/kit/Button.tsx:103 — every <Button> - Radius (border-radius): --radius-ctrl → --radius-card (class rounded-ctrl → rounded-card) 3. src/ui/library/LibraryScreen.tsx:1146 — <span> "Upload song" - Text: "Upload song" → "Add a song" - Size (font-size): 16px (hard-coded) → text-2xl (class text-[16px] → text-2xl), for this one only.
Install in two steps
Works with React apps built with Vite. Your app's code stays untouched; Design Mode only adds itself while the Vite dev server is running.
1Add the package
npm install -D github:aymenr/design-mode
Installs straight from the open GitHub repo and builds itself.
2Add the plugin
// vite.config.ts
import designMode from 'design-mode/vite'
export default defineConfig({
plugins: [designMode(), react()],
})
Put it before React's plugin. Start your dev server as usual; the cursor button appears bottom right.
Controls
| Do this | To |
|---|---|
| Cursor button | Start selecting. Drag it to move it; it remembers the spot. |
| Click | Select the nearest component. |
| ⌥ Click | Select the exact HTML tag instead. |
| ↑ | Move to the parent while selecting. |
| Esc | Close the innermost thing: picker, select mode, selection, panel. |
| ⌥ ⇧ D | Turn Design Mode on or off. |
| Snowflake | Freeze the page so open menus stay open. |
Questions
- Does Design Mode ship to production?
- No. It only exists while you run the Vite dev server on your machine. Builds are untouched.
- Which AI agents does Design Mode work with?
- Any agent that can edit your code. The prompt is plain text with file paths, line numbers and before and after values, so it works with Claude Code, Cursor, OpenAI Codex, GitHub Copilot, Windsurf and others.
- Which frameworks does Design Mode support?
- React with Vite today. Plain HTML pages and Next.js are planned.
- Where do component variants come from?
- From each component's TypeScript types. A prop typed as a union of strings becomes a picker; a plain string gets a text field.
- What happens to my tweaks when I reload?
- They live only on the page, so a reload clears them. You are asked first if you haven't copied the prompt yet.
- Can I edit things drawn on a canvas?
- Only as a whole. Anything drawn on a
<canvas>element is one image to the browser, so it can be selected but not taken apart.