Summary
This is the workflow you want when someone hands you a Figma URL and expects pixel-perfect implementation. It walks through the full cycle: parse the node ID from the URL, fetch design context and screenshots via Figma MCP, download assets, then translate everything into your project's conventions while maintaining 1:1 visual fidelity. The key insight here is treating Figma's React/Tailwind output as a design reference, not final code. You map to your existing design tokens, reuse components from your system, and validate against the screenshot before calling it done. Works with both the remote Figma MCP server and the desktop variant that reads your current selection. Best for teams that need design/dev handoff discipline, not one-off prototypes.
Install to Claude Code
npx -y skills add tech-leads-club/agent-skills --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 →
