What problem does it solve? Translating Figma designs into code by hand is slow and error-prone, often producing UI that drifts from the original design. This Skill connects to the Figma MCP server to pull structured design context, screenshots, variables, and assets directly from Figma links, then guides the conversion of that output into code that matches your project's conventions. ## Core Features & Use Cases - Structured design extraction: Runs get_design_context, get_metadata, and get_screenshot in a required sequence to capture exact node structure and visual reference before writing any code. - Design-to-code translation rules: Converts the default React + Tailwind output into your project's design-system tokens, components, typography, and spacing conventions for 1:1 visual parity. - Asset and variable handling: Serves image and SVG assets from the Figma MCP localhost endpoint and retrieves variable definitions and code-connect mappings to reuse existing components. - Use Case: Paste a Figma frame link for a new checkout page, and the Skill fetches its design context and screenshot, downloads the required SVG assets, and implements the page using your existing button and typography components. ## Quick Start Give the agent a Figma frame or layer link and ask it to implement that design using the Figma MCP server following the required get_design_context, get_metadata, and get_screenshot flow.
