---
title: "4.2.4 阶段性成果检查"
order: 5
---


![04-practice-0-to-1_4.2-build-page_4.2.4-checkpoint.png](/images/Basic/04-practice-0-to-1_4.2-build-page_4.2.4-checkpoint.png)
# 4.2.4 阶段性成果检查

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

## 第一轮完成检查清单

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

### 必须项

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

### 加分项

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

## 如何测试响应式效果

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

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

检查这些情况：

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

::: tip 小技巧
如果手机上显示有问题，回到 4.2.3 节，使用"响应式适配类"的调整 Prompt。
:::

## 预期效果参考

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

> **[配图建议]**
> 画面内容：完成第一轮后的待办清单页面截图，展示桌面和手机两种视图
> 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 页面
- ✅ 包含标题、输入框、按钮的完整界面
- ✅ 一个任务列表区域
- ✅ 基本美观的视觉设计

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

## 回顾：你用到了什么

在这一轮中，你实践了：

| 来源 | 用到的内容 |
|-----|-----------|
| 第二章 | 项目启动卡作为 Prompt 的素材 |
| 第三章 | S.C.A.F.F. 框架组织 Prompt |
| 第三章 | 迭代对话调整样式 |

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

## 下一步预告

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

**下一轮，我们要让它"活"起来**：
- 点击"添加"按钮，能把新任务加到列表
- 点击"完成"按钮，任务显示为已完成状态
- 点击"删除"按钮，任务从列表中消失

准备好了吗？

→ [4.2.5 完整 Prompt 对话记录](./4.2.5-prompt-log.md)（可选阅读）

→ [4.3 第二轮：实现核心功能](../4.3-core-features/)