实战项目：用 Cursor AI 构建一个完整 To-Do List App（2025 年最新版）
这个实战项目将带你从零开始，使用Cursor AI构建一个现代化的To-Do List 应用。我们选择Next.js 14 + Tailwind CSS + TypeScript作为技术栈，因为它完美适配 Cursor 的 Visual Editor 和 Composer 功能。整个过程预计只需1-3 小时（传统手动开发可能需要半天）！
项目目标功能：
- 添加/删除/完成任务
- 任务持久化（localStorage）
- 暗黑模式切换
- 响应式美观 UI
- 可扩展：后续添加后端（可选）
准备好 Cursor（最新 2.2+ 版本），开始吧！🚀
第 1 步：创建项目并用 Composer 生成基础结构（10 分钟）
- 在 Cursor 中新建文件夹
todo-app，打开它。 - 按Cmd/Ctrl + I打开Composer（多文件生成神器）。
- 输入以下提示（复制粘贴）：
创建一个完整的 Next.js 14 App Router 项目，使用 TypeScript 和 Tailwind CSS。 功能：一个美观的 To-Do List 应用，支持： - 添加新任务 - 标记完成/未完成 - 删除任务 - 使用 localStorage 持久化任务 - 支持暗黑模式（自动跟随系统或手动切换） 请生成完整的项目结构，包括： - app/page.tsx 主页面 - components/TaskList.tsx、TaskItem.tsx、AddTaskForm.tsx - lib/utils.ts（存储 localStorage 逻辑） - 必要的 Tailwind 配置和 globals.css UI 要现代简洁，使用卡片式设计、圆角按钮、动画过渡。Cursor 会自动生成所有文件，检查后点击Apply All应用。
安装依赖：在终端（Cursor 内置）运行：
npm create next-app@latest . --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"（如果 Composer 已生成 package.json，直接
npm install）启动项目：
npm run dev，在 Cursor 内置浏览器查看（命令：> Open Browser）。
第 2 步：用 Visual Editor 视觉化调整 UI（15 分钟）
这是 Cursor 2.2 的杀手级功能！
- 项目运行后，在 Cursor 中打开内置浏览器（加载 localhost:3000）。
- Visual Editor 侧边栏自动出现。
- 拖拽调整布局：直接拖动任务输入框、按钮位置，交换元素顺序。
- 实时调样式：用滑块改圆角、间距、阴影；调色板换主题色。
- 指哪改哪：选中任务列表，输入提示如：
- “让任务卡片更大，添加 hover 动画”
- “把添加按钮移到顶部，背景色改成蓝色”
- “支持暗黑模式下文字颜色自动变白”
AI 会自动定位代码并更新！
最终效果类似这些现代 To-Do App UI：
第 3 步：用 Chat 和 Inline Edit 完善功能与调试（20 分钟）
按Cmd/Ctrl + L打开 AI Chat，粘贴 bug 或需求：
- “任务完成时添加删除线动画”
- “修复快速添加任务时重复的问题”
- “添加清除所有已完成任务的按钮”
用Inline Edit（选中代码，按 Cmd/Ctrl + K）快速修改：
- 选中任务状态逻辑，提示：“用 Zustand 或 Context 替换 useState，提升性能”
第 4 步：部署上线（5 分钟）
- 推送代码到 GitHub。
- 连接 Vercel（一键导入），自动部署。
大功告成！你的 To-Do App 已上线，支持暗黑模式、持久化、丝滑交互。
小结与扩展建议
通过这个项目，你体验了 Cursor 的完整闭环：Composer 快速搭建 → Visual Editor 视觉迭代 → Chat/Inline 智能完善。这才是 2025 年的 AI 编程范式！
后续扩展：
- 添加 Prisma + PostgreSQL 后端
- 集成用户认证（NextAuth）
- 移动端适配（PWA）
坚持练习，你会发现 Cursor 能让你开发速度提升 5-10 倍。快去试试，完成后欢迎分享你的作品截图！💪
（本文基于 Cursor 2.2 版本，如有更新以官网为准）
