Summary
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.
Install to Claude Code
npx -y skills add davila7/claude-code-templates --skill figma-implement-design --agent claude-codeInstalls into .claude/skills of the current project.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Files
SKILL.md
Select a file.
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
