claude2figma

Claude Code to Figma

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 / 中文版

---

Why?

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

---

Before & After

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.

---

Preflight System

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.

---

Usage Examples

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.

---

What's Included

4 Skills

Skill	Trigger	What it does
figma-preflight	"let's start", first Figma URL	3-step parallel check + Token Map + Component Registry
component-rules	Any UI construction task	Library-first lookup, Auto Layout, semantic naming
figma-style-binding	Any color, font, or spacing operation	Enforce Variable / Style binding + post-write QA verification
reference-interpreter	Share screenshot, URL, or description	Output structured Design Brief before building

How They Work Together

"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)

---

Good For / Not For

Good For	Not For
Building pages from an existing Design System	Creating a Design System from scratch
Describing UI in natural language, Claude builds it in Figma	Pixel-perfect illustration or icon drawing
Working in a DS file or a file with a linked DS library	Free-form design without a Design System
Ensuring 100% token compliance in design output	FigJam / whiteboard workflows

---

Installation

Prerequisites

• 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)

Install

# 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