Skip to content
mcp/skillhub

Agent Skill

Figma Implement Design skill

figma-implement-designOpenAI Skillsskills/.curated/figma-implement-design/SKILL.md

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`.

28kofficial repo

always on

81 tokname + description

once used

2,660 tokSKILL.md body

bundled files

54 KB

repo stars

28kGitHub

Install the Figma Implement Design skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/openai/skills --skill figma-implement-design

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/openai/skills.git /tmp/skills
mkdir -p ~/.claude/skills
cp -R /tmp/skills/skills/.curated/figma-implement-design ~/.claude/skills/figma-implement-design

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description81 tok
When the agent uses itThe SKILL.md instructions2,660 tok
Only if opened5 bundled files (4 KB)varies

Until it is used, figma-implement-design costs about 17× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 44 skills from openai/skills would load 2,975 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Implement Design
  • Overview
  • Skill Boundaries
  • Prerequisites
  • Required Workflow
  • Step 1: Get Node ID
  • Step 2: Fetch Design Context
  • Step 3: Capture Visual Reference
  • Step 4: Download Required Assets
  • Step 5: Translate to Project Conventions
  • Step 6: Achieve 1:1 Visual Parity
  • Step 7: Validate Against Figma
  • Implementation Rules
  • Component Organization
  • Design System Integration
  • Code Quality
  • Examples
  • Example 1: Implementing a Button Component
  • Example 2: Building a Dashboard Layout
  • Best Practices
  • Always Start with Context
  • Incremental Validation
  • Document Deviations
  • Reuse Over Recreation

More skills from openai/skills

All skills in this repo
  1. aspnet-coreopenai/skills

    Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.

    28k79 tok idle · 1,065 in use
  2. chatgpt-appsopenai/skills

    Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.

    28k196 tok idle · 4,080 in use
  3. cli-creatoropenai/skills

    Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read/write commands, return stable JSON, manage auth, and pair with a companion skill.

    28k82 tok idle · 2,222 in use
  4. cloudflare-deployopenai/skills

    Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.

    28k43 tok idle · 1,747 in use
  5. define-goalopenai/skills

    Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.

    28k76 tok idle · 1,054 in use
  6. figmaopenai/skills

    Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

    28k59 tok idle · 588 in use
  7. figma-code-connect-componentsopenai/skills

    Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

    28k181 tok idle · 4,044 in use
  8. figma-create-design-system-rulesopenai/skills

    Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

    28k170 tok idle · 3,888 in use