企业官网建设流程全解析

项目简介

我们要开发的是一个有AI能力的待办事项列表，AI在其中的作用是帮助我们拆解任务。很多时候，一件事迟迟不做、非得拖延到最后一刻才开始，是因为我们不知道如何下手，行动力被不确定性阻断，通过AI把要做的事情拆解为具体的、可执行的小事，就可以大大提升执行效率。

核心功能

1. 基础功能:添加、完成、删除任务
2. AI能力:输入一个宽泛任务(如"准备下周的产品发布")，AI自动拆解成3-5个可执行的小步骤

技术栈

1. 前端:React+Tailwind CSS(Al写UI)
2. 后端:Next.jsAPIRoutes(AI写逻辑)
3. 数据库:Supabase(云端，零配置)
4. 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 拆解的子任务';

建表步骤：

1. 打开 Supabase 控制台 (https://supabase.com/)

2. 创建一个新项目(免费额度足够测试)

github登录授权后，首先要配置个人机构信息啥的，我是个人使用，平台默认创建机构名称；然后第二步 创建新项目，输入数据库密码等，完成后直接跳转平台页面

3. 进入SQL Editor，复制粘贴上面的SQL，点击运行

4. 数据库就绪!点击侧边栏的Database 预览表结构

2. 后端API开发

生成CURD接口的提示词：

使用 Next.js API Routes 和 Supabase，帮我实现以下接口：

1. GET /api/tasks - 获取所有任务（按创建时间倒序）

2. POST /api/tasks - 创建新任务

3. PATCH /api/tasks/[id] - 更新任务状态

4. DELETE /api/tasks/[id] - 删除任务

请包含错误处理和类型检查。

提示词喂给Cursor后，AI一般会做这些事情：

项目创建完成后，需要做以下工作：

1. 对AI生成的代码补充配置信息

补充SUPABASE_URL和SUPABASE_SERVICE_ROLE_KEY的配置

首先参照.env.example配置文件，创建.env.local

配置如下：

service_role_key的获取为 ProjectSettings——APIKeys——Legacy anon, service_role API keys——service_role secret——点击“Reveal”查看并复制密钥

2. 对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 接口，功能是：

1. 接收一个任务名

2. 调用 DeepSeek API（base url 是 https://api.deepseek.com ， api key 的环境变量是 DEEPSEEK_API_KEY），让 AI 把这个任务拆解成 3-5 个可执行的小步骤

3. 把拆解后的子任务存入数据库，parent_id 设置为原任务 ID

4. 返回拆解结果

在上面的提示词里，我们指定了接口名、要使用的库、模型和参数，并且确定了任务，等待一段时间后，AI就会生成接口。

生成的文件在 pages/api/breakdown.ts，接口核心代码在 lib/deepseek.ts

核心代码：

让AI启动并测试breakdown接口，提示词：启动项目并测试breakdown接口

AI测试结果通过，且数据库已存在数据

到这里，我们这个项目最核心的接口部分就完成了。

Review 这部分主要关注:

• Prompt工程：提示词定义的Al的角色和输出格式
• 结果解析是否正：把AI返回的文本按行拆分，去掉编号
• 错误处理：捕获API调用失败的情况

4. 前端页面开发

生成前端页面提示词：

在当前项目里创建前端页面，使用 React + Tailwind CSS，创建一个待办事项页面：

1. 顶部有输入框和"添加"按钮

2. 任务列表展示所有任务，每个任务有：

- 复选框（点击切换完成状态）

- 任务标题（已完成的显示删除线）

- "拆解"按钮（调用 AI 拆解任务）

- "删除"按钮

3. 子任务缩进显示，表示层级关系

4. 整体样式使用复古手账风格，有纸质纹理和模拟手写字体，每个任务前是手绘复选框，可用图钉或胶带装饰完成的任务。

请包含完整的状态管理和 API 调用逻辑。

等待AI页面任务创建完成，执行npm run dev

web页面：http://localhost:3000

新增“准备一次公司团建”的任务

添加任务

调用AI拆解任务

点击待办事项里的勾选框，会调用接口修改状态为完成

至此该项目完全结束，通过这个的实战项目，你完成了:

• 数据库设计(Supabase)
• 后端 API 开发(Next.js)
• 前端页面开发(使用vO快速验证，React+Tailwind)
• AI能力集成(调用DeepSeek API)

完整的产品闭环

源码：https://github.com/liwan930105/AITodo