你不需要写一行代码。本教程演示如何只通过跟 Cursor 的 AI Agent 对话��从零搭建一个能在浏览器里跑的 Todo 应用——包含添加任务、标记完成、删除、筛选功能。适合完全没写过代码的初学者，也适合想体验 Cursor Agent 模式的开发者。

Cursor AI Agent 模式下与 AI 对话创建项目
Cursor AI Agent 模式下与 AI 对话创建项目

准备工作

  • 下载并安装 Cursor IDE（cursor.com，免费版可用）
  • 注册账号，登录后点左下角头像 → Settings → Models → 确保 Claude 4 Sonnet 或 GPT-5 处于启用状态
  • 点 Cursor 窗口右侧的 AI 面板（Ctrl+I 快捷键），切换到「Agent」模式（不是 Chat 模式）

Agent 模式与 Chat 模式的区别：Agent 可以自己读写文件、运行终端命令、安装依赖，你只需要告诉它要做什么。

���一步：创建项目

在 Agent 对话框输入第一句话：

创建一个名为 todo-app 的前端项目，用纯 HTML/CSS/JS，放在当前目录下。创建 index.html、style.css、app.js 三个文件。

Agent 会自动创建文件并写入基础框架。你可以在左侧文件树看到新文件。

第二步：搭建 HTML 骨架

接着告诉 Agent：

在 index.html 里写一个 Todo 应用的界面，包含：标题、输入框和添加按钮、任务列表区域、底部三个筛选按钮（全部/未完成/已完成）和一个清空已完成按钮。引入 style.css 和 app.js。要求简洁美观的现代设计风格。

Agent 会在 index.html 里写出完整结构。你可以点击右上角的预览按钮（或按 Ctrl+Shift+P → Simple Browser）在 IDE 内预览效果。

Todo App 基础 HTML 结构和预览
Todo App 基础 HTML 结构和预览

第三步：写 JS 逻辑

继续和 Agent 对话：

在 app.js 里实现完整的 Todo 逻辑：1) 用 localStorage 持久化存储任务  2) 每个任务有 id、text、completed 三个属性  3) 支持添加、切换完成状态、删除  4) 支持全部/未完成/已完成三种筛选  5) 支持清空已完成  6) 渲染函数统一管理 DOM 更新

Agent 会生成完整代码。这里给一个核心数据结构的建议（你可以直接让 Agent 参考）：

let todos = JSON.parse(localStorage.getItem('todos') || '[]');

function save() { localStorage.setItem('todos', JSON.stringify(todos)); render(); }

function addTodo(text) {
  todos.push({ id: Date.now(), text, completed: false }); save();
}

function toggleTodo(id) {
  const t = todos.find(t => t.id === id);
  if (t) { t.completed = !t.completed; save(); }
}

function deleteTodo(id) {
  todos = todos.filter(t => t.id !== id); save();
}

function getFiltered(filter) {
  if (filter === 'active') return todos.filter(t => !t.completed);
  if (filter === 'completed') return todos.filter(t => t.completed);
  return todos;
}

第四步：美化样式

告诉 Agent 你想要的设计风格：

在 style.css 里使用现代简约风格：圆角卡片、柔和阴影、渐变背景色、check 动画效果。参考 Apple Reminders 的设计语言，配色用白色背景 + 淡蓝主色 #4A90D9。已完成任务文字加上删除线和灰色。

第五步：运行和调试

如果效果不对，直接告诉 Agent 哪里有问题，它会自己改。比如：

删除按钮没有反应，检查事件绑定。筛选按钮点完后高亮状态没有更新，请修复。

Agent 会定位问题并修改代码。你不需要看报错信息，直接描述现象就行。

第六步：进阶——部署到 GitHub Pages

告诉 Agent：

帮我把这个项目部署到 GitHub Pages。先初始化 git 仓库，创建 .gitignore，然后告诉我需要执行的 git 命令。

Agent 会生成具体的命令序列，你复制到终端执行即可。如果你对命令行不熟，也可以让 Agent 在终端里直接操作（需要授权）。

出坑经验

  • Cursor Agent 偶尔会在循环里卡住（比如反复改同一个文件），这时点「Stop」然后重新描述问题即可
  • 尽量每次只提一个需求，不要一次说太多导致 Agent 混乱
  • 复杂逻辑建议用「先写伪代码再实现」两步走，成功率更高
  • 免费版 Cursor 每月 2000 次 Agent 请求，做一个 Todo App 约消耗 30-50 次

到这里，你的第一个 AI 编程项目就完成了。接下来试试给 Todo 加个日期提醒或分类标签，你会发现用自然语言编程真的很爽。