figma-to-code
scoobynko/claude-code-design-skillsSkill
Generate production-ready React/Next.js code from Figma designs. Instructs proper Figma MCP tool usage, component reuse strategies, and variant mapping. **CRITICAL: ALWAYS use this skill when user provides a Figma link or mentions implementing/redesigning from Figma design.** Never attempt manual implementation without invoking this skill first.
Why this score
Popularity score: 64/100 from public GitHub signals only. It shows how widely used and maintained this is, not how well it works. Not included yet: the fake-star check. The security scan is shown separately and doesn't change the score. How we rank
Security
Scanned Oct 20, 2026 at commit ccb4c17d672f, with Cisco's open-source skill-scanner.
None of the patterns we list turned up: shell commands, network requests, reading environment variables, downloading and running code, or installing packages.
A scan lists patterns in the code. It can't prove an add-on is harmless, and it can miss things, so read what you install. How we scan
Prompts that use Next.js
Alternatives
Other makers' add-ons that do the same job, next to this one.
| Name | Score | Stars | Context | Updated |
|---|---|---|---|---|
| This onefigma-to-code scoobynko/claude-code-design-skills · Skill | 64 | ★ 40 | ≈90 always | 29d ago |
| understand-figma Egonex-AI/Understand-Anything · Skill Same job: ui design, also for Figma | 86 | ★ 87k | ≈54 always | 23d ago |
| figma-implement-motion figma/mcp-server-guide · Skill Same job: ui design, also for Figma | 62 | ★ 2.1k | ≈99 always | 16d ago |
| figma-component-properties southleft/figma-console-mcp-skills · Skill Same job: ui design, also for Figma | 52 | ★ 92 | ≈157 always | 3mo ago |
| vibefigma vibeflowing-inc/vibe_figma · Skill Same job: ui design, also for Figma | 78 | ★ 847 | ≈80 always | 26d ago |
| figma-code-connect-components openai/skills · Skill Same job: ui design, also for Figma | 69 | ★ 28k | ≈99 always | 2mo ago |