Figma Implement Design
This is a structured workflow for turning Figma designs into production code with pixel-perfect accuracy. It walks you through the Figma MCP server connection, extracting node IDs from URLs, fetching design context and screenshots, downloading assets, and translating everything into your project's conventions. The workflow is opinionated about fidelity: it treats Figma as the source of truth and pushes you to validate against the screenshot before calling it done. The step-by-step format is rigid but thorough, covering the common pitfalls like truncated responses and making sure you map to existing design tokens instead of hardcoding values. If you're implementing designs that need to match specs exactly, this gives you a repeatable process.
- skills.sh installs
- 367
- GitHub stars
- 33.2K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add davila7/claude-code-templates --skill figma-implement-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2:fileKeyis the file key1-2is the node ID (the specific component or frame to implement)
- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required Workflow
Follow these steps in order. Do not skip steps.
Step 0: Set up Figma MCP (if not already configured)
If any MCP call fails because Figma MCP is not connected, pause and set it up:
Sponsors
Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthly
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any language
Agent 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 languageDetails
- Repository
- github.com/davila7/claude-code-templates
- Categories
- Backend & APIs, Code Review & Quality, AI & Agent Building, Automation & Workflows, Design & UI/UX
- First seen
- Jun 3, 2026
