从现在开始，你不再只是读者。你要动手了。

我们要做什么

一个待办事项小工具。功能很简单：

• 上面有个输入框，输入要做的事
• 点"添加"按钮，事情出现在下面的列表里
• 点某一条，它会划掉（表示完成）
• 再点一次，恢复

它长这样：

┌─────────────────────────────────────┐
│  我的待办事项                        │
│  ┌──────────────────┐ ┌──────┐     │
│  │ 买菜              │ │ 添加 │     │
│  └──────────────────┘ └──────┘     │
│                                     │
│  ✅ 买牛奶                           │
│  ☐ 回复邮件                          │
│  ☐ 遛狗                              │
└─────────────────────────────────────┘

做出来之后，它会是一个 .html 文件，双击就能在浏览器里用。

第一步：打开 AI 工具

打开你在第 4 章选的 AI 工具（ChatGPT / Claude / Kimi / DeepSeek），新建一个对话。

第二步：把下面的文字复制粘贴发给 AI

以下是一个可以直接用的提示词（prompt）。复制方框里的全部内容：

请你帮我写一个完整的待办事项网页。

功能要求：
1. 顶部有一个输入框和一个"添加"按钮
2. 在输入框里打字，点"添加"，事情就出现在下面的列表里
3. 每条待办事项前面有一个勾选框
4. 勾选之后，这条文字中间出现一条横线（表示已完成）
5. 页面看起来干净整洁，不要太花哨

技术要求：
- 所有代码写在一个 HTML 文件里（HTML + CSS + JavaScript）
- 数据不需要保存到服务器，存浏览器本地就可以（localStorage）
- 刷新页面后之前添加的事项还在

请直接给我完整的代码，不要省略，不要写"这里省略"之类的。

第三步：看 AI 怎么回复

AI 会给你一大段代码，大概 50-80 行。它通常会这样回复：

好的，这是一个完整的待办事项网页：

...（很多代码）...

第四步：保存代码

1. 把 AI 给的全部代码完整复制（从 到 ）
2. 打开电脑上的记事本（Windows）或文本编辑（Mac）
3. 粘贴进去
4. 保存为 待办事项.html

• Windows：文件 → 另存为 → 文件名写"待办事项.html"，编码选 UTF-8
• Mac：格式 → 制作纯文本 → 保存，文件名"待办事项.html"

一个重要细节：保存时确保文件后缀是 .html 而不是 .html.txt。Windows 用户需要在"查看"里勾选"文件扩展名"后再确认。

第五步：打开看看

找到刚才保存的 待办事项.html，双击。

浏览器会打开，你应该能看到一个可以用的待办事项工具。

试着：

• 输入"测试"点添加
• 勾选它看横线效果
• 刷新页面看数据还在不在

如果不行怎么办

可能遇到的问题和解决方法：

问题 1：打开是空白页

→ 代码没有复制全。回到 AI 对话，确认把代码从头到尾都复制了。

问题 2：页面看起来乱乱的

→ 把看到的乱象描述给 AI："页面打开了，但输入框和按钮挤在一起，帮我分开"，它会给你修正后的代码。

问题 3：添加按钮点了没反应

→ 把 AI 给你的代码和这个描述一起发给它："我复制了你的代码，但点击添加按钮没有反应，请检查并修复"

问题 4：AI 给的代码不全，中间有省略号

→ 回复 AI："请给我完整代码，不要用省略号省略任何部分"

你已经做到了什么

就在这一章里，你：

• 用中文描述了一个需求
• AI 帮你写了 50+ 行的代码
• 你把代码保存成了可以在浏览器里运行的程序
• 你拥有了一个自己"做"出来的小工具

这个流程——描述需求 → AI 写代码 → 复制保存 → 打开用——就是 AI 编程的核心循环。后面所有章节，都是在这个循环上做扩展。

本章小结