/ Directory / Playground / Claude Code Design Skills
← All servers ↗ GitHub
● Community scoobynko ⚡ Instant

Claude Code Design Skills

by scoobynko · scoobynko/claude-code-design-skills

Figma-to-Next.js the right way — component reuse first, Figma variants map to props, strict TypeScript, a11y by default.

scoobynko/claude-code-design-skills is a Claude Code skill pack for design-to-code workflows. The flagship 'Figma to Code' skill converts Figma designs into production-ready React/Next.js code with explicit rules: prefer reusing existing components, map Figma variants to typed props, enforce frontend/backend boundaries, and wire a11y from the start. Pairs with the Figma MCP; focuses less on pixel-perfection than on producing code your team will actually merge.

▶ Watch demo 📦 Install 💡 Use Cases

Why use it

Key features

Live Demo

What it looks like in practice

claude-code-design-skills.replay ▶ ready
0/0

Install

Author repository · Claude Skills documentation

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.

Flow
  1. 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
  2. Prop-map variants
    Map the Figma variants to typed props (size, intent, disabled).✓ Copied
    → TS types generated; no anys
  3. 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
  1. 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.
  2. 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.

Convert a Figma flow with correct semantics and focus management

👤 Accessibility-minded frontend engineers ⏱ ~45 min intermediate

When to use: You need a dialog/menu/form that passes a screen-reader review.

Flow
  1. Ask for the flow in code
    Build the checkout dialog from Figma — respect focus trap, Escape, reduced motion.✓ Copied
    → Proper roles, labelling, focus management, Esc-to-close
  2. Run the auditor
    Run the claude-design-auditor skill on the result.✓ Copied
    → A11y score ≥ 85

Outcome: Accessible implementation without hand-holding each component.

Combine with: claude-design-auditor-skill

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

ToolInputsWhen to callCost
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

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

AlternativeWhen to use it insteadTradeoff
magic-ui-mcpYou want pre-built animated components, not a Figma converterLibrary-first, not design-first
claude-design-auditor-skillYou want to evaluate design quality, not generate codeAudit, not produce
hue-brand-skillYou need a design language, not frame conversionSystem-first, not frame-first

More

Resources

📖 Read the official README on GitHub

🐙 Browse open issues

🔍 Browse all 400+ MCP servers and Skills

Continue exploring

Related tools and workflows

Choose another guide for your workflow, or explore a collection.

Browse all topic collections → · See 29 new official additions →