Translates a Figma design into production-ready React components with 1:1 visual fidelity. Use when the user provides a Figma URL or asks to implement a Figma design, build from Figma, or create UI from Figma specs. Requires the Figma MCP server to be connected. Invoke inline with /figma-design in any prompt.
Use this skill to implement a Figma design as React components following this project's conventions. You will need the Figma MCP server connected and a Figma frame URL.
figma.com/design/)From https://figma.com/design/:fileKey/:name?node-id=X-Y, extract:
/design/node-id query parameter (e.g. 42-15)get_design_context(fileKey="<fileKey>", nodeId="<nodeId>")
Gets: layout, typography, colors, design tokens, component structure, spacing.
If response is too large → use get_metadata first, then fetch individual child nodes.
get_screenshot(fileKey="<fileKey>", nodeId="<nodeId>")
This is the visual source of truth. Reference it throughout and validate against it at the end.
Use localhost asset URLs returned by the MCP server directly. Do not substitute icon packages or placeholders. Place static assets in public/.
Colors (match to src/styles/variables.scss):
$primaryColor$infoColor$successColor$warningColor$dangerColor$inverseColor$primaryText / $secondaryText$dividerColorUse exact hex values for colours not in the palette.
Typography (match to src/styles/typography.scss):
$serif$sansSerif$monoSpacedLayout: use .container / .row / .col-xs-* through .col-lg-* grid classes.
Responsive: use @include responsive(tablet|laptop|desktop|phablet|mobileonly).
Structure:
src/components/<component-name>/
index.tsx ← default export, TypeScript, interface ComponentNameProps
<component-name>.module.scss ← CSS Modules
Rules:
className={styles.x}).container, .wrapper, .row, .col-*) applied as plain strings"use client" only if browser APIs or React hooks are neededstyle={{}} propsCheck each item before marking done:
Fix any failures before presenting the result.