Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
Add this skill
npx mdskills install openai/figma-implement-designComprehensive workflow for translating Figma designs into production code with clear step-by-step instructions and validation
Agent Skills are folders of instructions, scripts, and resources that AI agents can discover and use to perform at specific tasks. Write once, use everywhere.
Codex uses skills to help package capabilities that teams and individuals can use to complete specific tasks in a repeatable way. This repository catalogs skills for use and distribution with Codex.
Learn more:
Skills in .system are automatically installed in the latest version of Codex.
To install curated or experimental skills, you can use the $skill-installer inside Codex.
Curated skills can be installed by name (defaults to skills/.curated):
$skill-installer gh-address-comments
For experimental skills, specify the skill folder. For example:
$skill-installer install the create-plan skill from the .experimental folder
Or provide the GitHub directory URL:
$skill-installer install https://github.com/openai/skills/tree/main/skills/.experimental/create-plan
After installing a skill, restart Codex to pick up new skills.
The license of an individual skill can be found directly inside the skill's directory inside the LICENSE.txt file.
Install via CLI
npx mdskills install openai/figma-implement-designFigma Implement Design is a free, open-source AI agent skill. Translate Figma nodes into production-ready code with 1:1 visual fidelity using the Figma MCP workflow (design context, screenshots, assets, and project-convention translation). Trigger when the user provides Figma URLs or node IDs, or asks to implement designs or components that must match Figma specs. Requires a working Figma MCP server connection.
Install Figma Implement Design with a single command:
npx mdskills install openai/figma-implement-designThis downloads the skill files into your project and your AI agent picks them up automatically.
Figma Implement Design works with Claude Code, Claude Desktop, Cursor, Vscode Copilot, Windsurf, Continue Dev, Codex, Gemini Cli, Amp, Roo Code, Goose, Opencode, Trae, Qodo, Command Code. Skills use the open SKILL.md format which is compatible with any AI coding agent that reads markdown instructions.