figma-design-skills

Featured

Two composable Claude Code skills for design-to-code fidelity: extract exact specs from Figma, then verify the running web or mobile app matches them.

plugin 3 stars 0 forks Updated 1 weeks ago MIT

Install

Plugins install via a marketplace, in two steps.

This plugin isn't listed in a marketplace we've indexed. Install it directly from its GitHub repository — the README has the setup steps.

View on GitHub

Bundles

Everything this plugin ships — skills, agents, commands, hooks, and MCP servers it bundles.

Skills (2)

Web & Frontend Listed

design-fidelity-verify

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", "design QA", or after building with figma-design-extract. Runs a bounded vision+numeric loop (about 3 iterations) for web and mobile - web reads getComputedStyle and getBoundingClientRect via a browser/Playwright MCP; mobile reads native view props (color, bounds, cornerRadius, font) via Argent or similar at scale 1.0. Walks every spec row to PASS/FAIL plus delta, records a repeatable navigation flow, and reports residuals honestly. Tool-agnostic. Consumes the figma-design-extract spec table.

3 Updated 1 weeks ago

jeltehomminga

Web & Frontend Listed

figma-design-extract

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". Reads structured data via the Figma MCP - get_design_context (structure), get_variable_defs (tokens, the source of truth), get_metadata (sizes), get_screenshot (visual reference only, never measured). Maps each Figma variable to your repo's own design tokens, reuses existing components, and logs token drift instead of hardcoding. Produces the spec table that design-fidelity-verify consumes. Stack-agnostic; Tailwind/NativeWind/Restyle/CSS-vars are examples to adapt.

3 Updated 1 weeks ago

jeltehomminga

Quality Score: 73/100

Stars 20%

Recency 20%

Manifest 20%

100

Documentation 15%

Issue Health 10%

License 10%

100

Description 5%

100

Details

Author: jeltehomminga
Repository: jeltehomminga/figma-design-skills
Created: 1 weeks ago
Last Updated: 1 weeks ago
Language: N/A
License: MIT