用 Codex 做网页的“三部曲”

基于抖音视频的事实拆解 + 可复刻工作流

原视频：大白AI《codex绝对实操！！小白制作网页最有效的方法√ 三部曲文稿已整理》

先说结论

这条 6 分 33 秒的视频给出的核心不是一个可照抄的单一提示词，而是一条顺序：先让 AI 反问以补全需求，再用视觉参考校准方向，最后把网页拆成结构化模块并处理图片。这个顺序能复刻为一套可靠的工作流；但视频没有完整公开每轮提示词、素材来源、项目代码或调试过程，因此不能把本文的提示词当成创作者原始流程。

更直接地说：视频标题中的“最有效”是创作者表达，不能当作已验证的普适结论。真正决定结果的，是需求质量、素材合法性、每轮验收和你是否愿意返工。

来源与证据边界

视频的结构：它实际在讲什么

视频内实际关键帧

以下均为原视频播放画面截取，保留画面中的口播字幕与水印；用于说明视频表达，不代表我对画面之外步骤的推断。

图 1：来源视频画面——开场展示赛事/成果背景（约 00:06）

图 2：来源视频画面——第一步的关键词“洞察”，强调先通过提问澄清项目（约 01:44）

图 3：来源视频画面——第二步涉及视觉方向理解（约 02:23）

图 4：来源视频画面——继续说明“匹配”与视觉信息（约 02:43）

复刻路线：把“一句话做网站”改成四轮协作

复刻方案不等于创作者原始完整流程。下面的每一步都要有一个可检查的中间产物；如果它没有出现，就不要急着进入下一步。

第 0 步：准备一页项目简报

目的：给 AI 的不是“做一个好看的网站”，而是一个可判断的任务。写清楚目标用户、唯一主目标、页面范围、已有素材、不可做的事和验收标准。

操作位置：在本地项目中新建 brief.md；把图片按 hero、card、logo、avatar 等用途命名。预期结果：任何协作者只读这一页，也知道先做哪一页、不能擅自补什么。

失败排查：如果你无法用一句话说清“用户进来后要完成什么”，先缩小成一个流程，例如“查看方案 → 预约咨询”，而不是“做一个完整品牌官网”。

第 1 步：先让 AI 反问，不要直接写代码

目的：对应视频“让 AI 反问问题”。先把缺口暴露出来，避免 AI 用默认设定填满你的项目。操作位置：把简报放进对话或项目上下文中。

你是网站项目的需求分析师。先不要写代码。根据下面的项目简报，按优先级向我提出不超过 12 个问题；每个问题说明它会影响哪一项决策（目标、内容、页面、视觉、技术或验收）。我回答后，请输出一页需求确认单。

预期结果：得到“需求确认单”，至少包含用户、主任务、页面清单、关键内容、设备优先级、风险与未决项。失败排查：如果 AI 立即生成代码，明确回复“暂停实现；只输出问题和需求确认单”。

第 2 步：参考视觉，但只提取可解释的规则

目的：对应视频“参考视觉与逻匹配”。把参考图转成版式、层级、间距、色彩和交互语言，而不是复制一个可识别的页面。仅使用你自有、已获许可或可合法使用的图片与标识。

基于项目简报和以下已获许可的参考，先输出：1）视觉 token（颜色、字体、圆角、阴影、间距）；2）首屏和卡片的信息层级；3）内容与页面模块的对应表。不要复用参考中的文案、图片、logo 或独特版式；待我确认后再实现。

预期结果：一页“视觉与结构说明”，而非一堆 CSS。失败排查：如果结果只是“简洁、现代、高级”等形容词，追问到可验收的规则，例如“首屏标题最多两行、卡片标题最多两行、正文行高 1.6”。

第 3 步：结构化搭建，一次只交付一个可验收切片

目的：对应视频“结构化网页搭建”。先定义路由、组件树、数据结构和状态，再做页面；每轮只完成一个切片，例如首页首屏或内容列表。

请先输出本项目的文件树、路由表、组件树和每个组件的职责；不要直接改动全部文件。确认后，先实现首页首屏：使用占位的自有素材路径、响应式布局和可替换的文案数据。完成后列出变更文件、启动方式和我应检查的 5 项。

预期结果：你能说清每个文件为何存在，并能独立替换一段文案或一张图片。失败排查：如果一次改了很多页面而无法定位问题，回退到“一个页面 / 一个区块 / 一次验收”的粒度。

第 4 步：图片分批处理，建立素材清单

目的：对应视频的图片批量处理主题。图多时不要把所有图片塞进同一轮上下文；先做清单，再按区块分批。视频评论中也有人询问大量图片是否会超上下文，但这只是评论问题，不能作为创作者做法的证据。

请根据 assets-manifest.csv 处理本轮 6 张图片。先核对每张图片的文件名、用途、替代文案和对应页面区块；只修改这些图片关联的组件。若任何素材信息缺失，停止并列出缺失项，不要猜测。

建议清单字段：文件名、版权/来源、用途、页面区块、推荐裁切、替代文本、是否已压缩。预期结果：图片替换不会影响无关模块。失败排查：出现上下文不足、图片混用或结果漂移时，减少批次并把“文件名 → 用途 → 组件”关系写死。

最后一轮：验收而不是“看着差不多”

这条视频最值得拿走的，不是“神提示词”

我的判断：它真正有价值的结构是把 AI 从“直接出成品”改为“先提问 → 对齐视觉与逻辑 → 分块实现 → 管理素材 → 验收”。这个方法能减少返工，但不能替代内容判断、设计选择或真实测试。把自己放在“导演/验收者”的位置是合理的工作分工；不过视频评论里的这类说法属于评论者观点，不应反过来当作视频作者的明确主张。

如果你只做一件事，请从“让 AI 先问我 12 个问题”开始。它通常比再换一个模型或再找一段万能提示词更能改善第一次交付。

来源

抖音来源视频：https://www.douyin.com/video/7660844602957532450

原作者：大白AI（抖音号：870954961）