Design system compliance for AI-generated Figma designs. Skills enforce library-first components, Auto Layout structure, and binding every color, spacing, and radius value to Figma Styles or Variables instead of hardcoded values, with a preflight session check.
Claude Code
> /plugin marketplace add senlindesign/claude2figma> /plugin install claude2figma@claude2figma
Codex
$ npx skills add senlindesign/claude2figma -a codex
Cursor
$ npx skills add senlindesign/claude2figma -a cursor
Gemini CLI
$ npx skills add senlindesign/claude2figma -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add senlindesign/claude2figma$ copilot plugin install claude2figma@claude2figma
OpenCode
$ npx skills add senlindesign/claude2figma -a opencode
Windsurf
$ npx skills add senlindesign/claude2figma -a windsurf
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 intoCLAUDE.md, say "let's start". Full install guide below.
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:
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.
| 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 |
"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 |
|---|---|
| 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 |
# 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.
| Scenario | How It Works |
|---|---|
| Working in a DS file directly | Preflight reads all local Styles, Variables, and Components. Full token binding. |
| New file with a linked DS library | Component Instances inherit all token bindings from masters automatically. Library variables can be imported for new frames. |
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
| Limitation | Workaround |
|---|---|
| Doubly-nested Instances can't be directly modified | detachInstance() on the outer instance first |
getLocalVariablesAsync() can't see library variables | Instances inherit tokens automatically; use importVariableByKeyAsync for new frames |
Invalid variant values in setProperties roll back the entire script | Read componentPropertyDefinitions to confirm valid values first |
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
Stars on GitHub
View @senlindesign’s profileReverse-engineers the design taste of a website from its URL. A real browser captures the page's structure and a screenshot, then analysis produces a write-up of its design tokens and the reasons behind its UI choices.
@senlindesignA design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.
@nextlevelbuilderDesign guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.
@pbakausTurns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.
@nexu-ioCreates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.
@cathrynlaveryDesign system compliance for AI-generated Figma designs. Skills enforce library-first components, Auto Layout structure, and binding every color, spacing, and radius value to Figma Styles or Variables instead of hardcoded values, with a preflight session check. Install it with the command on its page. It includes component-rules, figma-preflight, figma-style-binding. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it