项目简介
我们要开发的是一个有AI能力的待办事项列表，AI在其中的作用是帮助我们拆解任务。很多时候，一件事迟迟不做、非得拖延到最后一刻才开始，是因为我们不知道如何下手，行动力被不确定性阻断，通过AI把要做的事情拆解为具体的、可执行的小事，就可以大大提升执行效率。
核心功能
- 基础功能:添加、完成、删除任务
- AI能力:输入一个宽泛任务(如"准备下周的产品发布")，AI自动拆解成3-5个可执行的小步骤
技术栈
- 前端:React+Tailwind CSS(Al写UI)
- 后端:Next.jsAPIRoutes(AI写逻辑)
- 数据库:Supabase(云端，零配置)
- AI集成:DeepSeek
开发工具建议使用Cursor 或者 antigravity.google..，用TRAE的话建议 TRAE 国际版，模型优先用 Gemini 和 Claude。
1. 数据库设计
创建数据表结构的提示词：
我要做一个待办事项应用，需要设计一个 tasks 表。
每个任务包括：
id（主键）
title（任务标题）
description（任务描述，可选）
status（状态：pending 或 completed）
parent_id（父任务 ID，用于关联 AI 拆解的子任务）
created_at（创建时间）
请帮我生成 Supabase 的建表 SQL。
AI生成的数据表脚本：
-- 任务状态枚举
CREATE TYPE task_status AS ENUM ('pending', 'completed');
-- 任务表
CREATE TABLE tasks (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
title TEXT NOT NULL,
description TEXT,
status task_status NOT NULL DEFAULT 'pending',
parent_id UUID REFERENCES tasks (id) ON DELETE CASCADE,
created_at TIMESTAMPTZ NOT NULL DEFAULT now()
);
-- 索引
CREATE INDEX idx_tasks_status ON tasks (status);
CREATE INDEX idx_tasks_parent_id ON tasks (parent_id);
CREATE INDEX idx_tasks_created_at ON tasks (created_at DESC);
-- 注释（可选）
COMMENT ON TABLE tasks IS '待办事项表';
COMMENT ON COLUMN tasks.parent_id IS '父任务 ID，用于关联 AI 拆解的子任务';
建表步骤：
-
打开 Supabase 控制台 (https://supabase.com/)
-
创建一个新项目(免费额度足够测试)
github登录授权后，首先要配置个人机构信息啥的，我是个人使用，平台默认创建机构名称；然后第二步 创建新项目，输入数据库密码等，完成后直接跳转平台页面
- 进入SQL Editor，复制粘贴上面的SQL，点击运行
- 数据库就绪!点击侧边栏的Database 预览表结构
2. 后端A PI 开发
生成CURD接口的提示词：
使用 Next.js API Routes 和 Supabase，帮我实现以下接口：
GET /api/tasks - 获取所有任务（按创建时间倒序）
POST /api/tasks - 创建新任务
PATCH /api/tasks/id - 更新任务状态
DELETE /api/tasks/id - 删除任务
请包含错误处理和类型检查。
提示词喂给Cursor后，AI一般会做这些事情：
项目创建完成后，需要做以下工作：
- 对AI生成的代码补充配置信息
补充 SUPABASE_URL和SUPABASE_SERVICE_ROLE_KEY的配置
首先参照.env.example配置文件，创建.env.local
配置如下：
service_role_key 的获取为 Project Settings------API Keys------Legacy anon, service_role API keys------service_role secret------点击"Reveal"查看并复制密钥
- 对AI生成的代码进行review
- 先看依赖库
- 然后看类型定义字段是否完整
- 然后看接口是否齐全、是否有日志、异常处理是否完善4.然后看配置有没有写死，有什么信息需要改成灵活配置
首先看下package.json 确认核心依赖是否添加:
然后看下定义的类型是否正确（lib/task-types.ts）：
类型文件是功能的根本，如果类型文件里少了字段，那逻辑里必然会缺失，所以首先要检查这里。
然后看接口文件（pages/api/tasks.ts）：
Review 接口主要注意这些:
- 越权:用户A能不能删B的任务(没验数据权限)
- 数据泄露:返回结果是否暴露了密码等敏感字段
- 错误处理:异常case里有没有返回友好、明确的错误信息
AI生成的增删改查常漏这些，能跑但埋雷。
执行npm install
最后 让AI帮我们测试接口
提示词 ：启动项目并进行代码review
cursor 会自动帮我们验证接口及修复问题的建议，进行多次修复及验证，最终通过验证
此时执行 npm run dev
3. AI能力集成
这是整个项目的魔法时刻一-让AI自动拆解任务。
模型我们使用DeepSeek，框架使用OpenAI的JS库，这个库提供了从TypeScript或JavaScript 请求OpenAIRESTAPI的接口方法，同时也支持我们修改请求地址和模型。使用的时候需要提供两个配置信息:baseurl 和api key。
.env.example和.env.local 中配置DEEPSEEK_API_KEY
集成AI拆解功能提示词：
使用 Node.js 库实现 /api/tasks/breakdown 接口，功能是：
接收一个任务名
调用 DeepSeek API（base url 是 https://api.deepseek.com ， api key 的环境变量是 DEEPSEEK_API_KEY），让 AI 把这个任务拆解成 3-5 个可执行的小步骤
把拆解后的子任务存入数据库，parent_id 设置为原任务 ID
返回拆解结果
在上面的提示词里，我们指定了接口名、要使用的库、模型和参数，并且确定了任务，等待一段时间后，AI就会生成接口。
生成的文件在 pages/api/breakdown.ts，接口核心代码在 lib/deepseek.ts
核心代码：
让AI启动并测试breakdown接口，提示词：启动项目并测试breakdown接口
AI测试结果通过，且数据库已存在数据
到这里，我们这个项目最核心的接口部分就完成了。
Review 这部分主要关注:
- Prompt工程：提示词定义的Al的角色和输出格式
- 结果解析是否正：把AI返回的文本按行拆分，去掉编号
- 错误处理：捕获API调用失败的情况
4. 前端页面开发
生成前端页面提示词：
在当前项目里创建前端页面，使用 React + Tailwind CSS，创建一个待办事项页面：
顶部有输入框和"添加"按钮
任务列表展示所有任务，每个任务有：
复选框（点击切换完成状态）
任务标题（已完成的显示删除线）
"拆解"按钮（调用 AI 拆解任务）
"删除"按钮
子任务缩进显示，表示层级关系
整体样式使用复古手账风格，有纸质纹理和模拟手写字体，每个任务前是手绘复选框，可用图钉或胶带装饰完成的任务。
请包含完整的状态管理和 API 调用逻辑。
等待AI页面任务创建完成，执行npm run dev
web页面：http://localhost:3000
新增"准备一次公司团建"的任务
添加任务
调用AI拆解任务
点击待办事项里的勾选框，会调用接口修改状态为完成
至此该项目完全结束，通过这个的实战项目，你完成了:
- 数据库设计(Supabase)
- 后端 API 开发(Next.js)
- 前端页面开发(使用vO快速验证，React+Tailwind)
- AI能力集成(调用DeepSeek API)
完整的产品闭环