Codex Product Design 怎么改现有页面？从问题审查到可点击原型
用 OpenAI 的 Product Design 改现有页面，先给页面地址或截图、用户要完成的动作和必须保留的内容，让它定位具体问题；需要换视觉方向时再比较方案，选定后做可点击原型，最后接入原项目并检查完整操作。把这几步写清楚，老页面就不容易在“整体优化”中丢失业务内容。
官方插件支持从已有 URL、截图、产品说明和代码路径开始，提供体验审查、视觉方向探索、交互原型等流程。它能够使用已连接的浏览器、设计或生图工具，具体取决于当前环境。Product Design 官方仓库
给页面一个具体问题
拿企业培训预约页举例。访客需要比较基础课和进阶课、选择日期、填写预约信息。现在反馈是“看不懂两种课程有什么区别”，这次就把课程比较作为重点。
开始前准备桌面和手机截图、页面地址、两种课程的正式内容，以及现有组件或品牌约定。有代码项目的，说明项目位置；只有截图时，先做原型也可以。
@Product Design 审查这个培训预约页。
用户要比较两种课程，再选择日期并预约。
本次优先解决课程差异难以比较的问题。
保留课程名、价格、表单字段、品牌色及已有业务规则。
把问题对应到页面元素，说明影响哪一步操作。
先交审查结果和修改范围。
“现代一点”很难判断完成；“两种课程的课时、授课形式和适合人群能对应着看”就容易检查。
把审查结论落到可改的元素
有效的审查应指出位置、问题和影响。例如“进阶课卡片没有授课形式，访客需要滚回说明区寻找”，随后建议把同一组字段放到对应位置。
| 观察到的问题 | 本次改法 | 怎么验收 |
|---|---|---|
| 两张卡片字段顺序不同 | 统一比较字段顺序 | 一眼找到两种课的课时 |
| 预约按钮离选择区太远 | 在相关区域补充入口 | 选好课程后能继续预约 |
| 提交中没有反馈 | 补处理中与失败状态 | 慢请求和错误都能看懂 |
这些是示例检查项，实际改动由页面问题决定。如果审查给出十几项建议，先让它按“阻止用户完成预约”“容易造成误解”“视觉细节”分出先后。一次把关键路径改完整即可。
需要改风格时，让方案使用同一份内容
已有布局只需局部调整，可以直接细化选定改法。确实要改变整体表达时，再要求三种视觉方向，并让每版使用相同课程、价格和按钮文字。
比较方案时关注：第一眼看见什么、两种课程能否对照、主要动作是否容易找到、手机页面有没有挤压。某一版多写了优惠文案，会让比较失去共同基础，应先恢复一致内容。
选定方向后，把选择理由写下来，例如“保留第二版的双列比较，采用第一版更紧凑的预约区”。这比“融合所有优点”更方便继续实现。
原型通过以后，再接入现有项目
让 Codex 先检查现有路由、组件和表单逻辑，再实现批准的范围。价格和课程数据仍从原来的来源读取，避免把原型中的示例文字硬写进业务页面。原型里的模拟成功反馈，也要在正式实现中接到真实提交结果。
交付时要求说明哪部分接上了真实数据、哪部分仍是演示。审查者先看页面，开发者再看代码差异，两边都能对应到同一项改动。
沿着访客路径检查一次
从打开页面开始，比较课程、切换选择、选日期、填写表单并提交。再试缺少必填项、服务返回错误和手机宽度。成功提示出现后，看看用户是否知道下一步会发生什么。
如果测试只是“按钮点击没报错”，还无法说明预约流程能用。可以按Codex 浏览器验收清单留下输入、预期和实际结果。若还在犹豫该用原型还是生图表达需求，先看Product Design 与生图的分工。
设计上下文如何组织，可观看 OpenAI Academy：Design context and iteration with Codex。
官方功能与示例入口见 OpenAI Product Design。项目成员可以拿同一个原型讨论具体元素，再把确认的改法带回项目。
常用 Codex 处理页面和产品工作，可在 China Models 订阅服务查看已有账号的订阅与开票套餐。