Setup & Installation
npx skills add https://github.com/openai/skills --skill figma-implement-design
https://github.com/openai/skills/tree/main/skills/.curated/figma-implement-design
View on GitHubWhat This Skill Does
Translates Figma designs into production-ready code with pixel-perfect visual parity. Works by fetching design context and screenshots through the Figma MCP server, then mapping design tokens, layout, and assets to your project's existing component library and conventions.
Instead of manually cross-referencing Figma specs and guessing token mappings, it fetches structured design context directly from the Figma MCP server and walks through a validated checklist before marking implementation complete.
When to use it
- Converting a Figma component URL into a typed React component with matching tokens
- Rebuilding a dashboard layout from a Figma file without manual spacing calculations
- Extending an existing button component with a new variant defined in Figma
- Downloading and wiring up SVG assets from a Figma frame without adding icon packages
- Auditing implemented UI against a Figma screenshot to catch spacing or color drift