GitHub - senlindesign/claude2figma: An enforcement layer for Claude Code + Figma — 4 skills that keep AI on your Design System rails. Components stay linked, tokens stay bound, nothing goes off-spec. · GitHub

The project enforces Claude Code + Figma design-system compliance using 4 skills so AI-generated designs stay on-spec.
It aims to prevent hardcoded colors, arbitrary spacing, and one-off components by binding visual values to Figma Variables and Styles.
A 3-step preflight runs before design work to verify MCP connection, permissions, libraries, styles, variables, and components in parallel.
The workflow follows a loop of searching the design system, creating component instances, binding tokens, and verifying the result.
The `reference-interpreter` skill turns a screenshot, URL, or description into a structured Design Brief before building.
The `component-rules` skill enforces library-first component use, Auto Layout, and semantic naming.
The `figma-style-binding` skill binds colors, fonts, and spacing to tokens and performs post-write QA verification.
It is intended for teams working in a Figma file with an existing design system or linked library, not for creating a design system from scratch.
Installation requires Claude Code, the Figma MCP Server, and a Figma file with a design system; setup involves copying skills, settings, and a CLAUDE.md template.
CLAUDE.md must include the Figma file URL and project rules, and the session starts by saying "let's start" in Claude Code.

Your notes

Save this item to your library to add private notes.