5.4.3 功能扩展：让 AI 帮你添加新功能
经过本节学习，你将掌握：
- 常见的功能扩展方向和难度评估
- 用第三章学到的框架写功能扩展 Prompt
- 添加新功能的安全流程
- 一个完整的功能添加实战案例
功能扩展方向参考
收集完反馈后，你可能想给待办清单加一些新功能。
下面是一些常见的扩展方向，按难度分类：
基础级功能（推荐先尝试）
| 功能 | 难度 | 说明 |
|---|---|---|
| 任务分类标签 | ⭐⭐ | 给任务打上"工作"、"生活"、"学习"等标签，可以按标签筛选 |
| 优先级标记 | ⭐⭐ | 高/中/低优先级，用不同颜色区分 |
| 搜索功能 | ⭐⭐ | 任务多了之后能快速找到 |
| 深色模式 | ⭐⭐ | 晚上看着不刺眼 |
进阶级功能（有一定挑战）
| 功能 | 难度 | 说明 |
|---|---|---|
| 截止日期提醒 | ⭐⭐⭐ | 设置截止时间，过期任务标红 |
| 任务排序 | ⭐⭐⭐ | 可以拖拽调整任务顺序 |
| 数据导出 | ⭐⭐⭐ | 把任务列表导出成文件 |
| 简单统计 | ⭐⭐⭐ | 显示"本周完成了多少任务" |
建议从基础级功能开始。成功添加一两个之后，再挑战进阶级。
添加新功能的安全流程
在动手之前，有一个重要原则：
黄金法则
每次添加新功能前，先保存当前版本。
按照这个流程操作：
1. 确认当前版本能正常运行
↓
2. 用 GitHub Desktop 提交一次（Commit）
↓
3. 写 Prompt 让 AI 添加新功能
↓
4. 测试新功能
↓
5. 如果成功 → 再 Commit 一次
如果失败 → 回滚到上一版这样，即使新功能改崩了，你也能随时恢复。（这就是 5.1 节学的版本管理的用处）
用 S.C.A.F.F. 框架写功能扩展 Prompt
还记得第三章的 S.C.A.F.F. 框架吗？添加新功能时同样适用。
框架回顾
| 字母 | 含义 | 说明 |
|---|---|---|
| S | Situation（情境） | 当前项目是什么样的 |
| C | Challenge（挑战） | 我想添加什么功能 |
| A | Ask（请求） | 具体需要 AI 做什么 |
| F | Format（格式） | 希望得到什么样的输出 |
| F | Filter（过滤） | 有什么限制条件 |
示例：添加分类标签功能
【情境】
我有一个待办清单项目，目前实现了：
- 添加任务
- 删除任务
- 标记任务完成
- 使用 localStorage 保存数据
技术栈：HTML + CSS + JavaScript（纯前端，没有后端）
【挑战】
我想给任务添加"分类标签"功能。用户可以：
1. 创建任务时选择一个分类（工作/生活/学习）
2. 按分类筛选任务
3. 每个分类用不同的颜色显示
【请求】
请帮我修改代码实现这个功能。
【格式】
1. 先说明需要修改哪些部分
2. 给出修改后的完整代码
3. 说明如何测试这个功能
【限制】
- 保持现有功能不变
- 使用现有的代码风格
- 分类数据也要保存到 localStorage各功能的 Prompt 模板
这里提供几个常用功能的 Prompt 模板，你可以直接复制使用，只需要把 [方括号里的内容] 替换成你的实际情况。
优先级标记
我的待办清单项目需要添加"优先级"功能：
- 每个任务可以设置优先级：高/中/低
- 高优先级用红色标记，中优先级用黄色，低优先级用灰色
- 默认优先级是"中"
- 可以按优先级排序显示（高的在上面）
当前项目技术栈：[HTML + CSS + JavaScript / 其他]
数据存储方式：[localStorage / 其他]
请修改代码实现这个功能，保持现有功能正常。搜索功能
我的待办清单需要添加搜索功能：
- 在任务列表上方添加一个搜索框
- 输入关键词时，实时筛选包含该关键词的任务
- 搜索框为空时显示所有任务
- 搜索不区分大小写
当前项目技术栈：[你的技术栈]
请给出实现代码。深色模式
我的待办清单需要添加深色模式切换功能：
- 在页面右上角添加一个切换按钮（太阳/月亮图标）
- 点击可以在浅色/深色模式之间切换
- 记住用户的选择（下次打开还是同样的模式）
当前的颜色方案：
- 背景色：[白色]
- 文字颜色：[黑色]
- 主题色：[蓝色]
请给出实现代码，包括深色模式的配色建议。截止日期
我的待办清单需要添加截止日期功能：
- 创建任务时可以选择截止日期（可选，不是必填）
- 任务卡片上显示截止日期
- 已过期的任务用红色高亮显示
- 今天到期的任务用黄色高亮显示
当前项目技术栈：[你的技术栈]
数据存储方式：[localStorage / 其他]
请给出实现代码。实战案例：添加分类标签
下面是一个完整的对话记录，展示如何给待办清单添加分类标签功能。
第一轮：说明需求
你发送的 Prompt（使用上面的 S.C.A.F.F. 模板）后，AI 会返回修改方案和代码。
第二轮：测试发现问题
测试后，你可能发现问题：
分类功能基本可以用了，但有个问题：
切换分类筛选时，如果当前分类下没有任务，页面是空白的，用户会困惑。
请添加一个提示，当筛选结果为空时显示"暂无任务"。第三轮：微调细节
现在"暂无任务"的提示可以显示了，但文字颜色太浅，不太明显。
请把提示文字改成灰色，并加粗显示。这就是迭代的过程：做一版 → 发现问题 → 再改进。
测试新功能的检查清单
每次添加新功能后，用这个清单验证：
- [ ] 新功能按预期工作
- [ ] 原有功能（添加、删除、完成任务）仍然正常
- [ ] 刷新页面后数据没有丢失
- [ ] 在手机浏览器上也能正常显示
- [ ] 没有明显的报错（打开浏览器控制台检查）
全部通过后，记得用 GitHub Desktop 提交一次，记录这个里程碑。
遇到问题时
如果 AI 给的代码不能正常工作，可以这样反馈：
你给的代码运行后出现了问题：
【问题描述】
点击分类筛选按钮后，页面变成空白，所有任务都不显示了。
【错误信息】
打开浏览器控制台，看到这个报错：
Uncaught TypeError: Cannot read property 'filter' of undefined
【期望行为】
点击"工作"分类，应该只显示标记为"工作"的任务。
请帮我找出问题并修复。提供具体的问题描述和错误信息，AI 更容易帮你解决。
本节要点
- 从基础级功能开始，成功后再挑战进阶级
- 每次改代码前先 Commit，改崩了能恢复
- 用 S.C.A.F.F. 框架写功能扩展 Prompt
- 添加功能是一个迭代过程，一轮不行就多轮
- 测试通过后记得再 Commit 一次
小步前进
不要一次性加太多功能。
每次只加一个，测试通过后再加下一个。
这样出问题时，你能很快定位是哪个改动导致的。