第一步：先选结构，不急着复制效果
真实迭代从业务目标开始。我们需要的不是“最好看的珠宝网站”，而是一张能展示产品质感、品牌语气和咨询路径的页面。于是先在素材库中比较预览，选择具有强商品影像、克制排版和章节式浏览结构的方案，再检查它是否适合现有内容。
这一步会主动舍弃一些效果。没有稳定视频素材时，不把视频设为唯一首屏；商品信息不足时，不做复杂筛选；品牌没有客户评价时，不生成虚构证言。选择模板是在选择信息结构，而不是照抄表面。
第二步：把公开片段补成项目约束
复制完整提示词后，替换品牌名、产品类别、目标用户和行动按钮，并写明项目目录、技术栈与不能触碰的现有功能。随后补上真实资源路径、页面区块和响应式要求。原提示词负责视觉方向，项目说明负责让结果落到当前代码库。
我们还加入了验收项：手机与桌面无横向溢出，图片有明确尺寸，视频失败时显示海报，导航与按钮都有真实目标，页面主要内容不依赖动画出现。这样 AI 知道什么时候算完成，而不只是“生成一个看起来像参考图的页面”。
第三步：让 Codex 读取并生成
演示视频中，提示词被交给 Codex。它先理解任务，再创建所需文件并启动本地预览。中间过程被加速展示，但真实工作并没有跳过文件检查和运行步骤。生成阶段最重要的是保持范围稳定，不在同一轮临时加入登录、支付或数据库等另一套系统。
第一次页面出现后，我们不凭代码行数判断质量，而是回到浏览器。首屏比例、商品图裁切、文字对比、滚动节奏和按钮位置都必须在真实视口检查。浏览器才是网页最终运行环境。
第四步：记录失败点并做第二轮
常见失败包括远程图片加载慢、视频在手机上黑屏、固定弹窗锁住页面滚动、卡片高度不一致，以及大屏设计缩到手机后信息顺序错误。问题描述必须具体到视口、组件和触发动作，例如“iPhone 宽度打开详情再关闭后 body 仍为 overflow hidden”。
第二轮只处理已观察到的问题。为图片生成本地缩略图和宽度变体，为视频增加 poster，为模态框补卸载时滚动恢复，让卡片预览统一比例，并在窄屏重新排列内容。小范围修复比一句“全面优化”更容易验证，也更不容易引入回归。
第五步：构建、抓取和上线前检查
本地预览正常并不等于生产构建正常。上线前运行正式构建和测试，检查首页、详情、政策、登录与后台路由，确认 JavaScript 失败时仍有标题和主要内容。对公开内容页还要检查 title、H1、description、canonical、结构化数据和站点地图。
部署时先备份当前版本，再上传新的构建产物、重启服务并检查 Nginx。最后使用桌面和手机 User-Agent 请求生产地址，确认状态码、静态资源与关键 HTML。出现故障时应能切回上一版本，而不是直接覆盖唯一副本。
最终结果：页面、证据和维护路径同时交付
最终页面不仅要像预览，还要拥有真实链接、可读内容、移动端布局和稳定资源。演示视频证明从提示词到页面的过程，详情页解释设计决策，验收清单告诉使用者如何继续检查。三者结合，比一张效果图更能证明方案价值。
可上线并不等于永远完成。内容、工具和浏览器会变化，因此要保留更新时间、变更记录和回滚点。真正的提示词资产不是一次生成的代码，而是一套能够重复选择、执行、验证和维护的工作方法。