figma-implement-design

TL;DR

A design-to-code workflow from OpenAI's catalog of Codex skills, built on the Figma MCP server. From a Figma URL the agent extracts the file key and node ID; with the figma-desktop server it uses the node selected in the open file instead. It fetches the node's structured design context (layout, typography, colors, tokens, variants, spacing), falling back to a metadata map and child-by-child fetches when the response is too large, then a screenshot that stays the source of truth throughout. Images and SVGs come from the server's localhost asset endpoint: no new icon packages, no placeholders. Figma's output, usually React with Tailwind, is treated as a description of design and behavior, not as code to keep: the agent reuses your existing components, extending one rather than duplicating it, maps Figma values to your color, type and spacing tokens, and follows your routing, state and data-fetching patterns. New components get typed props and JSDoc comments. Before finishing it validates against the screenshot, including hover, active and disabled states, responsive constraints and WCAG accessibility. The openai/skills repository is marked deprecated; its README points to openai/plugins for current Codex skills.

Summarizes the skill at 49f948f.