AI agent workflow

DESIGN.md for Bolt

Bolt by StackBlitz can scaffold, run, and deploy full-stack web applications from a single prompt. That speed is exactly why design memory matters at the first build. DESIGN.md gives Bolt a visual brief before the app exists: colors, typography, density, navigation, form rules, and component behavior so the generated code is coherent from the first preview.

Read the Bolt guideBrowse Bolt entries

Give Bolt a design brief before the first build

The strongest Bolt prompt pairs product intent with a visual constraint file. Start with the application goal, then paste or attach DESIGN.md, then ask Bolt to scaffold around those rules: "Build a Next.js founder analytics dashboard. Follow this DESIGN.md exactly. Use the color tokens, compact card rhythm, table density, empty states, and button variants described here. Do not add decorative gradients or marketing hero sections." This gives Bolt enough information to create coherent files from the first preview.

Iterate without visual drift

Bolt is conversational, so the product evolves through follow-up prompts. DESIGN.md keeps those follow-ups from becoming style roulette. When adding a new feature, include "keep the implementation aligned with DESIGN.md and reuse existing components." When the preview looks off, update the design file instead of writing a longer one-off correction. Over time, DESIGN.md becomes the reusable design memory for the project.

Start here

Move from this landing page into deeper DESIGN.md references, examples, and guides.

Browse Bolt entries

Find DESIGN.md files tagged for Bolt in the catalog.

Open

Full Bolt guide

Long-form guide for using DESIGN.md with Bolt.

Open

DESIGN.md templates

Starter templates for bolt.new projects.

Open

Frequently asked questions

What is DESIGN.md for Bolt?

DESIGN.md is a visual design brief that you give Bolt before the first build. It defines colors, typography, spacing, component behavior, and anti-patterns so Bolt-generated full-stack apps follow your product design system from the first prompt rather than generic starter-kit defaults.

How do I use DESIGN.md with bolt.new?

Include DESIGN.md in your first Bolt prompt: "Follow this DESIGN.md for all visual decisions. Use the color tokens, spacing rules, and component behavior described here. Do not add decorative gradients or marketing hero sections." For follow-up prompts, add "keep aligned with DESIGN.md and reuse existing components."

What should a Bolt-ready DESIGN.md include?

For full-stack prototypes, include page templates for landing, dashboard, settings, forms, and error states — not just component tokens. Define how data tables scan, how cards group information, how mobile layouts collapse, and how empty states should look. Bolt often builds entire product surfaces at once, so surface-level rules matter as much as token-level rules.

Search the catalog

design md for boltbolt new design system promptbolt ai app ui design rules