工作流
Cursor 全流程开发：从需求到上线的 AI 编程工作流
用 Cursor + AI 完成一个完整项目，不是零散的代码补全，而是从需求到上线的全流程工作流。本文以「待办清单应用」为实战案例。
📋 为什么选 Cursor？
Cursor 不只是代码编辑器，它是 AI-First 的开发环境：
- Composer 模式：一次性生成多文件项目
- Agent 模式：AI 自主完成编码、调试、测试
- 上下文感知：理解整个项目结构，不只是当前文件
步骤一：需求描述（最关键）
1 写好 PRD 再动手
在 Cursor 中用 Ctrl+I 打开 Composer，先描述需求：
创建一个待办清单 Web 应用：
技术栈：React + TypeScript + Vite + Tailwind CSS
功能需求：
1. 添加/删除/编辑待办事项
2. 标记完成/未完成
3. 按状态筛选（全部/已完成/未完成）
4. 本地存储（localStorage）
5. 拖拽排序
设计风格：极简、白色背景、蓝色主色调
不要添加任何动画效果需求描述越精确，AI 一次生成的代码质量越高。别只说"写个 todo app"——这是新手最大的坑。
步骤二：让 AI 生成项目
2 Composer 一键生成
点击"Generate"，Cursor 会一次性生成：
todo-app/
├── src/
│ ├── App.tsx # 主组件
│ ├── components/
│ │ ├── TodoItem.tsx # 单条待办
│ │ ├── TodoList.tsx # 列表组件
│ │ └── TodoInput.tsx # 输入组件
│ ├── hooks/
│ │ └── useTodos.ts # 自定义 Hook
│ ├── types.ts # 类型定义
│ └── main.tsx
├── package.json
├── tsconfig.json
├── vite.config.ts
└── tailwind.config.js每个文件都自动填充了完整代码，通常 80% 可直接使用。
步骤三：Review + 修改
3 审查 AI 生成的代码
- 点击每个文件查看 diff，确认逻辑正确
- 关注类型定义是否完整
- 检查边界情况处理（空列表、重复输入等）
- 不满意的部分用
Ctrl+K行内修改
步骤四：测试
4 运行并验证功能
npm install
npm run dev在浏览器中测试所有功能，发现问题直接在 Cursor 的 Chat 中描述：
🦞 你: 拖拽排序不生效，控制台报错 "dnd-kit provider missing"
修复方案：需要在 App.tsx 外层包裹 DndContext...步骤五：优化打磨
5 让 AI 帮你打磨细节
🦞 你: 给已完成的事项加上删除线效果，未完成的事项鼠标 hover 时显示删除按钮
🦞 你: localStorage 的 key 改成 "claw-todo-app"，加上版本号
🦞 你: 添加一个统计栏，显示"已完成 X / 共 Y 项"步骤六：部署上线
6 构建 + 部署
# 构建
npm run build
# 部署到 Cloudflare Pages
npx wrangler pages deploy dist --project-name=my-todo
# 或者部署到 Vercel
npx vercel从需求到上线，全程 AI 辅助，你只需要 Review 和决策。
🎉 Cursor 全流程掌握！
接下来你可以：
- 用 Cursor 挑战更复杂的项目，如 多智能体协作
- 学习 Prompt 工程 让需求描述更精准
- 查看 Cursor 产品详情