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, fall back to the official Figma MCP tools directly — there is no dedicated skill for Figma-side authoring in this repo.
• If the user asks only for Code Connect mappings, fall back to the Figma MCP add_code_connect_map / get_code_connect_map tools directly.
• If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), use the Figma MCP create_design_system_rules tool directly.

Prerequisites