Skip to content
/figma-implement-designOfficial

Turn Figma designs into production-ready code matching layout, states, and responsive behavior.

DesignFrontendFigmaUI· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The figma-implement-design skill turns Figma designs into production-ready code. It connects to the Figma MCP server to inspect design files, extracts layout specifications, component states, responsive breakpoints, and design tokens, then generates matching frontend code in your project's framework.

#How to use

bash
$figma-implement-design
Implement this Figma design in this codebase, matching layout, states, and responsive behavior.

#Workflow

  1. Connect to Figma MCP -- Authenticate and access the target design file
  2. Inspect the design -- Extract layout, spacing, typography, colors, and component structure
  3. Map to components -- Identify reusable components, variants, and states
  4. Generate code -- Produce production-ready components matching the design system
  5. Handle responsive behavior -- Implement breakpoint-specific layouts and adaptive elements
  6. Validate -- Compare generated output against the original design

#Dependencies

  • Figma MCP server (https://mcp.figma.com/mcp)
  • Access to the target Figma design file

#What it handles

  • Layout and spacing (flexbox, grid, absolute positioning)
  • Typography (font family, size, weight, line height, letter spacing)
  • Colors and gradients
  • Component variants and interactive states (hover, active, focus, disabled)
  • Responsive breakpoints and adaptive layouts
  • Design tokens extraction and mapping

This skill is from the OpenAI Skills Catalog.

OpenAI·
View all skills