Claude MarketplacesSubmit
figma avatar

Implement Design

figma/mcp-server-guideOfficial

This is the workflow you want when a designer drops a Figma URL in chat and expects working code back. It enforces a seven-step process: parse the URL, fetch design context via the Figma MCP server, grab screenshots, pull assets, map everything to your existing design tokens, write the code, then validate pixel-perfect parity. The smart bit is that it prioritizes reusing your design system over creating new components, which means less drift between Figma and production. It handles truncated responses by fetching child nodes incrementally when designs get complex. Requires the Figma MCP server to be running, and you need to feed it proper Figma URLs with file keys and node IDs, not just any link.

skills.sh installs
5.9K
GitHub stars
2.2K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add figma/mcp-server-guide --skill implement-design --agent claude-code

Installs into .claude/skills of the current project.

Files

This is the workflow you want when a designer drops a Figma URL in chat and expects working code back. It enforces a seven-step process: parse the URL, fetch design context via the Figma MCP server, grab screenshots, pull assets, map everything to your existing design tokens, write the code, then validate pixel-perfect parity. The smart bit is that it prioritizes reusing your design system over creating new components, which means less drift between Figma and production. It handles truncated responses by fetching child nodes incrementally when designs get complex. Requires the Figma MCP server to be running, and you need to feed it proper Figma URLs with file keys and node IDs, not just any link.

Browse the repository on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/figma/mcp-server-guide
Categories
Frontend Development, Backend & APIs, DevOps & CI/CD, Documentation, AI & Agent Building, Design & UI/UX

More from figma/mcp-server-guide

All 14

Recommended

More Frontend Development
1affaan-m avatarflutter-dart-code-reviewaffaan-m/eccLibrary-agnostic Flutter/Dart code review checklist covering widget best practices, state management patterns (BLoC, Riverpod, Provider, GetX, MobX, Signals), D5.8Kskills.sh installs
2coralogix avatarcx-telemetry-queryingcoralogix/cx-cliUse this skill for any question involving telemetry data: "investigate an issue", "debug a problem", "find out why something is slow", "check error rates", "ana5.8Kskills.sh installs
3github avatarsecurity-reviewgithub/awesome-copilotAI-powered codebase security scanner that reasons about code like a security researcher — tracing data flows, understanding component interactions, and catching5.8Kskills.sh installs
4affaan-m avatarvite-patternsaffaan-m/eccVite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activat5.8Kskills.sh installs
5samber avatarlinkedin-ghostwritingsamber/cc-skillsB2B LinkedIn ghostwriting — strategic interview, hook engineering, and post body. Use when the user wants to write LinkedIn content, create ghostwritten posts, 5.8Kskills.sh installs
6vinvcn avatargit-guardrails-claude-codevinvcn/mattpocock-skills-zh-cn设置 Claude Code hooks，在危险 git commands（push、reset --hard、clean、branch -D 等）执行前阻止它们。适用于用户想防止破坏性 git 操作、添加 git safety hooks，或在 Claude Code 中阻止 git push/reset 时。5.7Kskills.sh installs