Figma Implement Design

Takes a Figma design file and generates production code with pixel-perfect accuracy. You give it a Figma URL or mention implementing a component, and it handles the translation using design tokens and proper structure. The skill explicitly knows its boundaries: if you're editing nodes directly in Figma, it hands off to figma-use; if you're building full screens in Figma from code, it switches to figma-generate-design. Requires the Figma MCP server to be connected. The workflow focuses on 1:1 visual parity rather than interpretation, which is useful when you need implementation to match designs exactly rather than getting a developer's take on what the design probably meant.

Install to Claude Code

npx -y skills add figma/mcp-server-guide --skill figma-implement-design --agent claude-code