Claude Code Design Skills MCP — Use Cases, Install & Live Demo

Why use it

Key features

Figma-to-Next.js skill with component-reuse priority
Figma variant → prop mapping
Strict TypeScript types out of the box
Built-in accessibility defaults
Mock data patterns for frontend/backend boundary hygiene

Live Demo

What it looks like in practice

claude-code-design-skills.replay ▶ ready

0/0

Install

Pick your client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Open Claude Desktop → Settings → Developer → Edit Config. Restart after saving.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Cursor uses the same mcpServers schema as Claude Desktop. Project config wins over global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Click the MCP Servers icon in the Cline sidebar, then "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-code-design-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ],
      "_inferred": false
    }
  }
}

Same shape as Claude Desktop. Restart Windsurf to pick up changes.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-code-design-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/scoobynko/claude-code-design-skills",
        "~/.claude-code/skills/claude-code-design-skills"
      ]
    }
  ]
}

Continue uses an array of server objects rather than a map.

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-code-design-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/scoobynko/claude-code-design-skills",
          "~/.claude-code/skills/claude-code-design-skills"
        ]
      }
    }
  }
}

Add to context_servers. Zed hot-reloads on save.

claude mcp add claude-code-design-skills -- git clone https://github.com/scoobynko/claude-code-design-skills ~/.claude-code/skills/claude-code-design-skills

One-liner. Verify with claude mcp list. Remove with claude mcp remove.

Use Cases

Real-world ways to use Claude Code Design Skills

Scaffold a new page from a Figma frame

👤 Frontend engineers converting designs to code ⏱ ~45 min intermediate

When to use: You have a ready Figma frame and want React/Next.js code that fits your codebase.

Prerequisites

Figma MCP set up — Install Figma MCP and provide a PAT
Skill installed — git clone into ~/.claude-code/skills/

Flow

Point at the frame

Convert this Figma frame to a Next.js page: <figma URL>. Reuse components from src/components/.✓ Copied

→ Agent inventories existing components before writing new ones
Prop-map variants

Map the Figma variants to typed props (size, intent, disabled).✓ Copied

→ TS types generated; no anys
Mock data

Use mock data; don't invent API calls. Keep backend out.✓ Copied

→ Clean fetch-less component with a mocks file

Outcome: A real Next.js page merged in one PR — no reviewer rewrite.

Pitfalls

Generating a parallel component library next to the existing one — Start with 'list existing components' so the agent reuses what's there

Combine with: figma · magic-ui-mcp

Sync a component's props to Figma variants

👤 Teams maintaining a design system ⏱ ~25 min intermediate

When to use: Designer added a new variant in Figma and the code needs to catch up.

Flow

Diff Figma against the component

Compare Button (Figma) variants with src/components/Button.tsx props.✓ Copied

→ Clear list of delta: new variant, renamed variant, etc.
Apply the diff

Update Button.tsx to include the new 'ghost' variant; preserve the API.✓ Copied

→ Typed update with a default that doesn't break callers

Outcome: Design-system drift closed without breaking consumers.

Combinations

Pair with other MCPs for X10 leverage

claude-code-design-skills + figma

Pull Figma frames via MCP; convert via this skill

Fetch Figma frame X; use the skill to convert with existing-component reuse.✓ Copied

claude-code-design-skills + magic-ui-mcp

Map Figma patterns onto Magic UI components where they exist

Where Figma uses a blur-in hero, use Magic UI's blur-fade instead of writing one.✓ Copied

claude-code-design-skills + claude-design-auditor-skill

Verify generated code passes the 18-rule audit

After converting, run the design auditor and fix any HIGH findings.✓ Copied

Tools

What this MCP exposes

Tool	Inputs	When to call	Cost
figma-to-code (SKILL)	Figma frame URL + repo conventions	Turning a design into code that fits your codebase	0

Cost & Limits

What this costs to run

API quota: None for the skill; Figma MCP has its own quota
Tokens per call: Figma frame + existing code + output — can be large; scope the frame precisely
Monetary: Free
Tip: Convert one frame at a time; giant selections waste both context and review energy.

Security

Permissions, secrets, blast radius

Credential storage: Figma PAT belongs to the Figma MCP, not this skill

Data egress: None from the skill; network calls happen in Figma MCP

Generated code still needs review. 'Passes types' doesn't mean 'works correctly at runtime'.
Don't blindly accept imports from components that aren't in your allowlist; the skill prefers reuse but you still own review.

Troubleshooting

Common errors and fixes

Agent writes a new Button instead of reusing the existing one

Explicitly list the repo's component directory in the prompt.

Verify: Include 'check src/components/ first' in the request

Missing props for a newer Figma variant

Ask for a variant diff before converting; update the component instead of forking.

Verify: Agent output includes a 'variants' section

Types too loose (any everywhere)

Require 'no any; fail loudly if a variant can't be typed'.

Verify: Search the diff for ': any'

Alternatives

Claude Code Design Skills vs others

Alternative	When to use it instead	Tradeoff
magic-ui-mcp	You want pre-built animated components, not a Figma converter	Library-first, not design-first
claude-design-auditor-skill	You want to evaluate design quality, not generate code	Audit, not produce
hue-brand-skill	You need a design language, not frame conversion	System-first, not frame-first

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills