figma-implement-design

SKILL.md

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.

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

Prerequisites