当前位置：首页 > news >正文

实战项目：用 Cursor AI 构建一个完整 To-Do List App（2025 年最新版）

news 2026/7/4 14:21:57

实战项目：用 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，提升性能”