Your design system in one markdown file

What a DESIGN.md looks like

It is just markdown, the same format readme files use. Open it in any text editor and you see your system at a glance: colors ranked by how often they are actually used, the full type scale, spacing, radii, shadows, and a variant matrix for every component set. For a Button that means variant times size times state, with all the values.

Because it is plain text, three things become easy that used to be painful:

• AI tools can read it. Claude, Cursor and Copilot all understand markdown. Drop your DESIGN.md into a prompt and the UI they generate finally uses your colors and your spacing, not random Tailwind defaults.
• It travels between files. Export from file A, import into file B. Variables and all.
• It documents itself. One command replaces an afternoon of hand-written token tables.

Export any open Figma file

Open the file in Figma Desktop, then tell Claude Code:

This works on your own files, client files, and Community files. It scans every page with no truncation, even on huge documents. GitHub's Primer Web file has 67 pages and 124,000 nodes, and it comes out as a 35k-token main file, small enough for an AI to read in one go. When the structure trees alone would blow the context window, they are split into per-page files automatically.

Variables come across whole

If your file defines real variable collections, the export captures them as they are: every variable with its real name, all of its modes, light, dark, high contrast, whatever the system uses, and the alias chains between them. That is the difference between transferring a system and copying a palette.

The file round-trips. Import recreates those collections faithfully in any other file, modes and aliases included, so a token layer survives the trip instead of coming back as flat hex.

Import it anywhere

The reverse direction creates real Figma variables, with names like primary, canvas, ink and accent that you can bind to anything:

Because the token names stay consistent, you can also re-theme an existing design on demand. "Now make it look like Vercel" swaps the whole layout to another system without rebuilding anything.

Reuse instead of rebuild

Every component in an exported DESIGN.md carries a reuse handle. Ask for a component that already exists and the AI drops a real instance of it instead of hand-building a one-off copy, so the new file stays consistent with the system it came from.

Components are addressable too. The AI can pull one component's spec out of the markdown instead of loading the whole file, which keeps its context small on big systems.

No DESIGN.md? Import from your codebase

If your team already has the design system in code, you can skip the file and point Claude at the source directly:

• tailwind.config.js: colors, radii, spacing and font families land as Figma variables.
• globals.css: shadcn HSL triples, Tailwind v4 theme blocks and oklch all work.
• tokens.json: W3C design-tokens format and Style Dictionary, including alias resolution.
• Storybook: imports your component inventory, names and variants, as context for the AI.

Questions