Claude Code Design Workflow: From Seed to Shipped UI

The problem with prompting for design

You've probably tried prompting Claude Code with "make it look more professional" or "use a dark theme with purple accents." It works. Technically. But the result is shallow. Claude picks reasonable defaults, and those defaults are the same ones every other developer gets. Your app ends up looking like a template because the design decisions are generic.

The issue is not Claude's capability. It can implement any design system perfectly. The issue is that natural language is a terrible way to communicate design intent. "Purple accents" could mean violet-500, indigo-600, purple-400, or a dozen other hues. "Modern spacing" means nothing concrete. You need to give Claude structured design data, not vibes.

The MCP approach

MCP (Model Context Protocol) is a standard that lets AI agents connect to external tools and data sources. Instead of pasting design tokens into your prompt every time, you give Claude access to an MCP server that serves design systems on demand. Claude can query it, receive structured tokens, and apply them without you typing a single color value.

Think of it as the difference between telling someone a recipe verbally and handing them a cookbook they can reference whenever they need it.

Step 1: Install the SeedFlip MCP

Add the SeedFlip MCP server to your Claude Code configuration. This gives Claude access to 104 curated design seeds, each one a complete system of fonts, colors, spacing, shadows, and border-radius values.

// Add to your .claude.json or Claude Code settings
{
  "mcpServers": {
    "seedflip": {
      "command": "npx",
      "args": ["-y", "seedflip-mcp@latest"]
    }
  }
}

Once configured, Claude Code has two new tools available: get_design_seed to query seeds by brand reference or aesthetic vibe, and list_design_seeds to browse the full catalog. No API keys needed. It runs locally.

Step 2: Query a design seed

Now the fun part. Instead of describing your design in words, you describe the feeling and let the MCP server return the specific tokens.

# In your Claude Code session, just ask:

"Query SeedFlip for a dark, editorial design seed
 with serif headings. Something like Linear or Stripe."

# Claude calls get_design_seed and receives:
{
  "name": "Velocity",
  "fonts": {
    "heading": "Instrument Serif",
    "body": "Geist",
    "mono": "Geist Mono"
  },
  "colors": {
    "background": "#09090B",
    "surface": "#18181B",
    "text": "#FAFAFA",
    "textSecondary": "#A1A1AA",
    "accent": "#6366F1",
    "border": "#27272A"
  },
  "radius": "8px",
  "spacing": { "base": 16, "scale": 1.5 },
  "shadow": "0 1px 2px rgba(0,0,0,0.4)"
}

That's not a prompt suggestion. That's structured data Claude can act on immediately. Every color is a specific hex. Every font is a real typeface. The radius, spacing, and shadow are concrete values. No ambiguity, no interpretation needed.

Step 3: Apply across the codebase

Once Claude has the seed, you tell it where to apply the tokens. The workflow branches depending on your project setup.

For new projects

"Use the Velocity seed to set up globals.css with
 CSS variables, configure the Tailwind theme, and
 create a tokens.ts file. Then build me a dashboard
 layout with a sidebar, header, and main content area."

Claude will create the foundation files first, then build components that reference those tokens. Every component uses the same color variables, the same font stack, the same spacing scale. It's consistent from the first file because the design data is centralized.

For existing projects

"Apply the Velocity seed to my existing project.
 Update globals.css with the color variables, update
 the Tailwind config, and refactor my components to
 use the new token references instead of hardcoded values."

Claude reads your existing files, identifies hardcoded colors and arbitrary values, and replaces them with token references. A project-wide design migration in one conversation.

The CLAUDE.md layer

For ongoing projects, add your design tokens to CLAUDE.md. This file persists across sessions, so Claude remembers your design system every time you open the project. You query the seed once, paste the tokens into CLAUDE.md, and never think about it again.

# CLAUDE.md - Design System

## Design Tokens (SeedFlip: Velocity)

### Colors
- Background: #09090B
- Surface: #18181B
- Text primary: #FAFAFA
- Text secondary: #A1A1AA
- Accent: #6366F1
- Border: #27272A

### Typography
- Headings: Instrument Serif (italic)
- Body: Geist
- Mono: Geist Mono

### Shape
- Radius: 8px
- Shadow: 0 1px 2px rgba(0,0,0,0.4)

Always use these tokens. Never hardcode colors.

Every future session, Claude reads CLAUDE.md before writing a single line. Your design system is now a permanent part of the project context.

Choosing output formats

SeedFlip seeds export in multiple formats. When you query via the MCP server, you can request the format that matches your stack:

# Different format options for get_design_seed

format: "tokens"    # Raw design tokens (JSON)
format: "tailwind"  # Tailwind theme config
format: "css"       # CSS custom properties
format: "shadcn"    # shadcn/ui theme variables

If you're using shadcn/ui, request the shadcn format and Claude will apply it directly to your globals.css with the correct HSL variable structure. For Tailwind projects without shadcn, the tailwind format drops right into your config. The css format works with any framework or vanilla HTML.

Why this workflow beats prompting

Three reasons this structured approach outperforms freeform prompting:

Consistency. Every component Claude generates references the same token source. There's no drift between the sidebar and the settings page because the design data is singular.

Speed. You skip the entire "make it more blue, no less blue, actually more like Stripe" iteration loop. The seed gives Claude exact values from the start. First generation, on target.

Taste. The seeds are curated, not generated. Each one is a design director's worth of aesthetic decisions compressed into a token set. You're not getting random colors from an algorithm. You're getting intentional palettes from a design catalog.

The workflow is: install MCP, query a seed, let Claude build. Three steps. One session. A fully themed application that doesn't look like it was generated by a machine. For more on the MCP integration, read AI Agent Design System via MCP. For setting up CLAUDE.md with design context, see CLAUDE.md Design System.