Skip to main content
reopt Handbook
reopt Handbook
Codex Command MasterLabels and command selectionHow to read a detail guideComplete command listTerminal CLI Commands and Options

Task guides

Core Command GroupSession Command GroupCustom Command GuideMCP Command and Integration GuideDesign Workflows

Conversation and context

Cmd. /clearCmd. /renameCmd. /archiveCmd. /deleteCmd. /compactCmd. /copyCmd. /memoriesCmd. /importCmd. /initCmd. /mentionCmd. /forkCmd. /sideCmd. /resumeCmd. /newCmd. /cdCmd. /exportCmd. /recap

Planning and execution

Cmd. /planCmd. /goalCmd. /psCmd. /stopCmd. /app

Review and verification

Cmd. /review

Models and settings

Cmd. /modelCmd. /fast

Permissions and integrations

Cmd. /permissionsCmd. /ideCmd. /setup-default-sandboxCmd. /sandbox-add-read-dirCmd. /pluginsCmd. /hooksCmd. /approveCmd. /skillsCmd. /mcp

Status and diagnostics

Cmd. /agentCmd. /appsCmd. /diffCmd. /feedbackCmd. /personalityCmd. /rawCmd. /statusCmd. /debug-configCmd. /title

Display and input

Cmd. /keymapCmd. /vimCmd. /experimentalCmd. /statuslineCmd. /themeCmd. /petsCmd. /voiceCmd. /worktree

Account and usage

Cmd. /exitCmd. /logoutCmd. /quitCmd. /usage

Legacy

Cmd. /approvals

Verification and history

Current verification scopeHandbook updatesRelease coverage historyEarlier verification recordsCommand change history
Handbook›Codex Command Master›Design Workflows
한국어English

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 /design command. Design work combines /plugins, /skills, /mcp, and /ide with Skills, Plugins, and MCP tools.
  • Figma implementation starts from an exact node link and uses get_design_context, get_metadata, and get_screenshot as the source of truth.
  • Use $imagegen to explore UI mock directions, then reattach the selected image to a new Codex task for implementation.
  • After implementation, use $playwright to compare desktop and mobile behavior in a real browser, then finish with /diff and /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

CommandRole in the workflowWhat to check
/pluginsDiscover or install bundles such as Figma and Build Web AppsSource, version, bundled hooks, enabled state
/skillsSelect task guidance such as Figma, ImageGen, or PlaywrightSkill visibility and the exact token exposed in the session
/mcpInspect the Figma MCP server and actual tool inventoryget_design_context, get_metadata, and get_screenshot
/appsAttach product context from Slack, Linear, or Google DrivePicker-inserted app mention and permissions
/ideInclude the active component or editor selectionOpen sensitive files and selection scope
/permissionsControl browser, external-tool, and file-write authorityApproval policy for read and write tools
/diff, /reviewInspect implementation changes and regression riskCode quality and tests as well as visual fidelity

Implement a Figma design

1. Check capabilities and connection state

/plugins
/skills
/mcp
  1. Use /plugins to confirm the Figma capability is installed and enabled.
  2. Use /skills to find the Figma and Playwright interactive skills.
  3. Use /mcp to confirm the Figma server exposes get_design_context, get_metadata, and get_screenshot.
  4. If tools are missing, run /mcp verbose to 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:

  1. Run get_design_context for the exact node.
  2. If the response is truncated, use get_metadata to map the file and re-fetch only the required nodes.
  3. Run get_screenshot for the exact variant before coding.
  4. Reuse the repository's components, design tokens, icons, routing, and state patterns.
  5. 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.
  • /diff and /review cover 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://learn.chatgpt.com/docs/developer-commands?surface=cli
  • 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

Related docs

MCP Command and Integration Guide

How to operate MCP servers and tools safely from Codex.

Cmd. /skills

Browse and apply local skills for task-specific behavior.

Updates

Harness Engineering · Change log for the Harness Engineering handbook

Workflow Strategies

Design Systems for the AI Era · Compare design-to-code, code-to-design, and bidirectional AI workflows.

Updates

LLMOps and AgentOps in Production · Changelog for LLMOps and AgentOps in Production

MCP Command and Integration Guide

How to operate MCP servers and tools safely from Codex.

Cmd. /clear

Clear the terminal and current chat context, then start a fresh Codex chat.

On this page

Commands used in design workImplement a Figma design1. Check capabilities and connection state2. Start from the exact Figma selection3. Verify in a real browserTurn a user story into a UI mock1. Gather product context2. Explore directions with ImageGen3. Move the mock into a prototypeCompletion checklistSources