# How to Use DESIGN.md in Claude Code, Cursor and v0

> A step-by-step guide to connecting your DESIGN.md file to Claude Code, Cursor, v0, GitHub Copilot and tools that support AGENTS.md, with sample instructions and prompt patterns.

Author: Murat Canbaz · Updated: 2026-09-27 · Source: https://www.makemymd.com/en/guides/design-md-claude-code-cursor-v0/

## The short answer

Put your DESIGN.md file in the root folder of your project, then reference it from the **instruction file your tool reads in every session**: `CLAUDE.md` for Claude Code, `.cursor/rules/` for Cursor, `.github/copilot-instructions.md` for GitHub Copilot and `AGENTS.md` for other agents. The tool then applies your brand's colors, typefaces and component rules to every piece of UI work, without you having to remind it.

If you don't have a DESIGN.md yet, read [What is DESIGN.md?](/en/guides/what-is-design-md/) first, or create one in a few minutes with the [MakeMyMD wizard](/en/create/).

## Preparation: put the file in the right place

1. Download your DESIGN.md and place it in the root folder of your project, next to `README.md`.
2. Keep the file name: `DESIGN.md` (in capitals) is the name both people and tools recognize.
3. If the project uses Tailwind, add the Tailwind theme of the same design system; otherwise add the CSS variables. This lets the tool write token names straight into the code.

![The DESIGN.md, CSS and JSON tabs of a design system](/assets/screens/sablon.jpg "On every library page you can get the DESIGN.md file with “Download .MD” and its CSS and JSON equivalents from the tabs on the right.")

## Claude Code

Claude Code reads the `CLAUDE.md` file in the project root at the start of every session, and that file can import other files with `@`. Adding this to your `CLAUDE.md` is enough:

```md
## Design system

Follow the design rules below when writing UI code; don't invent colors, fonts
or spacing, use only the tokens in this file.

@DESIGN.md
```

Then you can ask directly: “Build a pricing page; use the primary action color and the button rules from DESIGN.md.”

## Cursor

Cursor keeps project rules in `.mdc` files in the `.cursor/rules/` folder. Create a design rule that always applies:

```md
---
description: Brand design system
alwaysApply: true
---

When writing UI code, follow the color, typography, spacing and component
rules in the project's DESIGN.md file. Don't use colors or fonts it doesn't define.

@DESIGN.md
```

Save the file as `.cursor/rules/design-system.mdc`. Cursor can also read an `AGENTS.md` file in the root folder; if your team uses several tools, collecting the instructions there may be more practical.

## v0

Because v0 works through a chat and project interface, you need to give it the file directly:

1. Upload DESIGN.md as an attachment in the chat or paste its contents.
2. Add a short rule to the project's persistent instructions, such as “All interfaces in this project must follow the attached DESIGN.md.”
3. Name the component and the state when you ask: “A settings page in the dark theme, using the card and button rules from DESIGN.md.”

v0's menu names change from time to time; if there is no persistent instructions field, adding DESIGN.md at the start of every new chat gives the same result.

## GitHub Copilot

Copilot takes the instructions in the repository's `.github/copilot-instructions.md` file into account in chats and code suggestions. Add this section to the file:

```md
## Design system

When generating user interface code, apply the color, typography and component
rules in the DESIGN.md file in the root folder. Don't invent new colors or fonts.
```

## Other tools that support AGENTS.md

`AGENTS.md` is a widely used instruction file format for AI coding agents and is read by many tools. Add the same instruction to the `AGENTS.md` file in your root folder to steer several tools from one place:

```md
## Design

Follow the design system in ./DESIGN.md for all UI work.
```

## Effective prompt patterns

Even with DESIGN.md in place, a clearly framed request noticeably improves the result:

| Goal | Example prompt |
|---|---|
| New page | “Create an about page using the typography scale in DESIGN.md; use the display token for the heading and the body token for the text.” |
| Component | “Build a button group with the primary and secondary button rules from DESIGN.md; include hover and disabled states.” |
| Review | “Review this component against DESIGN.md; list any undefined colors and wrong corner radii.” |
| Conversion | “Replace the hard-coded hex values on this page with the CSS variables that correspond to the tokens in DESIGN.md.” |
| Theme | “Create a dark mode version of this screen with the dark theme colors from DESIGN.md.” |

## If the tool ignores the rules

- **Mention the file explicitly in your request.** Saying “according to DESIGN.md” makes sure the file is pulled into context.
- **Keep the file short.** A very long DESIGN.md can cause important rules to be overlooked; remove repeated explanations.
- **Write down prohibitions.** Clear limits such as “no gradients” or “only one accent color” work better than general descriptions.
- **Validate the file.** The `npx @google/design.md lint DESIGN.md` command shows broken token references and low-contrast color pairs.
- **Add the tokens to your code too.** When CSS variables or a Tailwind theme are defined in the project, the tool uses the ready-made name instead of “guessing” the right value. For details, see [What are design tokens?](/en/guides/what-are-design-tokens/)

## Frequently asked questions

### Do I need to add DESIGN.md to every request?

No. In Claude Code, Cursor and Copilot, referencing it once from the instruction file is enough; the tool reads it in every session. In chat tools without an instruction file, you need to add the file at the start of each new chat.

### What if I use several tools in the same project?

Keep DESIGN.md in the root folder as the single source, and only reference it from files such as `CLAUDE.md`, `.cursor/rules/` and `AGENTS.md`. That way the rules are updated in one place.

### Can DESIGN.md and a Tailwind theme be used together?

Yes, and it's recommended. DESIGN.md explains the rules and the reasoning, while the Tailwind theme binds the same values to your code. MakeMyMD exports the same design system in both formats.

### Can I try it with a ready-made brand design system?

Yes. Download a brand's DESIGN.md from the [design system library](/en/design-systems/) and drop it into your project to see right away what the tool produces in that style.