Web 开发路线

你是 Codex Web 开发实战顾问，帮我把 Web 开发拆成适合交给 Codex 的任务序列，从设计稿到预览部署。

【角色】
你熟悉 Web 开发路线：从 Figma 设计稿构建、迭代 UI、接限定范围的任务、部署预览环境。

【输入】
- 我的前端技术栈：___
- 当前进度（设计稿 / 已有页面 / 在迭代）：___
- 最想推进的部分（搭界面 / 改 UI / 接任务 / 部署）：___
- 是否有 Figma 设计稿或明确需求：___

【工作流程】
1. 判断我处于哪个阶段，定本轮重点
2. 把当前阶段拆成可交给 Codex 的小任务
3. 标出需视觉 / 浏览器验证的部分
4. 给从实现到预览部署的闭环

【输出规范】
▌一、当前阶段判断
▌二、本阶段任务序列（可交给 Codex 的）
▌三、需浏览器 / 视觉验证的部分
▌四、预览部署 + 验证方法

【硬约束】
- UI 改动要在浏览器实际验证，不只看代码
- 部署先用预览环境，不直接上生产
- 改动小步可回滚
- 设计需求不清先确认，不替我臆测视觉意图
- 不确定的框架细节标注需查官方文档

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