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)

Required Workflow

Follow these steps in order. Do not skip steps.