figma-design-skills
Two composable, tool-agnostic skills for design-to-code fidelity — get the real design out of Figma, then prove the running app actually matches it. Packaged as a Claude Code plugin, and usable in OpenAI Codex, Cursor, GitHub Copilot, and any agent that reads AGENTS.md — see Use with other agents.
Most "is it pixel-perfect?" checks fail the same two ways: the design is read off a screenshot (so a 4px gap or a 600→400 weight slips through), and "looks done" is treated as a check (no measured feedback loop). These skills fix both — one extracts exact values, the other verifies them by measurement.
┌─────────────────────────┐ ┌──────────────────────────┐
│ figma-design-extract │ spec │ design-fidelity-verify │
│ read Figma → spec table │ ──────► │ measure app → PASS/FAIL │
└─────────────────────────┘ table └──────────────────────────┘
exact tokens, not pixels computed values, not glances
The two skills
| Skill | One-liner |
|---|
| figma-design-extract | Pull exact tokens, sizes, and structure out of a Figma node via the Figma MCP into a build-ready design-spec table — element | property | Figma exact value | repo token | source component. Maps each Figma variable to your design tokens; logs drift instead of hardcoding. |
| design-fidelity-verify | Run a bounded vision + numeric loop (~3 iterations) that reads the actually rendered values off the live app and walks every spec row to PASS/FAIL + delta. Works for web (getComputedStyle) and mobile (native view props via Argent or similar). |
They compose: figma-design-extract produces the spec table; design-fidelity-verify consumes it. Use either alone, or together for a full design→code→verified pipeline.
The workflow
- Extract. Share a Figma node URL. The extract skill reads structured values (
get_variable_defs, get_metadata, get_design_context, get_screenshot) and produces a spec table mapped to your tokens. The screenshot is a visual reference only — never measured.
- Build. Implement the component from the table, reusing existing primitives. Every value is a token reference, not a literal.
- Verify. The verify skill runs the app, captures full-resolution, reads computed/native values, and compares each spec row to the live render — fixing the highest-severity drift first, bounded to ~3 iterations, and reporting any residuals honestly.
Install
/plugin marketplace add jeltehomminga/figma-design-skills
/plugin install figma-design-skills@figma-design-skills
Both skills load on demand from their trigger phrases (e.g. a figma.com URL, or "verify the design"). You can also clone this repo and drop either skills/<name>/ folder into your ~/.claude/skills/ (personal) or .claude/skills/ (project).
Any agent, one command — the skills.sh CLI installs these into the right place for Claude Code, Cursor, Codex, Copilot, Windsurf, Gemini, or Cline:
npx skills add jeltehomminga/figma-design-skills
Use with other agents
Cursor · OpenAI Codex · GitHub Copilot · Gemini CLI · Aider · Zed · and any agent that reads AGENTS.md.
The SKILL.md bodies are plain, tool-neutral markdown — the only Claude-specific part is auto-triggering via the description. To use a skill elsewhere, wire its body into your tool's instruction format. Every tool below speaks MCP, so the Figma / Playwright / Argent references work once you've configured those servers in that tool.
Easiest — npx skills add (skills.sh)
The skills.sh CLI installs these into the right format for whichever agent you use — Claude Code, Cursor, Codex, Copilot, Windsurf, Gemini, Cline:
npx skills add jeltehomminga/figma-design-skills
It discovers both skills from this repo's skills/ layout and .claude-plugin/ manifest automatically. The steps below are the manual fallback if you'd rather wire them in by hand.
Any tool — AGENTS.md (broadest reach)
This repo ships a root AGENTS.md that summarizes both skills and points to the full bodies. Tools that read AGENTS.md — Codex, Cursor, Copilot's coding agent, Gemini CLI, Aider, Jules, Zed, Windsurf, and 20+ others — pick it up automatically. Copy it (or the relevant parts) into your own project's AGENTS.md. (VS Code Copilot: enable the chat.useAgentsMdFile setting.)
OpenAI Codex — native skills
Codex reads the same SKILL.md format from .agents/skills/. From your project:
mkdir -p .agents/skills
cp -r path/to/figma-design-skills/skills/* .agents/skills/
Invoke with /skills or $figma-design-extract, or let Codex match on the description.
Cursor — project rule
