figma-implement-design

SKILL.md

Translate Figma designs into production-ready code with pixel-perfect visual fidelity.

Structured seven-step workflow: extract node IDs from Figma URLs, fetch design context and screenshots, download assets, translate to project conventions, and validate against Figma specs

Integrates with Figma MCP server (remote or desktop) to access layout properties, typography, colors, design tokens, and component structure

Emphasizes design system reuse, design token mapping, and 1:1 visual parity; includes troubleshooting for truncated responses, asset loading, and token mismatches

Requires Figma MCP connection and project design system; supports both URL-based and desktop app selection workflows

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.

Skill Boundaries

Use this skill when the deliverable is code in the user's repository.

If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use.

If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design.

If the user asks only for Code Connect mappings, switch to figma-code-connect-components.

If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.

Prerequisites