用 AI Agent 搭建一个完整的 Web 应用：从需求到上线

在 Cursor 的 Chat 面板输入：

我想做一个待办事项 Web 应用，需求如下：

1. 用户可以添加、删除、标记完成待办事项
2. 支持分类（工作、生活、学习）
3. 数据保存在浏览器 localStorage
4. 响应式设计，手机也能用
5. 技术栈：HTML + CSS + 原生 JavaScript

请帮我生成完整的项目结构和代码。

Cursor 会根据你的需求自动生成：

📁 todo-app/
├── index.html      ← 主页面
├── styles.css      ← 样式文件
├── app.js          ← 核心逻辑
└── README.md       ← 项目说明

使用 Composer 模式（Ctrl+I），Cursor 会同时生成所有文件。你只需要审阅和确认。

// Cursor 生成的核心代码片段示例
function addTodo(text, category) {
  const todo = {
    id: Date.now(),
    text,
    category,
    completed: false,
    createdAt: new Date().toISOString()
  };
  todos.push(todo);
  saveTodos();
  renderTodos();
}

直接用浏览器打开 index.html 即可运行。如果遇到问题：

你: 添加按钮点击后没有反应，控制台报错
    "addTodo is not defined"

Cursor: 这个问题是因为 app.js 中的函数作用域问题。
我把函数挂载到 window 对象上，或者改用
addEventListener 来绑定事件。修复如下...

你: 当前样式太朴素了，帮我优化：
1. 卡片式布局，每个待办一个卡片
2. 完成的待办有删除线效果
3. 添加一个深色模式切换
4. 移动端适配

Cursor: 好的，我重构了 CSS 部分...

AI 会理解你的审美需求，生成现代风格的 UI。不满意就继续迭代："圆角再大一点"、"间距再宽松一点"。

让你的待办应用变得"更聪明"——接入 OpenClaw 实现智能分类：

你: 帮我添加一个功能：用户输入待办内容后，
自动用 AI 判断应该属于哪个分类（工作/生活/学习），
并自动填充分类。

实现方式：调用 OpenClaw API，
传入待办内容，返回分类建议。

// AI 生成的智能分类代码
async function smartClassify(text) {
  const response = await fetch('http://localhost:3000/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      messages: [{
        role: 'user',
        content: `请将以下待办事项分类为"工作"、"生活"或"学习"，只返回分类名称：\n${text}`
      }]
    })
  });
  const data = await response.json();
  return data.content.trim();
}

1. 安装 Wrangler CLI：npm install -g wrangler
2. 登录 Cloudflare：wrangler login
3. 部署：wrangler pages deploy . --project-name=my-todo
4. 获得线上地址：https://my-todo.pages.dev

上线后想加新功能？继续跟 AI 对话：

你: 帮我添加以下功能：
1. 待办事项支持设置截止日期
2. 过期的待办显示红色警告
3. 添加一个统计面板，显示完成率

Cursor: 好的，我来逐步实现...

数据多了需要后端？用 Cursor 生成一个 Node.js + SQLite 后端：

你: 帮我把 localStorage 方案迁移到后端：
- 技术栈：Node.js + Express + SQLite
- RESTful API
- 支持用户认证（简单的 JWT）

Cursor: 好的，我来搭建后端服务...

从静态页面到全栈应用，全程 AI 辅助，你只需要知道"我想要什么"。