How to give Claude Code or Cursor a DESIGN.md from a screenshot

Coding agents like Claude Code and Cursor are good at following rules and bad at guessing taste. Give them a screenshot and they approximate; give them a DESIGN.md with the real values and they build to it, every time they touch the UI.

What a DESIGN.md is

A Markdown file in your repo that states the design system in plain words and exact numbers: color tokens with hex values, fonts with weights, a type scale with sizes and line heights, radii, spacing, shadows, layout rules, and how each component looks. Agents read project files for context, so a clear spec file steers every change they make.

What to put in it

Rules first. “Use only these tokens; never hard-code a value that has one; if something isn’t specified, pick the closest token and say so.”
Tokens. Colors with roles (“ink: headline and nav text”), fonts, sizes in px, line heights, letter spacing in em.
Components. One line each for buttons, nav, cards: size, radius, border, fill, hover.
Layout and motion. Max width, columns, padding, and any animation with its duration and easing.

Getting the values from a screenshot

Writing this by hand means naming every color and measuring every gap. Recast reads the screenshot, writes the prompt, and exports the same values as a DESIGN.md (plus a Tailwind v4 theme, CSS variables, and tokens.json). Drop the file in your repo root, then tell the agent: “Build to DESIGN.md.” Below is the real export for a landing-page hero.

Keep it working

Mention the file in your agent’s project instructions (CLAUDE.md for Claude Code, rules for Cursor) so it’s always read. When the design changes, export a new version rather than editing values by hand, so the spec and the design never drift.

DESIGN.md

## Rules for the coding agent

- Build to this spec exactly. Use only the colors, fonts, sizes, radii, spacing and shadows listed here; don't invent new values.
- Put the tokens in one place (CSS variables or the Tailwind theme) and reference them; never hard-code a value that has a token.
- When something isn't specified, choose the closest existing token and say so.

## Colors

| Token | Value | Use |
|---|---|---|
| `--color-ink` | #14233A | headline, nav text, icon fill, underline, arrow border |
| `--color-ink-muted` | #5B6676 | tagline text |
| `--color-line` | #14233A | active nav underline and arrow button border |
| `--color-sky` | #E6EAEF | fallback background behind photo, menu overlay background |
| `--color-mist` | #F2F4F7 | brightest cloud tone / news dot ring color |
| `--color-rock` | #7C8799 | mid-tone mountain shadows |

## Fonts

| Role | Family | Weights |
|---|---|---|
| heading | Inter Tight (Inter, 'Helvetica Neue', Arial, sans-serif) | 400 |

Real Recast export: the DESIGN.md for a landing-page hero, written from one screenshot. See the design and the full spec.

Common questions

What is a DESIGN.md file?

A Markdown file in your repo that lists a design’s exact tokens (colors, fonts, type scale, spacing, radii) and component rules, so coding agents like Claude Code and Cursor build to real values instead of guessing.

Do I need Figma to make one?

No. Recast writes it from a screenshot or a video of any design, and exports it free with every prompt version.

Where do I put DESIGN.md?

In the repo root, and reference it from your agent’s project instructions (CLAUDE.md for Claude Code, or Cursor rules) so every change follows it.

More guides

Try it on your own design.

Drop in a screenshot, hero video, or screen recording, and Recast writes the exact prompt to rebuild it in v0, Lovable, Bolt, Claude Code, or Cursor.