从零学用 Codex 搭网站 Day 4：把导航和手机端一次做对

电脑上挺好看，手机一开全挤成一团，这是新手网站最常见的现场。今天只管两个东西：怎么走，怎么在小屏上走。

这篇是 从零学用 Codex 搭网站 的第 4 天。今天的最小可用单元只有一个：桌面导航、手机菜单、当前页面反馈和可用的键盘焦点。

先别收藏更多教程。打开 Codex，做完，看到结果，再回来继续。

今天只拿走一个结果

桌面导航、手机菜单、当前页面反馈和可用的键盘焦点。

你需要准备的输入也很少：最终一级页面列表、品牌名、主 CTA。

如果这些输入还没有，先写“不确定”。真实的不确定，比让 Codex替你编一个答案有用。

第一轮对话：先让 Codex理解现场

把下面这段复制给 Codex。方括号里的内容换成你自己的。别删限制条件。

请检查现有导航和全站布局，实施一个可访问的响应式导航。

要求：
1. 桌面显示一级页面；
2. 小于合适断点后使用菜单按钮；
3. 菜单按钮有 aria-label 和展开状态；
4. 点击链接后关闭菜单；
5. 键盘可以操作；
6. 不改现有视觉语言。

完成后在 1440px、768px、390px 三种宽度检查，并报告结果。

发出去以后，不要趁它工作时继续塞十条要求。等它完成第一轮，看它检查了什么、改了哪些文件或引用了哪些证据。

第二轮：你亲手验收，不靠“看起来不错”

今天重点检查：手机上是否看得到菜单按钮；打开后页面会不会横向滚动；Tab 键是否能依次进入链接；点击后菜单是否收起。

看到问题时，描述现象，不要抢着替它诊断。比如说“390px 宽度下右边被裁掉”，比“CSS 的 grid 写错了”更好。前者是事实，后者只是你的猜测。

接着发这段纠偏对话：

我只关心导航可靠性。请对照这份清单复查：溢出、遮挡、焦点、aria-expanded、点击后关闭、无 JavaScript 时的基本可达性。发现问题就修，没发现也要说明你实际验证了什么。

怎么判断它真的理解了

网站任务里，Codex说“完成了”只是一个进度提示，不是验收结论。真正的证据通常只有几种：构建命令退出码为 0、目标 URL 返回正确状态、页面截图符合预期、自动测试覆盖了核心路径、改动清单与任务范围一致。让它把证据摆出来，你再判断。

如果改动突然扩散到很多文件，先停下来问：“为了完成今天这个结果，哪些文件是必要的？哪些只是顺手优化？” 新手最容易被一大串改动吓住，于是直接接受。其实缩小 diff 本身就是在学习系统边界。

还有一个土办法很好用：让 Codex在交付时写出“我没有做什么”。没有接数据库、没有做后台、没有配置真实邮件，都应明确写出来。知道当前版本的边界，明天才能接得上。

一个很容易踩的坑

只说“做成响应式”。响应式不是一个样式词，而是一组具体宽度和交互状态。

我现在判断提示词好不好，只看三件事：输入是不是事实，范围是不是够小，完成以后能不能验收。句子漂不漂亮，反而排在后面。

今天先别做这三件事

第一，别在任务做到一半时换技术、换表格或换一套提示词。工具切换会给人一种重新开始的轻松感，但旧问题没有因此消失。

第二，别把 Codex 的解释全部抄进笔记。只记你下次还会用的输入、判断和验收动作。其余说明随时可以再问。

第三，别把“多做一点”当奖励。今天的边界本身就是训练内容。能在最小成果通过后停手，说明你开始掌握任务拆分，而不是被新点子牵着走。

今天的 20 分钟刻意练习

故意把一个导航标题改成八个汉字，看布局会不会崩。修好后再改回来。这比盯着正常状态看十分钟更有用。

练习时别开新教程，别换工具。卡住就把现场交回 Codex：你做了什么、预期什么、实际发生什么、原始错误是什么。

如果还是没做成，不要用“重新帮我做一次”清空现场。把最后一个成功状态、第一处失败、原始输出和你已经试过的动作写成四行。下一轮只解决第一处失败。这个习惯会让你少掉很多无效重来。

下班前的验收单

• [ ] 三种宽度无横向滚动
• [ ] 手机菜单可开可关
• [ ] 键盘焦点可见
• [ ] 主 CTA 不遮挡导航

四项都过，今天就停。没过也别扩功能，只修最前面那一项。

留一条“明天还能接上”的记录

在项目里写下四行：

1. 今天做成了什么；
2. 哪个输入最影响结果；
3. Codex 哪次判断错了，你用什么证据纠正；
4. 明天开始前必须保持不变的东西。

这四行比再收藏十个提示词值钱。它们会逐渐变成你的工作说明、测试清单，最后才是可复用的 Skill。

少量资源不是少学，而是让资源短到足以马上行动。今天的教程到这里，剩下的时间交给你的手。