Web 开发路线

Codex 很适合已有 design systems 的 web projects。它可以结合 constraints 和 visual inputs，生成 responsive UI。

如果你正在构建 web apps，并需要持续迭代 frontend designs，这组 use cases 很有用。

Web 开发路线的重点是把“看起来像”变成“在真实项目里可维护”：复用 design system、遵守 routing 和 data-fetch patterns、做 responsive checks、用 Playwright 在不同 breakpoint 验证，而不是生成一套脱离项目的并行 UI。

配图：

• background：https://developers.openai.com/codex/use-cases/background-codex-collection3.png
• illustration：https://developers.openai.com/codex/use-cases/web-development-illustration.png

适合什么项目

适合：

• 已有 React / Next.js / design system 的 web app。
• 有 screenshot、Figma、视觉参考或明确 design brief。
• 需要 desktop 和 mobile 同时验证。
• 需要 Codex 在浏览器里迭代 layout、spacing、state、interaction。

不适合：

• 只有“做得高级一点”这类模糊描述。
• 没有组件规范，且不允许先整理 design primitives。
• 不跑浏览器，只看 build pass。
• 一次性要求 Codex 大改全站 UI。

Build from Figma

用 Codex 从 Figma 拉取 design context，并转成符合 repo components、styling 和 design system 的 code。

• Turn Figma designs into code Use Codex to pull design context, assets, and variants from Figma, then translate them into code. Front-end · Design

从 Figma 开始时，Codex 应该翻译设计，而不是照抄结构。明确要求它：

• 使用 repo 现有 components。
• 使用现有 tokens、spacing、typography、colors。
• 遵守当前 routing 和 state management。
• 处理 empty、loading、error、selected、hover states。
• 对无法确认的细节做最小合理假设并说明。

Iterate on the UI

用 Codex 根据 visual inputs 或 prompts 做 targeted changes，并让它在 browser 中 verify work。

• Build responsive front-end designs Use Codex to translate screenshots and design briefs into code that matches the repo's conventions. Front-end · Design

• Make granular UI changes Use Codex to make one small UI adjustment at a time in an existing app, then verify it in the browser. Front-end · Design

官方 responsive front-end use case 强调：用 screenshots 和 design brief 做 source of truth，再用 Playwright 比对不同 screen sizes。实际执行时建议每轮只做一个明确目标：

• 调整 header 在 mobile 的换行。
• 修复 card grid 在 tablet 的列数。
• 对齐 button 和 input 的 vertical rhythm。
• 补 empty state。
• 调整 hover 或 selected state。

不要把视觉改动、数据结构、路由和业务逻辑混在同一个任务里。

Starter prompt

Implement this UI in the current project using the screenshots and notes as the source of truth.
Reuse existing design system components and tokens.
Translate the screenshots into this repo's utilities and component patterns instead of inventing a parallel system.
Match spacing, hierarchy, layout, and responsive behavior on desktop and mobile.
Use Playwright to compare the implementation against the references at 375, 768, 1024, and 1440 widths.
If a detail is ambiguous, choose the simplest implementation that fits the direction and note the assumption.

Pick Up Scoped Slack Tasks

当 Slack 中出现 feature request 或 reported issue 时 tag Codex，让它在 background 中接手任务。

• Kick off coding tasks from Slack Mention @Codex in Slack to start a task tied to the right repo and environment. Integrations · Workflow

Slack 任务必须 scoped。适合交给 Codex 的 Slack request 应包含：

• repo
• target page 或 component
• expected behavior
• screenshot 或 reproduction
• validation command
• deploy or preview expectation

“这个页面不好看，优化一下”不适合直接丢给 cloud task。应先转成具体 UI acceptance criteria。

Deploy a Preview

让 Codex build 或 update web app，用 Vercel deploy，并返回可分享的 live URL。

• Deploy an app or website Use Codex with Build Web Apps and Vercel to turn a repo, screenshot, design, or rough app idea into a preview. Front-end · Integrations

Preview 不是最后一步的装饰，而是 UI 任务的验收入口。让 Codex 输出：

• build command
• deploy target
• preview URL
• known limitations
• screenshots or viewport checks
• follow-up tasks

如果只是本地 build pass，没有 preview 或截图，仍然不能说明响应式 UI 已经达标。

Ship Changes Faster

在 GitHub 中使用 Codex，确认 changes 可以安全 merge，让 development loop 更快。

• Codex code review for GitHub pull requests Use Codex code review in GitHub to automatically surface regressions, missing tests, and high-priority issues. Integrations · Workflow

响应式验收矩阵

每个 breakpoint 至少检查：

• 没有横向滚动。
• 文字没有溢出按钮或卡片。
• 交互控件可见且可点击。
• empty / loading / error 状态不挤压布局。
• primary action 在首屏或合理位置。

完成标准

• UI 使用现有 design system，而不是新建一套组件风格。
• Figma 或 screenshot 的关键 hierarchy、spacing、layout 已转译到代码。
• desktop 和 mobile 都有浏览器验证。
• 所有动态状态至少覆盖正常、empty、loading、error 中与页面相关的状态。
• preview URL 或截图可以给 reviewer 对比。
• PR review 覆盖 regression、missing tests、breakpoint issue。

官方资料

• Build responsive front-end designs
• Turn Figma designs into code
• Make granular UI changes
• Kick off coding tasks from Slack
• Deploy an app or website
• Codex code review for GitHub pull requests