Design System compliance for AI-generated Figma designs. 4 skills, 3-step preflight, zero raw values.

Quick start: Clone, copy skills to .claude/skills/, paste your Figma URL into CLAUDE.md, say "let's start". Full install guide below.

Chinese / 中文版

AI can write to Figma now. But without guidance, it builds everything from scratch — hardcoded hex colors, arbitrary font sizes, raw spacing values. The result looks right but is completely disconnected from your Design System. Every color is a magic number. Every component is a one-off. Your design tokens might as well not exist.

cc2figma fixes this with 4 Claude Code Skills that enforce Design System compliance at every step:

• Components are Instances of your Master Components, not rebuilt from scratch
• Colors, fonts, spacing, and radii bind to Variables and Styles, not raw values
• Every write to Figma is automatically verified for token compliance

With Skills: Master Component Instances, all visual values bound to Design System Variables and Styles. Without Skills: Hardcoded colors, arbitrary spacing, components built from scratch — looks right, but zero Design System connection.

Before every design session, a 3-step parallel check ensures everything is connected:

MCP connection, file permissions, libraries, styles, variables, and components — all verified in parallel before a single node is created.

Say "let's start" to run preflight, then describe what you want:

You: Build a login page with email and password fields
Claude: [searches DS for Form, Input, Button components]
        [creates Instances, binds all tokens]
        [takes screenshot for verification]

You: Add a registration form next to it with a confirm password field
Claude: [reuses same DS components, adds new section]
        [QA verifies all bindings automatically]

You: Here's a screenshot of the dashboard we need
Claude: [analyzes reference, outputs structured Design Brief]
        [builds section by section, verifying after each step]

Every interaction follows the same loop: search DS → create Instances → bind tokens → verify.

"let's start"
    |
    v
① preflight ─── one-time setup, load Token Map + Component Registry
    |
    v
② reference-interpreter ─── optional: screenshot / reference → Design Brief → user confirms
    |
    v
┌→ ③ component-rules ─── search Library, use Instances
│       |
│  ④ figma-style-binding ─── bind every value to a token, then auto-verify
│       |
└── next section (loop until done)

• Claude Code (CLI / Desktop / VS Code)
• Figma MCP Server installed and authenticated
• A Figma file with a Design System (locally defined or linked via Library)

# 1. Clone the repo
git clone https://github.com/senlindesign/cc2figma.git

# 2. Copy skills to your project
cp -r cc2figma/.claude/skills/* your-project/.claude/skills/

# 3. Copy config
cp cc2figma/.claude/settings.json your-project/.claude/settings.json

# 4. Copy CLAUDE.md template
cp cc2figma/CLAUDE.md.template your-project/CLAUDE.md

Open CLAUDE.md and paste your Figma file URL:

# Figma Design Project

- **Figma file:** <https://www.figma.com/design/YOUR_FILE_KEY/...>
- **Fonts:** [leave blank — Preflight auto-detects from your DS]
- **Session goal:** [what are we designing today?]

## Rules

1. Every visual value must bind to a Style or Variable.
2. Always search connected libraries before building any component from scratch.
3. Never start designing before the Design Brief is confirmed.

Then say "let's start" in Claude Code. Preflight handles the rest.

your-project/
├── CLAUDE.md                          # Project config (Figma URL, fonts, rules)
└── .claude/
    ├── settings.json                  # Permissions + QA Hook
    └── skills/
        ├── figma-preflight/           # 3-step parallel check + Token Map + Component Registry
        ├── component-rules/           # Library-first, Auto Layout, naming
        ├── figma-style-binding/       # Color / Text / Spacing binding + QA verification
        └── reference-interpreter/     # Reference → Design Brief

Issues and PRs are welcome. If you have a Figma design workflow that could benefit from a new Skill, describe it in an Issue.

MIT © 2025 Sen Lin