Use case
Design lives in Figma and implementation lives in the editor. You want Codex to pull frame context and ship UI that matches the design.
Outcome: Install Figma for design context, then add a frontend skill so the agent applies layout and visual rules consistently.
Install the Figma plugin and authorize access to your files.
Point Codex at the frame or file you are implementing.
Install a frontend design skill for hierarchy, spacing, and polish.
Ask Codex to compare the current component to the Figma layout.
Copy a command, run it, restart Codex, then use the verify prompt.
Core — design context inside Codex
$ npx codex-marketplace add openai/plugins/plugins/figma --pluginVerify
“Pull design specs from the selected Figma frame”
Recommended — 1:1 Figma → production code via MCP
$ npx codex-marketplace add openai/skills/skills/.curated/figma-implement-design --skillVerify
“Implement this Figma frame with pixel-accurate spacing and typography”
Optional — production UI playbook when you need broader polish
$ npx codex-marketplace add am-will/codex-skills/skills/frontend-design --skillVerify
“Build this screen to match the Figma layout with clean spacing”
Most workflows pull specs and context into code. Check the Figma plugin README for create/edit capabilities on your account plan.
Ask Codex to list gaps versus the frame (spacing, type scale, states), then iterate one section at a time.