Design Workflows
Connect /plugins, /skills, /mcp, and /ide with Figma, ImageGen, and Playwright to design, implement, and verify UI with Codex.
Key takeaways
- Codex CLI does not provide a standalone
/designcommand. Design work combines/plugins,/skills,/mcp, and/idewith Skills, Plugins, and MCP tools. - Figma implementation starts from an exact node link and uses
get_design_context,get_metadata, andget_screenshotas the source of truth. - Use
$imagegento explore UI mock directions, then reattach the selected image to a new Codex task for implementation. - After implementation, use
$playwrightto compare desktop and mobile behavior in a real browser, then finish with/diffand/review.
Separate commands from design capabilities
/skills, /plugins, /mcp, and /ide are the commands that lead into design workflows.
Figma, $imagegen, $playwright, and build-web-apps are capabilities delivered through
Skills, Plugins, or MCP. Names and mention syntax can vary by installed bundle and product surface,
so prefer the value inserted by the /skills, /plugins, or /apps picker.
Commands used in design work
| Command | Role in the workflow | What to check |
|---|---|---|
/plugins | Discover or install bundles such as Figma and Build Web Apps | Source, version, bundled hooks, enabled state |
/skills | Select task guidance such as Figma, ImageGen, or Playwright | Skill visibility and the exact token exposed in the session |
/mcp | Inspect the Figma MCP server and actual tool inventory | get_design_context, get_metadata, and get_screenshot |
/apps | Attach product context from Slack, Linear, or Google Drive | Picker-inserted app mention and permissions |
/ide | Include the active component or editor selection | Open sensitive files and selection scope |
/permissions | Control browser, external-tool, and file-write authority | Approval policy for read and write tools |
/diff, /review | Inspect implementation changes and regression risk | Code quality and tests as well as visual fidelity |
Implement a Figma design
1. Check capabilities and connection state
/plugins
/skills
/mcp- Use
/pluginsto confirm the Figma capability is installed and enabled. - Use
/skillsto find the Figma and Playwright interactive skills. - Use
/mcpto confirm the Figma server exposesget_design_context,get_metadata, andget_screenshot. - If tools are missing, run
/mcp verboseto inspect authentication, server, and tool exposure.
2. Start from the exact Figma selection
Provide the exact frame, component, or variant link rather than a nearby parent. Tell Codex to follow this sequence before implementation:
- Run
get_design_contextfor the exact node. - If the response is truncated, use
get_metadatato map the file and re-fetch only the required nodes. - Run
get_screenshotfor the exact variant before coding. - Reuse the repository's components, design tokens, icons, routing, and state patterns.
- Treat Figma output as structural context and translate it into the project's actual utilities and component conventions.
Use the Figma skill to implement this exact frame: <FIGMA_NODE_URL>
Start with get_design_context. If it is truncated, use get_metadata to narrow the required nodes.
Run get_screenshot for the target variant before coding.
Reuse the existing design-system components and tokens, and match desktop and mobile behavior.3. Verify in a real browser
After implementation, use the Playwright interactive skill to compare the running app with the Figma reference.
- Check desktop and mobile breakpoints.
- Compare spacing, layout, hierarchy, typography, and assets.
- Test hover, focus, loading, empty, and error states.
- Check console errors and broken assets.
- Iterate and capture the same viewport again while mismatches remain.
Turn a user story into a UI mock
1. Gather product context
When useful, attach Slack, Linear, or Google Drive sources through /apps or installed plugins. Mention syntax varies by surface, so use the value inserted by the picker.
2. Explore directions with ImageGen
Give $imagegen the user story, information architecture, design-system constraints, and an existing screenshot or Figma reference. Generate a small set of directions, select one, and narrow it rather than asking for a final screen immediately.
Use $imagegen to create three UI mock directions for this user story.
Preserve the current information architecture and design system, using the attached screen as the visual reference.
Show the core interaction and the desktop/mobile differences in each direction.3. Move the mock into a prototype
After choosing the final mock, open a new Codex task and reattach the image. For a web app, select the Build Web Apps plugin for implementation, then compare the result with the mock using Playwright interactive.
Completion checklist
- The exact Figma node or selected mock is named as the source of truth.
- Existing design-system components and tokens are reused.
- The implementation does not introduce placeholders or an unnecessary icon package.
- Desktop, mobile, and core interactions are checked in a real browser.
- Accessibility states and console errors are checked.
-
/diffand/reviewcover code changes and regression risk.
Sources
- Figma designs to code: https://learn.chatgpt.com/use-cases/figma-designs-to-code
- User stories to UI mocks: https://learn.chatgpt.com/use-cases/user-stories-to-ui-mocks
- Codex slash commands: https://developers.openai.com/codex/cli/slash-commands
- Codex MCP customization: https://learn.chatgpt.com/docs/customization/overview#mcp
- OpenAI Figma plugin: https://github.com/openai/plugins/tree/main/plugins/figma
- OpenAI Playwright interactive skill: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
- OpenAI Build Web Apps plugin: https://github.com/openai/plugins/tree/main/plugins/build-web-apps