What is DESIGN.md?

DESIGN.md is a markdown specification that encodes a visual identity in a way that AI coding agents can read. Drop one in your repo and tools like Claude Code, Cursor, v0, Bolt, Lovable, and Google Stitch will produce UI that matches your brand instead of the default look they ship with.

What designdrop gives you

• A curated library of brand-inspired DESIGN.md files you can install with one command.
• Instant URL extraction — paste a site, get a DESIGN.md tailored to its actual computed styles.
• A visual editor with WCAG validation and live preview so you can edit without losing fidelity.
• Multi-format export: DESIGN.md, CSS variables, Tailwind preset, and DTCG JSON for handoff.

How it differs from a design tokens file

DTCG JSON is a great machine format but agents don't know what to do with it. CSS variables are runtime-only and describe pixels rather than intent. DESIGN.md sits at the right altitude: a human-readable narrative the agent can quote in its responses, plus structured token sections it can copy-paste into the code it generates.

A typical DESIGN.md is 80–200 lines, defines colors / typography / radius / spacing / motion, and ends with three or four UI patterns the agent should respect (buttons, cards, layout grids). That's enough to anchor every subsequent generation in the brand.

Where to go next

• Quick start — install the CLI and add your first design system in two minutes.
• Your first design system — author one from scratch using the editor.
• Generating from URL — paste any site and get a DESIGN.md.