Using with Bolt

Bolt (StackBlitz) builds full apps from prompts inside an in-browser sandbox. It reads files from the project tree it's working in — drop DESIGN.md at the root and Bolt sees it.

Drop the file in

Once you've started a Bolt project, open the file tree and create DESIGN.md at the project root. Paste the contents of your local DESIGN.md (or fetch from designdrop directly):

# locally first
designdrop add stripe
# then copy DESIGN.md into Bolt

Bolt's left-rail file tree reflects the new file immediately and the agent can reference it on the next prompt.

Anchor the prompt

Read DESIGN.md before generating UI. Use the tokens defined there
(colors, typography, radius, spacing) instead of inventing values.
Quote the relevant section before writing each component.

The "quote-back" pattern works the same as with Claude Code and Cursor — it forces the model to ground in the file rather than its prior.

Bolt's tooling integration

Bolt includes Tailwind by default. Paste your theme.css export into the project's globals.css so token names are first-class:

@import 'tailwindcss';
 
@theme {
  --color-primary: #635bff;
  /* ... */
}

Now Bolt can use bg-primary / text-ink directly in the generated components without you having to map raw hex values back into the agent's output.

When Bolt drifts

Bolt occasionally invents radii or spacing values that don't appear in DESIGN.md. Two-pass workflow:

1. First prompt: generate the feature.
2. Second prompt: "Refactor every hardcoded color, radius, and spacing value to use tokens from DESIGN.md. Preserve behavior."

The second pass is fast and reliable. Faster than fighting the first generation to be perfect.