Updated 5mo ago
by 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.
206 GitHub stars (206)
+2 in 16 days
| Period | New stars |
|---|---|
| Oct 1 | 0 |
| Oct 2 | 0 |
| Oct 3 | 0 |
| Oct 4 | 0 |
| Oct 5 | 0 |
| Oct 6 | 0 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | +1 |
| Oct 11 | 0 |
| Oct 12 | 0 |
| Oct 13 | 0 |
| Oct 14 | 0 |
| Oct 15 | +1 |
| Oct 16 | 0 |
- 4 skills (4 skills found in its SKILL.md files)
- 17 forks (17 forks)
- 5mo ago last update (Last updated 5mo ago)
Install
Skills CLI
npx skills add senlindesign/claude2figma
Asks which skills and agents to install. Just one: npx skills add senlindesign/claude2figma --skill component-rules — add -g for every project.
Claude Code
git clone https://github.com/senlindesign/claude2figmacp -r "claude2figma/.claude/skills/component-rules" ~/.claude/skills/
Copies the component-rules skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add senlindesign/claude2figma
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
In the author's own words, from each skill's SKILL.md.
-
component-rules
Triggers when building any UI element in Figma — 'create a card', 'build a nav', 'add a section', 'make a component'. Enforces library-first component lookup, correct Auto Layout structure, and semantic node naming. For visual property binding (colors, text styles, spacing values), defer to figma-style-binding.
.claude/skills/component-rules/SKILL.md on GitHub (opens in a new tab) -
figma-preflight
Triggers on 'let's start', 'begin', 'preflight', 'start the session', or when a Figma file URL is first shared. Verifies MCP connection, reads CLAUDE.md, audits connected libraries, and loads a Token Map of all Styles and Variables — required before any design work.
.claude/skills/figma-preflight/SKILL.md on GitHub (opens in a new tab) -
figma-style-binding
Triggers on any visual property change in Figma — creating text, setting colors, adjusting spacing/padding/gap/radius. Enforces that ALL values bind to Figma Styles or Variables, never hardcoded. Includes post-write QA verification.
.claude/skills/figma-style-binding/SKILL.md on GitHub (opens in a new tab) -
reference-interpreter
Triggers when user shares a screenshot, image, URL, or design description — or says 'analyze this', 'make a brief', 'interpret this reference'. Outputs a structured Design Brief mapping visual intent to design system tokens. Waits for 'confirmed' before designing.
.claude/skills/reference-interpreter/SKILL.md on GitHub (opens in a new tab)
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.
Similar skills
-
ECCby affaan-m The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Cod…
-
reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries.
-
andrej-karpathy-skillsby multica-ai A single CLAUDE.md file to improve Claude Code behavior, derived from Andrej Karpathy's observations on LLM coding pitfalls.
-
ponytailby DietrichGebert Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
-
ui-ux-pro-max-skillby nextlevelbuilder An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
-
graphifyby Graphify-Labs Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Curs…