{
  "markdown": "# Claude Code to Figma\n\n[![Made for Claude Code](https://img.shields.io/badge/Made%20for-Claude%20Code-blueviolet?style=flat-square&logo=anthropic)](https://docs.anthropic.com/en/docs/claude-code)\n[![Figma MCP](https://img.shields.io/badge/Figma-MCP%20Server-ff7262?style=flat-square&logo=figma)](https://www.npmjs.com/package/@anthropic-ai/figma-mcp)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)\n\nDesign System compliance for AI-generated Figma designs. 4 skills, 3-step preflight, zero raw values.\n\n> **Quick start:** Clone, copy skills to `.claude/skills/`, paste your Figma URL into `CLAUDE.md`, say \"let's start\". [Full install guide below.](#installation)\n\n[Chinese / 中文版](README.zh-CN.md)\n\n---\n\n## Why?\n\nAI 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.\n\ncc2figma fixes this with 4 Claude Code Skills that enforce Design System compliance at every step:\n\n- Components are Instances of your Master Components, not rebuilt from scratch\n- Colors, fonts, spacing, and radii bind to Variables and Styles, not raw values\n- Every write to Figma is automatically verified for token compliance\n\n---\n\n## Before & After\n\n![With Skills vs Without Skills](assets/before-after.png)\n\n> **With Skills:** Master Component Instances, all visual values bound to Design System Variables and Styles.\n> **Without Skills:** Hardcoded colors, arbitrary spacing, components built from scratch — looks right, but zero Design System connection.\n\n---\n\n## Preflight System\n\nBefore every design session, a 3-step parallel check ensures everything is connected:\n\n![Preflight Status](assets/preflight-status.png)\n\nMCP connection, file permissions, libraries, styles, variables, and components — all verified in parallel before a single node is created.\n\n---\n\n## Usage Examples\n\nSay \"let's start\" to run preflight, then describe what you want:\n\n    You: Build a login page with email and password fields\n    Claude: [searches DS for Form, Input, Button components]\n            [creates Instances, binds all tokens]\n            [takes screenshot for verification]\n\n    You: Add a registration form next to it with a confirm password field\n    Claude: [reuses same DS components, adds new section]\n            [QA verifies all bindings automatically]\n\n    You: Here's a screenshot of the dashboard we need\n    Claude: [analyzes reference, outputs structured Design Brief]\n            [builds section by section, verifying after each step]\n\nEvery interaction follows the same loop: **search DS** → **create Instances** → **bind tokens** → **verify**.\n\n---\n\n## What's Included\n\n### 4 Skills\n\n| Skill | Trigger | What it does |\n| ----- | ------- | ------------ |\n| `figma-preflight` | \"let's start\", first Figma URL | 3-step parallel check + Token Map + Component Registry |\n| `component-rules` | Any UI construction task | Library-first lookup, Auto Layout, semantic naming |\n| `figma-style-binding` | Any color, font, or spacing operation | Enforce Variable / Style binding + post-write QA verification |\n| `reference-interpreter` | Share screenshot, URL, or description | Output structured Design Brief before building |\n\n### How They Work Together\n\n    \"let's start\"\n        |\n        v\n    ① preflight ─── one-time setup, load Token Map + Component Registry\n        |\n        v\n    ② reference-interpreter ─── optional: screenshot / reference → Design Brief → user confirms\n        |\n        v\n    ┌→ ③ component-rules ─── search Library, use Instances\n    │       |\n    │  ④ figma-style-binding ─── bind every value to a token, then auto-verify\n    │       |\n    └── next section (loop until done)\n\n---\n\n## Good For / Not For\n\n| Good For | Not For |\n| -------- | ------- |\n| Building pages from an existing Design System | Creating a Design System from scratch |\n| Describing UI in natural language, Claude builds it in Figma | Pixel-perfect illustration or icon drawing |\n| Working in a DS file or a file with a linked DS library | Free-form design without a Design System |\n| Ensuring 100% token compliance in design output | FigJam / whiteboard workflows |\n\n---\n\n## Installation\n\n### Prerequisites\n\n- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) (CLI / Desktop / VS Code)\n- [Figma MCP Server](https://www.npmjs.com/package/@anthropic-ai/figma-mcp) installed and authenticated\n- A Figma file with a Design System (locally defined or linked via Library)\n\n### Install\n\n```bash\n# 1. Clone the repo\ngit clone https://github.com/senlindesign/cc2figma.git\n\n# 2. Copy skills to your project\ncp -r cc2figma/.claude/skills/* your-project/.claude/skills/\n\n# 3. Copy config\ncp cc2figma/.claude/settings.json your-project/.claude/settings.json\n\n# 4. Copy CLAUDE.md template\ncp cc2figma/CLAUDE.md.template your-project/CLAUDE.md\n```\n\n### Configure CLAUDE.md\n\nOpen `CLAUDE.md` and paste your Figma file URL:\n\n```markdown\n# Figma Design Project\n\n- **Figma file:** <https://www.figma.com/design/YOUR_FILE_KEY/...>\n- **Fonts:** [leave blank — Preflight auto-detects from your DS]\n- **Session goal:** [what are we designing today?]\n\n## Rules\n\n1. Every visual value must bind to a Style or Variable.\n2. Always search connected libraries before building any component from scratch.\n3. Never start designing before the Design Brief is confirmed.\n```\n\nThen say \"let's start\" in Claude Code. Preflight handles the rest.\n\n---\n\n## Supported Scenarios\n\n| Scenario | How It Works |\n| -------- | ------------ |\n| **Working in a DS file directly** | Preflight reads all local Styles, Variables, and Components. Full token binding. |\n| **New file with a linked DS library** | Component Instances inherit all token bindings from masters automatically. Library variables can be imported for new frames. |\n\n---\n\n## Directory Structure\n\n```\nyour-project/\n├── CLAUDE.md                          # Project config (Figma URL, fonts, rules)\n└── .claude/\n    ├── settings.json                  # Permissions + QA Hook\n    └── skills/\n        ├── figma-preflight/           # 3-step parallel check + Token Map + Component Registry\n        ├── component-rules/           # Library-first, Auto Layout, naming\n        ├── figma-style-binding/       # Color / Text / Spacing binding + QA verification\n        └── reference-interpreter/     # Reference → Design Brief\n```\n\n---\n\n## Known Limitations\n\n| Limitation | Workaround |\n| ---------- | ---------- |\n| Doubly-nested Instances can't be directly modified | `detachInstance()` on the outer instance first |\n| `getLocalVariablesAsync()` can't see library variables | Instances inherit tokens automatically; use `importVariableByKeyAsync` for new frames |\n| Invalid variant values in `setProperties` roll back the entire script | Read `componentPropertyDefinitions` to confirm valid values first |\n\n---\n\n## Contributing\n\nIssues and PRs are welcome. If you have a Figma design workflow that could benefit from a new Skill, describe it in an Issue.\n\n---\n\nMIT © 2025 Sen Lin\n",
  "bytes": 7203,
  "sha": "2af4dac0ba6540f1991dec19ddec90cbc762df792a8429faa5e28c2f158c6a65",
  "repo_slug": "senlindesign/claude2figma",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_senlindesign_claude2figma_claude2figma_735684c1/readme"
}