AI SummaryAutomates translation of Figma designs into production-ready code with pixel-perfect visual accuracy using the Figma MCP workflow. Ideal for developers and designers who need to implement designs quickly while maintaining design fidelity.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "figma-implement-design" skill in my project. Please run this command in my terminal: # Install skill into your project (6 files) mkdir -p .claude/skills/figma-implement-design && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/SKILL.md "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/LICENSE.txt "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/LICENSE.txt" && mkdir -p .claude/skills/figma-implement-design/agents && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/agents/openai.yaml "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/agents/openai.yaml" && mkdir -p .claude/skills/figma-implement-design/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/assets/figma-small.svg "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/assets/figma-small.svg" && mkdir -p .claude/skills/figma-implement-design/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/assets/figma.png "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/assets/figma.png" && mkdir -p .claude/skills/figma-implement-design/assets && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/figma-implement-design/assets/icon.svg "https://raw.githubusercontent.com/openai/skills/main/skills/.curated/figma-implement-design/assets/icon.svg" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Prerequisites
• Figma MCP server must be connected and accessible • User must provide a Figma URL in the format: https://figma.com/design/:fileKey/:fileName?node-id=1-2 • :fileKey is the file key • 1-2 is the node ID (the specific component or frame to implement) • OR when using figma-desktop MCP: User can select a node directly in the Figma desktop app (no URL required) • Project should have an established design system or component library (preferred)
Skill Boundaries
• Use this skill when the deliverable is code in the user's repository. • If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use. • If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design. • If the user asks only for Code Connect mappings, switch to figma-code-connect-components. • If the user asks to author reusable agent rules (CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.
Required Workflow
Follow these steps in order. Do not skip steps.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster