https://mp.weixin.qq.com/s/a3zppfibLkg-pAAf1aIegg
示例：
创建用户注册功能
创建一个用户注册页面，包含用户名（长度 3-20 个字符，允许字母、数字和下划线）、邮箱（需要符合邮箱格式验证）、密码（长度至少 8 位，包含大小写字母和数字）三个必填字段，以及一个“记住我”的可选复选框。
点击“注册”按钮后，需要验证输入是否合法，如果合法则将用户信息保存到数据库，并跳转到用户个人中心页面。如果验证失败，需要在相应的输入框下方显示错误提示信息。
任务：实现一个函数，用于计算两个整数的和。
清晰的输入：函数接收两个整数作为参数。
清晰的输出：函数返回这两个整数的和。
2，将大任务分解为小任务
功能模块化： 将一个大的功能需求拆分成若干个更小的、相互独立或有明确依赖关系的功能模块。
示例：
对于“用户注册功能”，可以分解为以下小任务：
创建用户注册页面的 HTML 结构。 编写 CSS 样式美化注册页面。
实现前端 JavaScript 验证用户名、邮箱和密码的格式。
编写后端 API 接口接收注册请求。
实现后端逻辑验证用户名和邮箱是否已存在。
实现后端逻辑将用户信息加密后保存到数据库。
实现注册成功后的跳转逻辑。 处理注册失败的错误返回。
根据依赖关系排序：确定这些小任务之间的先后顺序和依赖关系。例如，后端 API 接口的定义通常需要在前端页面开发之前进行规划。
示例：
在上面的注册功能中，“编写后端 API 接口”可能需要在“实现前端 JavaScript 验证”之前确定接口的请求参数和返回格式。
3，逐步执行和验证
一次关注一个小任务：不要一次性要求 AI 完成所有分解后的任务。选择一个小的、可独立完成的任务，清晰地告诉 AI 你的意图和相关的上下文信息。
先要求 AI “创建用户注册页面的 HTML 结构，包含用户名、邮箱、密码输入框和一个注册按钮，并添加必要的 id 属性以便后续操作。
及时验证 AI 的输出：在 AI 完成一个小任务后，立即检查生成的代码是否符合预期。运行代码，查看效果，进行简单的测试。
示例：
在 AI 生成注册页面的 HTML 后，在浏览器中打开，确认输入框和按钮是否正确显示。
根据验证结果进行调整和迭代：如果 AI 的输出不符合预期，清晰地指出问题所在，并要求 AI 进行修改。
示例：
如果发现注册按钮的文本不对，明确告诉 AI “注册按钮的文本应该是 ‘注册’ 而不是 ‘提交’。”
4，清晰地提供上下文信息：
告知 AI 项目的整体架构和技术栈：
让 AI 了解你的项目是使用什么框架（例如，React, Vue, Angular, Spring, Django, Flask 等）、使用什么数据库、代码的整体组织结构是怎样的。
引用已有的代码：
如果 AI 需要修改或扩展已有的代码，明确指出相关的文件和代码片段，并解释你的意图。
示例：
请修改 src/components/user/UserProfile.js 文件中的 displayUserInfo 函数，从后端 API /api/users/{userId} 获取用户头像 URL，并在页面上显示头像。
说明代码之间的关联：
如果当前任务依赖于其他模块的代码，向 AI 解释它们之间的关系和数据流。
在用户成功注册后，需要调用 src/utils/auth.js 文件中的 setAuthToken 函数来保存用户的登录状态。
请使用 React 来实现这个组件，确保在用户输入时进行实时验证，并且验证失败时不要阻止用户继续输入，只是在旁边显示错误信息。
开发一个简单的待办事项列表功能
明确需求：
创建一个简单的网页，用户可以输入待办事项并添加到列表中，可以勾选已完成的事项，并可以删除事项。
分解任务：
创建包含输入框和“添加”按钮的 HTML 结构。 编写 CSS 样式美化页面。 使用 JavaScript 实现添加事项的功能：监听“添加”按钮的点击事件。 获取输入框中的文本。 创建一个新的列表项。 将文本添加到列表项中。 将列表项添加到待办事项列表中。 清空输入框。
使用 JavaScript 实现标记完成的功能：为每个列表项添加一个复选框。 监听复选框的点击事件。 切换列表项的“完成”状态（例如，添加/移除 CSS 类）。 使用 JavaScript 实现删除功能：为每个列表项添加一个“删除”按钮。 监听“删除”按钮的点击事件。 从列表中移除对应的列表项。
逐步执行：
先让 AI 生成 HTML 结构。 然后让 AI 添加基本的 CSS 样式。 接着让 AI 实现添加事项的 JavaScript 代码，并进行测试。 再实现标记完成和删除功能的 JavaScript 代码，并逐步测试。
提供上下文：
告知 AI 使用 HTML, CSS 和纯 JavaScript 实现，不需要使用任何框架。
清晰指令：
例如，对于添加功能，指令可以是：“请编写 JavaScript 代码，当用户在输入框中输入内容并点击“添加”按钮后，将输入框中的文本作为一个新的
- 列表中，并清空输入框。” **记录进度：** 在 task.md 文件中记录每个小任务的完成情况。
一：拉一份任务清单（renwu.txt）：
1. [ ] 写 HTML：输入框、按钮、列表
2. [ ] 写 JS：添加事项
3. [ ] 写 JS：删除事项
二：指令 1（任务 1）：
做 renwu.txt 的任务 1，写 HTML：一个输入框（id=”todoInput”）、一个“添加”按钮、一个空列表（id=”todoList”）。输出到 index.html。
三：指令 2（任务 2）：
做 renwu.txt 的任务 2，写 JS：点击按钮，把输入框（id=”todoInput”）的文本加到列表（id=”todoList”）作为
输出到 script.js。
四：如果出错：
你没检查空输入，空文本也能加。改 script.js，加 text.trim() 判断。