figma

Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see references/figma-mcp-config.md.

These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

• Run get_design_context first to fetch the structured representation for the exact node(s). • If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context. • Run get_screenshot for a visual reference of the node variant being implemented. • Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation. • Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible. • Validate against Figma for 1:1 look and behavior before marking complete.

• Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style. • Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable. • Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality. • Use the project's color system, typography scale, and spacing tokens consistently. • Respect existing routing, state management, and data-fetch patterns already adopted in the repo. • Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals. • Validate the final UI against the Figma screenshot for both look and behavior.