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.

skills.sh installs: 367
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Implement Design

Overview

This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.

Prerequisites

Figma MCP server must be connected and accessible
User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
- :fileKey is the file key
- 1-2 is the node ID (the specific component or frame to implement)
OR when using figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required)
Project should have an established design system or component library (preferred)