figma

Fetch design context, screenshots, and assets from Figma, then translate designs into production code. 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. - Provides three core commands: get_design_context for structured node representation, get_screenshot for visual reference, and asset download via localhost endpoints - Requires a mandatory workflow: fetch design context, retrieve screenshot, download assets, then implement using project conventions and design tokens - Outputs React + Tailwind as a design representation; implementation must reuse existing project components, color systems, and typography instead of duplicating Figma output verbatim - Link-based operation: extract node IDs from Figma URLs to fetch specific frames, layers, or variants; validate final UI against Figma for 1:1 visual and behavioral parity - 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...