Figma Implement Design

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-code