skills.rest
reason-machines
reason-machinesOFFICIAL
Explore all skills by this author →
Website𝕏@reasonmachinesGitHub

claude2figma-design-system-harness

Enforces design system token and component compliance in AI-generated Figma designs.

4|Updated May 16, 2026
Search Tags:#design system#claude code#figma#mcp#component library#design tokens#token binding
One-click install
npx skills add https://github.com/reason-machines/design-skills --skill claude2figma-design-system-harness-reason-machines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claude2figma-design-system-harness
Source: https://github.com/reason-machines/design-skills/tree/main/skills/claude2figma-design-system-harness
Command: npx skills add https://github.com/reason-machines/design-skills --skill claude2figma-design-system-harness-reason-machines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @anthropic-ai/figma-mcp.

What problem does it solve? When AI writes directly to Figma, it hardcodes hex colors, raw spacing values, and rebuilds components from primitives instead of using your design system. This Skill prevents that drift by binding every visual property to tokens and forcing component-instance usage. ## Core Features & Use Cases - Preflight Check: Loads a Token Map and Component Registry from your Figma file in a 3-step parallel check before any design work begins. - Component-First Rules: Searches the component registry and creates instances with validated variant properties instead of building from scratch. - Token Binding with QA: Binds fills, text styles, and spacing to variables, then runs post-write verification that rejects hardcoded values. - Reference Interpreter: Converts screenshots or reference images into a structured Design Brief for confirmation before building. - Use Case: Ask Claude to build a login page in Figma; it runs preflight, finds Input/Email and Button/Primary components in your library, creates instances, binds all colors to tokens, and verifies compliance with a screenshot. ## Quick Start Install the Figma MCP server, copy the four skills and CLAUDE.md template into your project, then tell Claude to run preflight and start designing in your Figma file.

Frequently Asked Questions about claude2figma-design-system-harness

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep AI-generated Figma designs on my design system?▼

Run the figma-preflight skill at session start to load your Token Map and Component Registry, then let component-rules and figma-style-binding enforce instance creation and token binding on every write. A post-write QA hook rejects any hardcoded colors or unbound text styles.

How to connect Claude Code to Figma for design work?▼

Install the Figma MCP server with npm install -g @anthropic-ai/figma-mcp, then configure it in your project's .claude/settings.json under mcpServers. Add your Figma file URL to CLAUDE.md so the preflight skill can extract the file key and verify access.

Does this work with Figma library variables from linked files?▼

Local variable APIs only return file-local variables, but component instances inherit library bindings automatically. For new frames, import a library variable by key using figma.variables.importVariableByKeyAsync and bind it to the node's fills.

Why does token binding verification fail after writing to Figma?▼

Verification fails when a property was set with a raw value instead of a bound variable, such as a hardcoded hex fill or missing textStyleId. Fix it by looking up the token in the Token Map and assigning it through boundVariables.

When should I not use a design system harness for Figma?▼

Avoid it when creating a design system from scratch, doing pixel-perfect illustration, or working in FigJam whiteboards. It is designed for building pages from an existing design system file or linked library where token compliance matters.

Related Skills

Explore More Design & Creative Skills→
mayzhangminmayzhangmin

figma-generate-design

Translate screenshots into pixel-accurate Figma screens using a published design library.

Community
Advanced
takapomtakapom

figma

Extract Figma design data and generate React Native components and design tokens.

Community
Advanced
vercel-labsvercel-labs
210

before-and-after

Capture before-and-after screenshots from two URLs or image paths.

Official
Advanced
Dragoon0xDragoon0x
4

sync

Export code-defined design tokens to a Tokens Studio-compatible figma.tokens.json file.

Community
Intermediate