How to Give Your AI Coding Agent a Design System (MCP Setup Guide)

The problem: agents build fast, but ugly

You've used an AI coding agent. You've seen it scaffold a full dashboard in thirty seconds. And you've seen the result: Tailwind defaults, Inter font, rounded-lg, bg-blue-500. It looks like a template because your agent has no design vocabulary to work with.

The fix isn't better prompting. You can write “make it look like Linear” all day and the output still won't match because the agent doesn't know what Linear's design tokens actually are. It needs structured data. Hex codes. Font stacks. Radius values. Shadow definitions.

That's what MCP servers solve. They give your agent access to real tools and real data, not just conversation context.

What you'll set up

By the end of this guide, your agent will be able to:

1. Query 100+ curated design seeds by name, brand reference, or vibe
2. Get complete design tokens (colors, typography, spacing, shadows, radius) in any format
3. Output production-ready CSS variables, Tailwind config, or shadcn/ui theme blocks
4. Apply consistent design decisions across every component it builds

Setup: Claude Desktop

Open your Claude Desktop config file. On macOS, it's at ~/Library/Application Support/Claude/claude_desktop_config.json. On Windows, check %APPDATA%\Claude\claude_desktop_config.json.

Add the SeedFlip MCP server to the mcpServers object:

{
  "mcpServers": {
    "seedflip": {
      "command": "npx",
      "args": ["seedflip-mcp"]
    }
  }
}

Restart Claude Desktop. You'll see a hammer icon in the chat input indicating tools are available. Now you can ask Claude to “find a design seed that feels like Stripe” and it'll query the MCP server, find Amethyst, and return the full token set.

Setup: Cursor

Cursor supports MCP servers through its settings. Open .cursor/mcp.json in your project root (create it if it doesn't exist):

{
  "mcpServers": {
    "seedflip": {
      "command": "npx",
      "args": ["seedflip-mcp"]
    }
  }
}

Restart Cursor. The agent now has access to get_design_seed and list_design_seeds tools. When you ask it to build a component, tell it to “use the Velocity seed” and it'll pull the exact tokens.

Setup: Claude Code

Claude Code reads MCP configuration from .claude.json in your project root or home directory:

{
  "mcpServers": {
    "seedflip": {
      "command": "npx",
      "args": ["seedflip-mcp"]
    }
  }
}

No restart needed. Claude Code picks up MCP servers automatically. Ask it to “list design seeds with a dark theme” and it'll call the tool directly.

Setup: Windsurf

Windsurf (by Codeium) supports MCP through its configuration. Add the server in .windsurf/mcp.json:

{
  "mcpServers": {
    "seedflip": {
      "command": "npx",
      "args": ["seedflip-mcp"]
    }
  }
}

Using it: example queries

Once the MCP server is connected, try these:

// Find a seed by brand reference
"Find a design seed that looks like Linear"

// Get tokens in a specific format
"Get the Amethyst seed as CSS variables"

// Browse by style
"List seeds with a brutalist or industrial vibe"

// Apply to a build task
"Build a dashboard sidebar using the Command seed"

The agent calls get_design_seed behind the scenes, gets back 40 structured tokens (colors, fonts, spacing, shadows, radius, gradients), and uses them in the code it writes. No more “make it look professional” prompts that produce generic output.

Wavelength

Deep space developer energy

Inter+Inter

darkvibrantdeveloper

View seed →

What comes back

Each seed returns a complete design vocabulary. Here's what the output looks like when you request CSS variables format:

:root {
  --color-bg: #0D1117;
  --color-surface: #161B22;
  --color-border: #30363D;
  --color-text: #C9D1D9;
  --color-heading: #F0F6FC;
  --color-accent: #58A6FF;
  --font-heading: 'Mona Sans', sans-serif;
  --font-body: 'Mona Sans', sans-serif;
  --radius: 6px;
  --shadow-sm: 0 1px 0 rgba(27, 31, 36, 0.04);
}

That's not a suggestion. That's a complete set of decisions your agent can use immediately. Every component it generates draws from these values instead of inventing its own.

Why MCP instead of a rule file?

You can absolutely put design tokens in a .cursorrules or CLAUDE.md file. We have guides for that too. But rule files are static. You pick one design system and bake it in.

MCP is dynamic. Your agent can query different seeds for different projects, switch design directions mid-conversation, or compare multiple seeds before choosing one. The rule file approach works great for locked-in projects. MCP works when you're still deciding, exploring, or working across multiple brands.

What's next

If MCP is new to you, read MCP Servers Explained: How AI Agents Use Tools for the bigger picture. If you want to understand the philosophy behind giving agents design input, check out Agentic Design: Letting AI Agents Handle Your UI. Or skip straight to the practical side and read Design Tokens for AI to see what makes a token set agent-friendly.

Your agent already knows how to build. Now give it taste.