Every AI coding tool generates UI differently. Claude Code defaults to one set of components. Cursor reaches for another. Copilot generates yet another flavor. Without a design system, your app looks like a patchwork.
This guide walks you through setup for every major AI coding tool in 2026. By the end, you'll have a design system that works across all of them.
What You Need Before You Start
You don't need a finished design. You need three things.
First, a components folder. This holds your pre-styled React components (Button, Card, Input, etc.). When your AI tool generates UI, it imports from this folder instead of creating components from scratch.
Second, a design tokens file. Usually globals.css or tokens.json. This defines your colors, spacing scale, typography sizes, border radius, shadows. One source of truth.
Third, a rules file. The format changes per tool, but the content stays the same. This file tells your AI tool to use your components and respect your tokens. It's where you encode your design constraints.
If you're starting from scratch, the quickest path is to download a preset from Matchkit. If you're retrofitting an existing site, extract your tokens first (more on that later).
Claude Code Setup
Claude Code is the closest integration because it's built by Anthropic (the company behind Claude itself). The tooling is the tightest.
Option A: Matchkit MCP (One Command)
If you're using Matchkit, this is your path.
First, configure your design in the Matchkit configurator. Pick a preset (Clarity, Soft, Glass, or Brutal) or adjust the 11 design axes to fit your vibe. Download the ZIP or connect via CLI.
If you're on the Pro tier, run this command in your project root:
matchkit install-mcp
Claude Code will prompt you to allow the MCP server. Click "Allow" and you're done. Claude Code now reads your design system on every prompt.
The MCP server lets Claude Code query your components and tokens interactively. When Claude Code needs to know your spacing scale, it asks the MCP instead of guessing. This keeps the output tighter than file-based rules alone.
Option B: Manual SKILL.md Setup
If you're not using Matchkit, you can write SKILL.md directly.
Create a file at the root of your project:
project-root/
├── .claude/
│ └── SKILL.md
├── src/
│ ├── components/
│ │ └── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ └── globals.css
└── package.json
SKILL.md uses YAML frontmatter to tell Claude Code when to load the skill. Here's a minimal example:
---
name: Design System
description: Enforces consistent UI using pre-styled components
triggers:
- prompt contains: "button" OR "form" OR "card" OR "layout"
- file matches: "**/*.tsx"
---
# Design System Constraints
You're building UI in a React project with a design system. When generating components:
1. Always import pre-styled components from src/components/ui/
- Button from src/components/ui/button
- Card from src/components/ui/card
- Input from src/components/ui/input
2. Typography uses these sizes:
- h1: 2.5rem, font-weight 700
- h2: 2rem, font-weight 700
- h3: 1.5rem, font-weight 600
- body: 1rem, font-weight 400
3. Color tokens in globals.css:
- Primary: #2563eb
- Secondary: #64748b
- Background: #ffffff
- Border: #e2e8f0
4. Spacing scale (multiples of 4px):
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
5. Never use hardcoded colors or padding. Always reference tokens.
Save the file and restart Claude Code. On your next prompt, Claude Code will load the skill automatically.
To verify: Ask Claude Code to "build a settings page." If the output imports from src/components/ui/ and uses your color tokens, it's working.
Cursor Setup
Cursor uses a different format: .cursor/rules/ with MDC (Markdown Component) files. This is Cursor's modern standard.
Creating .cursor/rules/design.mdc
Create the directory and file:
project-root/
├── .cursor/
│ └── rules/
│ └── design.mdc
├── src/
│ ├── components/
│ │ └── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ └── globals.css
└── package.json
The design.mdc file uses YAML frontmatter with glob patterns:
---
globs: ["**/*.tsx", "**/*.css"]
---
# Design System Rules
## Typography
Always use these sizes:
- **h1**: 2.5rem, font-weight: 700
- **h2**: 2rem, font-weight: 700
- **h3**: 1.5rem, font-weight: 600
- **body**: 1rem, font-weight: 400
Never use unsized `<h2>` tags without applying the correct size class.
## Colors
Reference the design tokens in globals.css. Never hardcode colors:
- Primary: `var(--color-primary)` (#2563eb)
- Secondary: `var(--color-secondary)` (#64748b)
- Background: `var(--color-bg)` (#ffffff)
- Border: `var(--color-border)` (#e2e8f0)
## Components
Always import from `src/components/ui/`:
```tsx
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
Never create Button, Card, or Input components from scratch.
Spacing
Use the spacing scale from globals.css:
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
Apply spacing via CSS variables or utility classes. Never hardcode values.
Forbidden Patterns
Do NOT:
- Create custom Button or Card components. Use the pre-styled ones.
- Use hardcoded hex colors like
color: "#2563eb". Use CSS variables. - Add
padding: 24pxdirectly. Use spacing tokens. - Import from shadcn/ui unless already in the project.
### Placing Components and Tokens
Cursor won't automatically find your components. You need to tell it where to look.
Create `src/components/ui/` with your pre-styled components. Cursor reads the rule file, sees the import paths, and checks those directories when generating.
Also create `src/globals.css` with your design tokens:
```css
:root {
--color-primary: #2563eb;
--color-secondary: #64748b;
--color-bg: #ffffff;
--color-border: #e2e8f0;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
}
Test by prompting: "Build a login form." If Cursor imports from src/components/ui/ and uses color tokens, you're good.
GitHub Copilot Setup
Copilot's rules are less powerful than Claude Code or Cursor, but they work.
Create .github/copilot-instructions.md at the project root:
project-root/
├── .github/
│ └── copilot-instructions.md
├── src/
│ ├── components/
│ │ └── ui/
│ └── globals.css
└── package.json
The file is plain markdown (no frontmatter):
# Copilot Design System Instructions
When generating React components for this project:
1. Import components from src/components/ui/:
- import { Button } from "@/components/ui/button"
- import { Card } from "@/components/ui/card"
- import { Input } from "@/components/ui/input"
2. Use design tokens from globals.css:
- Primary color: var(--color-primary)
- Spacing: var(--spacing-md), var(--spacing-lg), etc.
- Border radius: var(--radius-md)
- Shadows: var(--shadow-md)
3. Never hardcode colors, spacing, or component logic.
4. Always check src/components/ui/ before creating new components.
The limitation: Copilot doesn't parse the rules file contextually like Claude Code or Cursor. You need to mention the rules in your prompts occasionally. But if your rules are clear enough, Copilot will usually follow them.
Windsurf Setup
Windsurf reads Cursor's .cursor/rules/ format natively. If you've already set up Cursor, Windsurf will use the same rules.
If you're starting fresh, create the same .cursor/rules/design.mdc file:
project-root/
├── .cursor/
│ └── rules/
│ └── design.mdc
├── src/
│ └── components/
│ └── ui/
└── package.json
Use the same content as the Cursor setup above. Windsurf will respect the glob patterns and apply the rules consistently.
Windsurf's agentic mode (Cascade) is more powerful than Cursor's basic generation. It can reason about your design constraints across multiple files. The rules file acts as a manifest of what's allowed.
Lovable and Bolt Setup
Lovable (formerly Lovable.dev) and Bolt (Bolt.new) are browser-based, so they don't read local files.
Instead, you'll copy your design system rules into the tool's context window or use custom instructions.
For Lovable, create a custom instruction in your project settings:
Design System Constraints:
Components live in src/components/ui/. Always import from there:
- Button, Card, Input, Checkbox, etc.
Never create components from scratch. The pre-styled ones exist.
Design tokens in src/globals.css:
- Colors: primary (#2563eb), secondary (#64748b), background, border
- Spacing: xs (4px), sm (8px), md (16px), lg (24px), xl (32px)
- Radius: sm (4px), md (8px), lg (12px)
Use CSS variables for everything. No hardcoded values.
When I ask for a button, import Button from src/components/ui/button, not create one.
For Bolt, the same instruction works. Bolt reads context from your prompts, so include a line like "Use the design system in src/components/ui/" in your initial prompt.
The trade-off: These tools won't have local file access, so they can't automatically detect changes to your tokens. You'll need to re-paste instructions if your design system evolves.
Testing Across Tools (Same Prompt, Compare Output)
Here's a concrete test. Use the same prompt in all five tools and compare the output.
Prompt:
Build a settings page with these sections:
- Account (change email, password, delete account)
- Notifications (toggle email, SMS, in-app)
- Preferences (dark mode, font size)
Use the design system. No hardcoded colors or spacing.
Expected output:
- All components imported from
src/components/ui/(or your component path) - Colors use CSS variables or token references
- Spacing uses the scale from globals.css
- Typography sizes match your design tokens
- No inline styles with hardcoded values
If you see hardcoded color: "#2563eb" or padding: "24px", the design system isn't working. Check that the rules file is in the correct directory and properly formatted.
One more thing: Some tools (Claude Code, Cursor) re-read rules files on every prompt. Others (Copilot, Lovable, Bolt) read them once at startup. If you update your rules file and the tool isn't picking up the change, restart it or update the custom instructions.
Frequently Asked Questions
Which AI coding tool has the best design system support?
Claude Code has the most robust support through SKILL.md files and MCP server integration. The SKILL.md format allows skill-specific loading with YAML frontmatter, and MCP enables interactive design system access. You can query components and tokens dynamically instead of static rules. Cursor is second with .cursor/rules/design.mdc supporting glob-targeted rules. Copilot's support is functional but less configurable. Windsurf mirrors Cursor's capabilities. Lovable and Bolt require manual instruction pasting, making them the least integrated.
Can I use the same design system across multiple AI coding tools?
Yes. Design tokens (globals.css) and components (src/components/ui/) are universal. Only the rules file differs per tool. Claude Code reads SKILL.md, Cursor reads .cursor/rules/design.mdc, Copilot reads .github/copilot-instructions.md, Windsurf reads the same rules as Cursor, and Lovable/Bolt need custom instructions. The rules content is nearly identical, just formatted for each tool's parser. Matchkit generates all three from one configuration automatically.
How do I test if my AI tool is following my design system?
Prompt your AI tool to "build a settings page" with zero design instructions. If the output uses your tokens, imports your pre-styled components, and follows your spacing rules, the design system is working. If it falls back to shadcn defaults or hardcoded values, check that your rules file is in the correct directory and properly formatted. Also verify that the glob patterns match your file types.
Can I have different design systems for different parts of my project?
Yes. Use glob patterns to target specific directories. In Cursor, create multiple .cursor/rules/ files: design.mdc for components, api.mdc for API routes, pages.mdc for pages. Each file's frontmatter specifies which globs it applies to. Claude Code's SKILL.md also supports triggers, so you can load different skills based on file patterns or prompt content.
What happens if I update my design system after initial setup?
Update your tokens file (globals.css), update your component library, and update the rules file. Claude Code and Cursor re-read the rules on every prompt, so changes take effect immediately. Copilot, Lovable, and Bolt cache the instructions, so you may need to re-paste them or restart the tool. Always communicate changes to your team so everyone regenerates using the latest system.
How long should my rules file be?
Shorter is better. Aim for under 200 lines. If your design system is larger, break it into multiple files per tool (Claude Code: separate SKILLs, Cursor: separate .mdc files). Tools like Copilot ignore rules files beyond a certain length, so concise wins.
Do I need a designer to set up a design system for AI coding?
No. Use a preset like Matchkit and adjust the axes to match your vibe. Or extract tokens from your existing website. The design system doesn't need to be perfect upfront. It needs to be consistent. Start with something reasonable, let your AI tool generate UI, and iterate based on what you see.