OpenAI · Agent Skill

figma-implement-design

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…

Published by OpenAI258 lines in SKILL.md

Source: openai/skills/skills/.curated/figma-implement-design
Repository owner: openai

Install

Read the SKILL.md and any scripts before installing: a skill runs with your agent's permissions. This copies just this skill into Claude Code's user skills folder; other agents read skills from their own folder.

Claude Code (user-level)

git clone --depth 1 --filter=blob:none --sparse https://github.com/openai/skills.git /tmp/skills
cd /tmp/skills && git sparse-checkout set "skills/.curated/figma-implement-design"
mkdir -p ~/.claude/skills && cp -r "skills/.curated/figma-implement-design" ~/.claude/skills/figma-implement-design

Skills folder docs:

Claude Code Codex Gemini CLI OpenCode Cursor GitHub Copilot goose OpenHands Amp Factory Droid Junie Kiro Roo Code Mistral Vibe pi Hermes Agent OpenClaw Letta

Works with

Agent Skills is an open format, so this skill loads in any harness that supports it, including Claude Code, Codex, Gemini CLI, OpenCode, Cursor, GitHub Copilot, goose, OpenHands. Some skills are written for one product and say so in their description.

More skills from OpenAI

aspnet-core chatgpt-apps cli-creator cloudflare-deploy define-goal figma figma-code-connect-components figma-create-design-system-rules figma-create-new-file figma-generate-design figma-generate-library figma-use

Reviewed Oct 5, 2026. Name and description are the skill's own frontmatter.