Figma to Code — Pixel-Perfect Implementation

Core Principles

Extract, never guess — Every value comes from Figma MCP tools or the screenshot. Never approximate colors, spacing, or font sizes.
Validate visually, always — Take a Figma screenshot AND a browser screenshot. Compare side-by-side. Code is not done until they match.
Tokens over hardcodes — Extract repeated values into CSS custom properties. One source of truth for colors, spacing, typography.
Component by component — Never extract an entire screen at once. Work top-down: page → sections → individual components.
Project conventions first — Use the project's existing design system, component library, and naming patterns. Only create new when nothing fits.
Preserve Figma naming and layers — Keep component layer hierarchy and token/variable names aligned with Figma whenever possible.