来源：https://github.com/datawhalechina/vibe-vibe

本步目标：确认第一轮完成，准备进入下一轮

第一轮完成检查清单

在进入下一轮之前，请确认以下内容：

必须项

页面能正常显示：在浏览器中打开，没有空白或报错
标题存在：能看到"我的待办清单"（或你自定义的标题）
输入框存在：有一个可以输入文字的输入框
添加按钮存在：有一个"添加"按钮
任务列表存在：能看到任务列表区域（即使是假数据）
操作按钮存在：每个任务有"完成"和"删除"按钮

加分项

整体样式你基本满意
鼠标悬停在按钮上有视觉反馈
在手机尺寸下也能正常显示

如何测试响应式效果

想知道页面在手机上看起来怎么样？不需要真的用手机，浏览器可以模拟：

1. 在浏览器中打开你的页面
2. 按 F12 打开开发者工具
3. 点击工具栏左上角的"设备切换"图标（长得像手机和平板）
4. 选择一个手机型号（如 iPhone 12）或者直接拖动页面宽度

检查这些情况：

页面内容没有超出屏幕
文字大小在手机上也能看清
按钮在手机上也容易点击
输入框宽度适合手机屏幕

预期效果参考

此时你的页面应该看起来类似这样：

[配图建议]
画面内容：完成第一轮后的待办清单页面截图，展示桌面和手机两种视图
Prompt: clean mockup of a simple todo list webpage, showing both desktop and mobile views, minimalist design, soft blue accent colors, friendly and approachable style, white background, high quality, 8k --ar 16:9

此时的"正常"状态

现在你的页面是这样的状态：

这些都是正常的——我们目前只完成了"外观"，还没有添加"功能"。

🎉 第一轮完成！

恭喜你！你已经完成了待办清单的第一轮开发。

现在你拥有了：

• ✅ 一个可以在浏览器中打开的 HTML 页面
• ✅ 包含标题、输入框、按钮的完整界面
• ✅ 一个任务列表区域
• ✅ 基本美观的视觉设计

这是一个重要的里程碑——你已经从"什么都没有"变成了"能看到东西"。

回顾：你用到了什么

在这一轮中，你实践了：

这就是 Vibe Coding 的工作流程：想清楚 → 说明白 → 让 AI 做 → 调整优化。

下一步预告

页面有了，但还只是一个"空壳"——点击按钮没有反应，刷新页面数据就没了。

下一轮，我们要让它"活"起来：

• 点击"添加"按钮，能把新任务加到列表
• 点击"完成"按钮，任务显示为已完成状态
• 点击"删除"按钮，任务从列表中消失

准备好了吗？

→ 4.2.5 完整 Prompt 对话记录（可选阅读）

→ 4.3 第二轮：实现核心功能