前面的文章中，我们了解了什么是 AI 编程。也认识了常见的 AI 编程工具。

这一篇不再停留在概念层面而是通过一个完整的小案例，体验一次真实的 AI 编程流程：

这个案例虽然简单。但包含了日常开发中比较典型的步骤：

• 分析需求
• 拆分功能
• 生成代码
• 运行代码
• 发现问题
• 修改代码
• 验证结果

掌握这套流程后后面无论是开发表单、后台页面还是实现接口功能，都可以使用差不多方法。

一、先明确我们要做什么

痛点：很多开发者只给 AI 一句 “帮我写一个待办事项应用”。导致 AI 不知道技术选型、功能细节和运行方式，最终交付的代码往往需要大量返工。老实说，

在让 AI 写代码之前。不能只说一句：

帮我写一个待办事项应用。

这个需求过于简单，AI 不知道我们具体需要什么功能。可能会出现以下问题：

• 使用什么技术实现不明确
• 页面需要哪些功能不明确
• 数据是否需要保存不明确
• 是否需要处理空输入不明确
• 代码应该放在哪个文件中不明确
• 最终运行方式不明确

在开始之前，我们先把需求整理清楚。本次要实现的待办事项清单包含以下功能：

技术要求：

• 使用 HTML、CSS 和 JavaScript
• 不使用前端框架或第三方库

需求越明确，AI 生成的结果越接近我们真正想要的。说起来，

二、先让 AI 拆解需求

Pain Point: 直接让 AI 输出完整代码。一旦方向错了需要大幅度重写，成本高。

A 更稳妥的方式是先让 AI 分析需求，确认实现思路后再让它生成代码。可以使用下面这段提示词：

我想使用原生 HTML、CSS 和 JavaScript，开发一个简单的待办事项清单。再看功能要求，- 使用者可以输入任务并添加
- 任务显示在列表中
- 每条任务前有一个复选框。勾选后显示完成状态
- 每条任务都可以删除
- 使用 localStorage 保存数据
- 输入为空时不能添加
请先不要生成完整代码，先帮我拆分功能模块，说明每个模块的实现思路，并列出需要注意的边界情况。

A 合理的 AI 回复通常会把需求拆分成以下模块：

1. 页面结构模块：inputbutton 与 ul 列表。
3. 元素并插入列表。
completed 状态并更新 UI。localStorage 在页面刷新间保持数据。其实，

This step lets us verify wher AI’s understanding matches our expectations before any code is written.

三、再让 AI 生成代码

If functional breakdown looks correct。give next prompt:

请根据刚才的功能拆解，生成一个完整可运行的 index.html 文件。具体要求的观点是，- 使用原生 HTML、CSS 和 JavaScript
- 不使用任何第三方库
- 所有代码放在同一个 HTML 文件中
- 页面布局简洁。适合初学者阅读
- JavaScript 使用清晰的函数拆分，并添加必要注释
- 使用 localStorage 保存任务
- 添加任务时校验输入内容，不允许空白
- 删除任务前无需弹窗确认
输出完整代码，并说明运行方法。

The added constraints help keep result aligned with our needs.

四、完整可运行代码示例

The following code can be saved as **index.html** and opened directly in a browser.

添加任务

五、如何运行这段代码

1. Create a file named alert.

   Pain Point Recap:

   .
   > > > > >