DESIGN.md is a plain text file you add to your project that gives AI coding agents the visual context they need to produce consistent, well-designed code. It contains your color tokens, typography stack, spacing scale, and motion settings in a format that Claude, Cursor, Windsurf, and other AI tools can read and apply.

How do I use DESIGN.md with Claude or Cursor?

Copy the DESIGN.md content from any design on DesignMD, then paste it at the top of your AI prompt or add it to your project context. The AI agent will use the design tokens when generating UI components, styling, and layout decisions.

Where did DESIGN.md come from?

The DESIGN.md format grew out of the AI coding community's need for a simple way to give language models design context. As AI coding agents became capable of writing entire UI components, developers found that agents without design context produced generic-looking output. DESIGN.md solved that by providing structured design information in plain text.

What is DESIGN.md? The format that makes AI code better-looking.

The problem it solves

AI coding agents are great at writing code. They are not great at making it look good.

Tell Claude to build a dashboard and you will get something functional. It might use arbitrary hex values, generic type stacks, inconsistent spacing. The code works. The design is forgettable.

The problem is not the AI. The problem is context. The agent does not know your design system. It does not know you use Inter, not Roboto. It does not know your primary blue is #0066CC, not the default Tailwind blue. It does not know your border radius is 8px, not 4px. DESIGN.md fixes that.

What is actually in the file

A DESIGN.md file is YAML frontmatter followed by plain text. The frontmatter contains your machine-readable design tokens. The text is human-readable guidance for the AI.

A complete DESIGN.md covers:

+Color tokens: primary, secondary, background, surface, text, accent, and semantic colors
+Typography: font families, weights, sizes, line heights, and letter spacing for each role
+Spacing: your base unit and scale
+Border radius: small, medium, large, and pill values
+Shadows: card, elevated, modal levels
+Motion: duration and easing for animations
+Component guidance: how buttons, cards, and inputs should feel

Paste it at the top of your prompt and the AI uses those values instead of inventing its own.

How to use it

Option 1: Paste it into your prompt

Copy a DESIGN.md file, paste it at the start of your message to Claude, Cursor, or Windsurf, then describe what you want to build. The agent uses the tokens throughout.

Option 2: Add it to your project context

Drop DESIGN.md in the root of your project. Tools like Claude Code read project files automatically. Every subsequent prompt in that project has design context without you doing anything extra.

Option 3: Use the MCP server

Connect your AI agent to the DesignMD MCP server and search for designs by aesthetic: "dark fintech", "minimal dev tools", "warm editorial." The agent retrieves the full DESIGN.md and applies it without you copying anything.

Set up the MCP server

Where the format came from

DESIGN.md emerged from the AI coding community in 2024 and 2025, as developers discovered that giving AI agents structured design context dramatically improved output quality. The format borrows from existing conventions: README.md for project documentation, package.json for project configuration, and design token standards from the design systems community.

The key insight: AI models are trained on code and text. Design tokens are already represented in CSS variables, design system documentation, and component libraries across the training data. DESIGN.md gives the model a direct, unambiguous reference for a project's specific design decisions.

Google Trends data shows searches for "DESIGN.md" starting in late 2024 and growing significantly through 2025 as AI coding tools became mainstream. The format is now referenced in Claude documentation, Cursor guides, and hundreds of open source projects.

Why borrow instead of build

Building a design system from scratch takes weeks. Most people coding with AI do not have weeks. They have a weekend.

The real insight behind DesignMD: you do not need to invent a design system. You can borrow the visual language of a brand you respect, understand, and want your product to feel like.

Building a fintech app? Borrow Stripe or Brex. Building a dev tool? Borrow Linear or Vercel. Building something for everyday consumers? Borrow Airbnb or Duolingo.

The designs here are not for copying brand identities. They are design system starting points. A set of decisions that someone already made well, that you can build from instead of starting with a blank page.

Popular designs to start with

Anthropic

Linear

Dev Tools

Spotify

Media

Stripi Inspired

Fintech

Vercel Inspired

Dev Tools

Frequently asked questions

Does using a DESIGN.md mean I am copying another brand?

No. You are borrowing design principles, not brand identity. Using Stripe-inspired design tokens does not make your product look like Stripe any more than using Inter as your font makes you look like Figma. Design systems are about structure, not brand.

Which AI tools support DESIGN.md?

Any AI tool that accepts text input works with DESIGN.md. That includes Claude, Cursor, Windsurf, GitHub Copilot, and any model you access through the API. For the best results with the DesignMD catalog, use the MCP server integration with Claude Code or Cursor.

Can I customize the DESIGN.md after downloading it?

Yes, and you should. The designs here are starting points. Change the primary color, swap the font, adjust the spacing scale. The file is yours to modify. Start with a design you like and make it your own.

How is this different from a full design system?

A full design system includes component libraries, Figma files, documentation, and organizational processes. DESIGN.md is intentionally minimal: just the tokens an AI agent needs to make consistent visual decisions. It is a design system starter, not a design system.

Start with a DESIGN.md today

Browse 110 design systems from the products you use every day. Pick one, copy the DESIGN.md, and paste it into your next AI prompt.

Browse the catalog