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.

Install to Claude Code

npx -y skills add davila7/claude-code-templates --skill figma-implement-design --agent claude-code