Cursor ships features fast. That is the whole pitch. But fast code that ignores your design system is just fast debt.
DESIGN.md fixes that. Give Cursor your design rules once, and every component it generates follows them. Here are four ways to do it, from the simplest to the most powerful.
Method 1: Paste it in chat (30 seconds)
Open Cursor chat, paste your DESIGN.md content at the top of your message, then write your request below it. That is it.
---
name: My Design System
colors:
primary: "#6366F1"
background: "#0A0A0A"
...
---
Build me a pricing table component using these tokens.
Best for quick, one-off tasks. Not great for ongoing projects because you have to paste it every single time.
Method 2: Add DESIGN.md to your project root (5 minutes)
Cursor reads project files for context. Drop DESIGN.md in the root and it becomes part of the project's ambient knowledge.
your-project/
DESIGN.md ← drop it here
src/
package.json
.cursorrules
Once it is there, Cursor can reference it in any chat or Composer session. You still might want to mention it in your prompt the first time, but you are done copying and pasting.
Method 3: Reference it in .cursorrules (10 minutes)
.cursorrules is Cursor's project instruction file. Whatever you put there, Cursor follows for every session. Add a section that tells it to apply DESIGN.md for all UI work.
# UI and Design
Always follow the design system defined in DESIGN.md.
- Use the exact color tokens specified. Do not invent hex values.
- Apply the type scale from DESIGN.md to all text elements.
- Use the spacing scale for all margins, padding, and gaps.
- Match the border radius and shadow tokens.
When building any component, check DESIGN.md first.
Now you never have to mention DESIGN.md in a prompt. Cursor checks it automatically before writing UI code.
Method 4: Use the DesignMD MCP server (15 minutes, best long-term)
The MCP server lets Cursor search and retrieve designs from the DesignMD catalog directly. No copy-pasting, no file management. You just ask for what you want and Cursor fetches it.
Add this to your Cursor MCP config file (usually at ~/.cursor/mcp.json or your project's .cursor/mcp.json):
{
"mcpServers": {
"designmd": {
"type": "http",
"url": "https://designmd.co/api/mcp"
}
}
}
After saving, restart Cursor. Then you can say: "Search DesignMD for a minimal dark SaaS design and apply it to my app." Cursor will query the catalog, pull the tokens, and use them.
Full MCP setup guidePrompts that work well in Cursor
Cursor's Composer mode is especially good at multi-file changes. These prompts get consistent results when your DESIGN.md is loaded:
The pattern that works best: be specific about which part of the design system matters for the task at hand. Cursor responds well to constraints.
Browse designs for your project
Find a DESIGN.md that fits your aesthetic and drop it straight into Cursor.
Browse designs