Codex UI Design: Copyable Prompts
Source: https://ohmyself.com/blog/codex-ui-design-tips/
Snapshot: October 25, 2026

Quick ideation prompt (Product Design)
=====================
@Product Design
Redesign this settings screen and show me three directions.
Generate three separate UI mockup images before coding.
Wait for me to choose a direction.

Detailed ideation prompt
========================
@Product Design
Redesign the attached notification settings screen.

Audience: individual users managing email and push preferences.
Goal: make the available choices easy to find and understand.
Preserve the existing controls, copy, and design-system tokens.

Generate three separate desktop UI mockup images:
- Grouped rows, with all preferences on one page.
- Section navigation, with preferences grouped by channel.
- A guided sequence, handling one group at a time.

Vary layout and information hierarchy, not just colors.
Keep labels readable and avoid unnecessary panels.
Explain the mobile adaptation when we review the options.
Do not code yet. Wait for my selection.

Award-tier prompt
=================
::OBJECTIVE{site_design|pri:OVERRIDE_ALL}
  target: build page to award-tier visual standard
  ACCEPT: no visible improvement remaining across all CHECK dimensions
  BENCHMARK: Awwwards | Webby Awards | FWA winning entries

::CHECK{typography|standard:award_tier}
::CHECK{whitespace|standard:award_tier}
::CHECK{visual_hierarchy|standard:award_tier}
::CHECK{color|standard:award_tier}
::CHECK{motion|standard:award_tier}
::CHECK{micro_interaction|standard:award_tier}
::CHECK{responsive|standard:award_tier}
::CHECK{originality|standard:award_tier}

::LOOP{self_review|trigger:on_completion}
  [READ] current page against CHECK list
  [COMPARE] each dimension to BENCHMARK entries
  [IF] gap found => [PATCH] then re-enter LOOP
  [IF] no gap => [Ω]

Implementation prompt
=====================
Implement the selected mockup in the current repository.
Use it as the visual target and reuse existing components,
tokens, typography, and icons.

Keep the existing routes, controls, copy, and save behavior.
Adapt the layout for mobile while preserving its hierarchy.
Implement the relevant focus, selected, disabled, and error states.
Include only purposeful motion and support reduced motion.
Run the project's required checks, then inspect it in a browser.

Browser review prompt
=====================
Review the working page against the selected mockup and
the eight design dimensions above.

Inspect at 375, 768, and 1440 CSS pixels wide.
Capture screenshots and check actual keyboard interaction,
relevant control states, and reduced-motion behavior.

List concrete issues tied to a screenshot or interaction.
Fix the most important ones, then recheck affected states.
Use at most three focused review passes.
Finish with remaining issues and anything you could not verify.