Design Systems for Cursor, Claude Code, and Windsurf

The common ground

Here's the good news: the design tokens themselves are identical regardless of which AI tool you use. Colors, fonts, spacing, radius, shadows. These don't change. What changes is the file the agent reads and how strictly it follows the instructions in that file.

All three tools support two approaches: static rule files (baked into the project) and MCP servers (queried dynamically). Rule files are simpler. MCP is more flexible. Most teams start with rule files and add MCP later when they need to work across multiple design systems.

Quick comparison

Feature	Cursor	Claude Code	Windsurf
Rule file	`.cursorrules`	`CLAUDE.md`	`.windsurfrules`
Auto-loaded?	Yes, on every prompt	Yes, on every prompt	Yes, on every prompt
MCP support	Yes (`.cursor/mcp.json`)	Yes (`.claude.json`)	Yes (`.windsurf/mcp.json`)
Format	Plain text / Markdown	Markdown	Plain text / Markdown
Enforcement	Advisory (can be overridden)	Strong (follows instructions closely)	Advisory (can be overridden)
Best for	IDE-integrated workflows	Terminal-first, full-project context	IDE-integrated workflows

Cursor: .cursorrules

Cursor reads a .cursorrules file from your project root on every prompt. This is where you define your design tokens, naming conventions, and visual constraints.

# .cursorrules

## Design System
Use these design tokens for all UI components:

Colors:
  Background: #FAFAFA
  Surface: #FFFFFF
  Border: #E4E4E7
  Text: #18181B
  Accent: #2563EB

Typography:
  Headings: Inter, 600 weight
  Body: Inter, 400 weight, 15px

Spacing: 4px base unit
Radius: 8px default
Shadow: 0 1px 3px rgba(0,0,0,0.08)

Cursor's enforcement is advisory. The agent tries to follow the rules but can deviate if your prompt contradicts them. For the full setup walkthrough, read How to Build a Design System in .cursorrules.

Claude Code: CLAUDE.md

Claude Code reads CLAUDE.md from your project root. It treats the contents as system-level instructions. Claude Code is notably thorough about following these instructions, making it the most reliable for design system enforcement.

# CLAUDE.md

## Design System — ALWAYS USE THESE TOKENS

Colors:
  --color-bg: #FAFAFA
  --color-surface: #FFFFFF
  --color-border: #E4E4E7
  --color-text: #18181B
  --color-accent: #2563EB

Typography:
  Headings: Inter, weight 600
  Body: Inter, weight 400, 15px, line-height 1.75

Border radius: 8px (all components)
Shadow: 0 1px 3px rgba(0,0,0,0.08)

NEVER use Tailwind default colors (blue-500, gray-300, etc).
ALWAYS use the semantic tokens defined above.

The explicit constraint language (“NEVER,” “ALWAYS”) works well with Claude Code. It respects those boundaries. Full guide: How to Build a Design System in CLAUDE.md.

Windsurf: .windsurfrules

Windsurf reads .windsurfrules from your project root. The format and behavior are similar to Cursor's approach. Same token structure, same advisory enforcement.

# .windsurfrules

## Design Tokens
Background: #FAFAFA
Surface: #FFFFFF
Border: #E4E4E7
Text: #18181B
Accent: #2563EB
Font: Inter
Radius: 8px

Full guide: How to Add Design Tokens to .windsurfrules.

Glacier

Ice blue precision tools

Inter+Inter

lightcoolclean

View seed →

MCP: the universal approach

All three tools support MCP servers. This means you can give any of them dynamic access to a design system without baking tokens into a static file.

The advantage: one MCP server works across all three tools. The SeedFlip MCP server (npx seedflip-mcp) exposes the same 100+ design seeds to Cursor, Claude Code, and Windsurf with identical output. You set it up once per tool, and the agent can query any seed in any format.

For the complete MCP setup across all tools, read the MCP Setup Guide.

Which approach should you use?

Use rule files when:

You have one design system per project and it doesn't change often. The tokens are locked in. You want zero setup beyond dropping a file in the project root. This covers most single-brand projects.

Use MCP when:

You work across multiple projects with different design systems. You want to explore options before committing. You're building for clients and need to switch brand contexts. Or you want your agent to have access to 100+ curated design seeds without pasting token blocks into every conversation.

Use both when:

You want the project's locked-in tokens in the rule file (so the agent always has them) plus MCP access for exploring alternatives or generating new variations. This is the most complete setup.

The takeaway

The tool doesn't matter as much as the input. Cursor, Claude Code, and Windsurf all produce better UI when they have structured design tokens. The file format is different. The config location is different. But the principle is identical: give your agent a design vocabulary and it stops guessing.

Pick the guide for your tool and get set up in five minutes. For the cross-tool approach, start with the Design Tokens to IDE Rule Files overview.