第三部分 · 先看到结果
这一部分我们只追求一件事：在浏览器里看到一个像样的 Todo 页面。还不接后端、不存数据、不加 AI——就是先把「看得见的结果」做出来。因为对初学者来说，看到自己做出的东西，比看懂代码重要一百倍。
11. 创建第一个 Todo 页面
这一章要解决什么问题
上一部分我们让 AI 搭了个只显示「AI Todo」的空壳。这一章要让它变成一个有模有样的待办清单界面：有标题、有输入框、有添加按钮、有一个任务列表。
这是什么
一个「静态页面」。所谓静态，就是先只管长得对不对，暂时不管点了有没有用。就像先把房子的样板间布置好，家电通不通电下一步再说。
为什么先做这个
💡 这是一道典型的选择题：我们本可以一上来就做「能添加任务」的完整功能。但我们选择先只做外观。为什么？因为「界面对不对」是最容易验收的一件事——你一眼就能看出来。先把容易验收的做出来，建立信心和参照物，再往上加功能。做产品，先立骨架，再填血肉。
让 Claude Code / Codex 执行的小任务
在项目里启动 AI，发给它：
任务目标：
把当前的 AI Todo 页面做成一个基础的待办清单界面。
当前状态：
现在页面只显示了“AI Todo”几个字，还很简陋。
限制条件：
这次只做页面外观，先不要实现任何点击功能，不要接后端，不要加数据库。
用最简单的单个 HTML 文件实现即可。
期望结果：
页面从上到下有：一个“AI Todo”标题、一个输入框、一个“添加”按钮，
下面有一个任务列表，里面先放两三条示例任务（比如“买菜”“写周报”）当占位。
验收标准：
1. 页面能在浏览器打开。
2. 标题、输入框、添加按钮、示例任务列表都能看到。
3. 布局整齐，不重叠、不错乱。
4. 没有报错。运行后应该看到什么结果
浏览器里出现一个清清爽爽的页面：顶上是标题，中间是输入框 + 按钮，下面列着几条示例任务。
如何验收结果是否正确
对照验收标准逐条看。注意：这时候点「添加」按钮没反应是正常的——我们这一章故意没做功能。别把它当 bug。
如果结果不对，怎么反馈给 AI
比如列表没显示、按钮跑到奇怪的位置，就说：
页面打开了，但输入框和添加按钮挤在了一起，下面的任务列表也没有显示出来。
请调整布局，让标题、输入框+按钮、任务列表从上到下整齐排列。本章小结
你有了第一个真正像 Todo 的页面。记住这一章的取舍：先做外观，后做功能——因为外观最好验收。
12. 在浏览器查看结果
这一章要解决什么问题
「看结果」听起来简单，但初学者常常不知道该看哪里、该怎么看。这一章教你把浏览器变成你的验收台。
这是什么
浏览器（Chrome、Edge、Safari 都行）就是你验收前端结果的主战场。这门课几乎每一步的成果，最终都要回到浏览器里用眼睛确认。
怎么打开你的页面
一般有两种方式，AI 会告诉你用哪种：
- 直接打开文件：双击
index.html，或把它拖进浏览器。 - 用本地服务打开：AI 让你运行一条命令（比如启动一个本地服务器），然后在浏览器访问一个地址，通常是
http://localhost:xxxx。
💡
localhost就是「你自己这台电脑」。http://localhost:5173的意思是「访问我自己电脑上 5173 号门里的服务」。现在知道这个就够了，不必深究。
一个你迟早要认识的小工具：开发者工具
在页面上按 F12（Mac 上是 Option + Command + I），会弹出「开发者工具」。你现在不需要看懂里面的东西，只要知道一件事：它的 Console（控制台）里如果出现红色文字，通常代表有报错。以后页面行为不对时，把红色报错复制给 AI，是最快的求助方式。
如何验收 / 反馈
- 页面能打开、内容正确 → 通过。
- 页面空白或报错 → 按
F12看 Console，把红色报错复制给 AI：「页面打不开，控制台报了这个错：<粘贴>，请修复。」
本章小结
浏览器是你的验收台，localhost 是你自己的电脑，F12 的红色报错是你求助 AI 的线索。会看这三样，你就能验收任何前端结果。
13. 让 AI 修改页面内容
这一章要解决什么问题
页面做出来了，但内容不一定合你意。这一章练一件核心本领：用大白话让 AI 改，然后验收改得对不对。
为什么这件事很重要
因为真实做产品，从来不是一次做对，而是一遍遍调。你越熟练地「提要求 → 看结果 → 再提要求」，产品就越接近你想要的样子。这正是「判断题」的日常。
让 AI 执行的小任务
随便挑几个你想改的地方，比如：
任务目标：
调整 Todo 页面的文字内容。
当前状态：
页面标题是“AI Todo”，示例任务是“买菜”“写周报”。
限制条件：
只改文字内容，不改功能，不改整体布局。
期望结果：
标题改成“我的 AI 待办清单”；
输入框里的提示文字改成“今天要做点什么？”；
示例任务换成“健身 30 分钟”“读 20 页书”“给妈妈打电话”。
验收标准：
1. 上面几处文字都按要求改好了。
2. 其他地方没有被动到。
3. 页面不报错。运行后应该看到什么 & 如何验收
刷新浏览器，逐条核对上面的验收标准。特别注意第 2 条——AI 有时会「顺手」改了你没让它改的地方，所以验收时不光看「改的对不对」，还要看「有没有多改」。
如果结果不对，怎么反馈给 AI
标题和示例任务改对了，但你把“添加”按钮也改成了别的文字，我并没有要求改这个。
请把按钮文字改回“添加”，其余保持你刚才的修改。本章小结
改内容 = 提要求 + 验收。验收时既要看「改对没」，也要看「有没有乱改」。这是和 AI 协作的基本功。
14. 让 AI 优化页面样式
这一章要解决什么问题
内容对了，但可能还很「素」。这一章让页面变好看，同时让你体会一道很实在的选择题。
这是什么
「样式」决定页面的颜值：颜色、间距、圆角、字体大小、按钮好不好看。这些同样交给 AI，你负责说清楚你想要什么感觉。
一道你必须自己拿主意的选择题
💡 页面要「简单清晰」还是「复杂精致」？这没有标准答案，取决于你想要什么。但对一个刚起步的项目，通常先选简单清晰——它更好维护，也更好验收。等产品成型了再考虑精雕细琢。AI 可以给你各种华丽方案，但选哪种，是你的活儿。
让 AI 执行的小任务
任务目标：
美化 Todo 页面的样式。
当前状态：
页面功能布局已经有了，但样式很朴素。
限制条件：
只改样式，不改文字内容，不改功能。
风格要简单清晰、干净现代，不要花哨。
期望结果：
页面居中、留白舒服；输入框和按钮好看协调；
任务列表每一条有清晰的分隔；整体看起来像一个正经的小应用。
验收标准：
1. 页面明显比之前好看、更整洁。
2. 在手机窄屏和电脑宽屏下都不错乱（可以把浏览器窗口拉窄试试）。
3. 文字内容和功能没有被改动。如何验收结果是否正确
- 纯看颜值：比之前顺眼了吗？
- 拉窄浏览器窗口试试：布局会不会挤成一团？（这是在偷偷检查「响应式」，也就是能不能适配手机。）
- 内容和结构没被动。
如果结果不对，怎么反馈给 AI
整体好看多了，但在窄窗口下，输入框超出了屏幕，按钮被挤到看不见。
请让页面在手机窄屏下也能正常显示，元素不要超出屏幕。本章小结
样式也交给 AI，但「要简单还是要精致」这道选择题得你来拍板。验收颜值时，别忘了拉窄窗口测一测手机效果。
15. 如何判断页面是否符合预期
这一章要解决什么问题
前面几章你一直在「验收」，这一章把验收这件事总结成一套你能随身带走的清单。以后每做完一个前端功能，都能拿它来对照。
页面验收通用清单
把这几条记牢，它适用于本课后面几乎每一个页面：
看得见吗（外观）
- 页面能正常打开，不空白、不报错？
- 该有的东西（标题、输入框、按钮、列表）都看得到？
- 布局整齐，不重叠、不溢出屏幕？
动得了吗（交互，做了功能之后才检查）
- 该点的能点吗？点了有预期的反应吗？
- 操作之后，页面有没有按预期变化？
扛得住吗（边界情况）
- 换个窄窗口 / 手机看，会不会乱？
- 输入一些奇怪的东西（空的、超长的），会不会崩？
为什么这套清单值钱
💡 这就是把「判断题」标准化。你不需要懂代码，也能靠这套清单，稳定地判断出「这一步到底做好了没有」。能稳定验收，你就能稳定地指挥 AI 往前走——这是初学者最该练成的能力，没有之一。
本章小结
验收前端 = 看得见 + 动得了 + 扛得住。把这套清单收进口袋，它会陪你走完整门课。
这一部分的收尾
你现在拥有一个好看的、静态的 Todo 页面，更重要的是，你练会了：
- 让 AI 建页面、改内容、调样式；
- 在浏览器里看结果、用
F12找报错； - 用一套通用清单稳定地验收前端。
但你可能也发现了一个「不满意」的地方：点添加按钮，任务加不进去；这些任务是写死的假数据。
这个「不满意」，正是我们下一步的动力。第四部分：变成前端应用，我们请出 Vue，让这个页面真正活过来——能添加、能删除、能标记完成。