发布状态未发布第五期Cursor 深度工作流与 Prompt 工程本期目标把 Cursor 从代码生成器用成项目级开发助手核心理念Prompt 的质量直接决定输出代码的质量。花 10 分钟写一个好的 Prompt能省下一小时的调试时间。目录第一章Cursor 的核心能力第二章Agent 模式深度使用第三章 符号高级用法第四章项目级 Prompt 设计第五章六大场景 Prompt 模板实战第六章AI 生成代码的审查方法论第七章课后作业第一章Cursor 的核心能力1.1 Cursor vs 传统 IDE 插件能力传统 IDE CopilotCursor代码补全单行/块级可一次性生成整个函数代码修改手动修改CtrlK 说改成 XXX文件理解当前文件整个项目上下文终端操作手动执行Agent 自动执行多文件操作逐个处理一次改多个文件1.2 三大核心快捷键快捷键功能使用场景CtrlK选中代码后说改成 XXX局部修改、重构CtrlL打开 AI 对话面板问答、代码生成引用项目中的文件/代码跨文件理解、上下文增强1.3 Chat 模式 vs Agent 模式模式用途特点适用场景Chat问答、代码生成AI 生成代码你手动 Apply简单需求、单文件修改Agent复杂任务、多文件操作AI 自动创建文件、执行终端命令涉及 3 文件、需要安装依赖选择原则简单需求单文件、1-2 个函数→ Chat 模式复杂需求多文件、改配置、装依赖→ Agent 模式第二章Agent 模式深度使用2.1 Agent 模式的工作流程你说需求 → AI 分析 → AI 创建/修改文件 → AI 执行命令 → 你审查结果2.2 Agent 模式实战从零搭建项目场景用 Agent 模式创建一个 Vite React TS 管理后台项目Prompt请帮我创建一个 Vite React 18 TypeScript 的管理后台项目骨架。 要求 1. 使用 npm create vitelatest 创建项目 2. 安装依赖react-router-dom、antd、axios、zustand 3. 创建以下目录结构 - src/views/页面目录 - src/components/组件目录 - src/stores/状态管理 - src/utils/工具函数 - src/types/类型定义 4. 创建基础文件 - src/App.tsx路由配置 - src/main.tsx入口 - src/stores/userStore.tsZustand 用户状态 - src/utils/request.tsAxios 封装 - src/views/Login.tsx登录页占位 - src/views/Layout.tsx布局组件占位 5. 配置路径别名 / 指向 src/ 6. 启动开发服务器确保能正常运行 请使用 Agent 模式自动完成所有操作。2.3 Agent 模式的注意事项权限控制Agent 会执行终端命令注意检查它要执行的命令是否安全分步确认复杂任务可以让 Agent 分步执行每步确认后再继续回滚准备Agent 修改前确保代码已提交到 git方便回滚第三章 符号高级用法3.1 符号的三种引用方式用法作用示例文件名引用整个文件request.ts代码块引用选中的代码选中代码后按 Folder引用整个文件夹src/utils3.2 实战跨文件重构场景你想把项目中所有的axios.get调用改成封装后的request.get操作步骤选中request.ts中的封装代码按CtrlK输入请帮我把 UserList.vue 中的所有 axios.get 和 axios.post 调用 替换为使用 request.ts 中的 request 实例。 保持原有功能和错误处理逻辑不变。3.3 上下文增强技巧请根据 src/types/user.ts 中的类型定义 修改 src/views/UserList.vue 中的代码 确保所有 user 相关变量都使用正确的类型。第四章项目级 Prompt 设计4.1 为什么需要项目级 Prompt问题每次新建文件都要写一遍技术栈说明解决在项目根目录创建.cursorrules文件定义项目规范。4.2 .cursorrules 文件模板# 项目规范 ## 技术栈 - React 18 TypeScript严格模式 - Ant Design 5 - Zustand状态管理 - AxiosHTTP 请求使用 src/utils/request.ts 封装 - React Router 6 ## 代码规范 - 使用函数组件 Hooks - 禁止使用 any - 组件名使用 PascalCase - 文件名与组件名一致 - 类型定义放在 src/types/ 目录 ## API 规范 - 统一使用 request.ts 封装 - 接口返回格式{ code, data, message } - 错误处理使用 try/catch message.error ## 样式规范 - 使用 Ant Design 组件避免手写复杂 CSS - 使用 style{{ marginTop: 20 }} 代替内联样式类4.3 使用方式创建.cursorrules文件后Cursor 会自动读取并应用到所有 AI 对话中。你不再需要每次声明技术栈。第五章六大场景 Prompt 模板实战5.1 场景一从零创建页面请帮我创建一个新的 [模块名] 管理页面。 页面路径src/views/[Module]List.tsx 功能需求 1. 搜索区域[字段列表] 2. 数据表格[字段列表] 3. 分页功能 4. 操作列[编辑/删除/详情] 接口信息 - GET [接口地址] - 参数{ page, pageSize, ... } - 返回{ code, data: { list, total }, message } 参考已有的 src/views/UserList.tsx 的代码风格和结构。5.2 场景二添加新功能到现有页面请在 src/views/UserList.tsx 基础上增加以下功能 新增功能 1. 批量删除表格增加选择列底部显示批量删除按钮 2. 导出功能搜索区域增加导出 Excel按钮 3. 列设置用户可以显示/隐藏表格列 注意 - 保持原有功能不变 - 遵循项目现有代码风格 - 使用 Ant Design 组件5.3 场景三接口变更适配后端接口发生了变更请帮我修改前端代码。 变更内容 1. 原来的 GET /api/users 参数 { page, pageSize } 现在改为 { pageNum, pageSize } 2. 原来的返回 { data: { list, total } } 现在改为 { data: { records, total } } 3. 状态字段从 statusactive/inactive 改为 state1/0 需要修改的文件 - src/views/UserList.tsx - src/types/user.ts 请帮我找出所有需要修改的地方并修改。5.4 场景四性能优化请帮我优化 src/views/UserList.tsx 的性能。 当前问题 1. 表格数据量大时1000 条页面卡顿 2. 搜索时每次输入都触发请求造成过多接口调用 3. 列表页切换时旧请求没有取消 优化要求 1. 添加防抖/节流处理搜索输入 2. 使用 AbortController 取消未完成的请求 3. 大表格使用虚拟滚动如果 Antd 支持5.5 场景五代码审查请帮我审查 src/views/UserList.tsx 的代码找出以下问题 审查维度 1. 安全问题是否有 XSS 风险、是否有 SQL 注入前端拼接 SQL 2. 性能问题不必要的重渲染、大数据处理 3. 边界情况空数据、超长文本、网络异常 4. 代码规范TypeScript 类型是否准确、是否有 any 5. 可维护性代码是否过于复杂、是否需要拆分组件 请按严重程度列出问题并给出修改建议。5.6 场景六框架迁移请将 src/views/UserList.vueVue 3转换为 React 组件。 要求 - 使用 React 18 Hooks - 使用 Ant Design 5 组件 - 保持原有功能不变 - 保持原有接口调用逻辑 - 使用 Zustand 替代 Pinia - 严格 TypeScript 输出完整的 React 组件代码和必要的 store 文件。第六章AI 生成代码的审查方法论6.1 五步审查法技术栈检查 → 功能完整性检查 → 安全审查 → 性能审查 → 可维护性审查6.2 审查清单维度检查项工具/方法技术栈版本是否正确、组件名是否正确查看 import功能三态处理、分页逻辑、表单校验运行测试安全XSS、CSRF、敏感数据泄露搜索 v-html、dangerouslySetInnerHTML性能重复渲染、大数据、内存泄漏React DevTools Profiler类型是否有 any、类型是否准确TypeScript 编译规范命名、注释、代码结构ESLint6.3 危险信号看到以下代码必须立即审查// 危险信号 1XSS 风险 dangerouslySetInnerHTML{{ __html: content }} // 危险信号 2SQL 注入前端不应该拼接 SQL const sql SELECT * FROM users WHERE id ${userId} // 危险信号 3硬编码密钥 const API_KEY sk-1234567890abcdef // 危险信号 4eval eval(userInput) // 危险信号 5无限递归/循环 useEffect(() { setState(...) }, [state])第七章实战7.1 必做实战实战 1创建个人 Prompt 模板库整理至少 6 个你常用的 Prompt 模板从零创建页面添加功能到现有页面接口变更适配性能优化代码审查Bug 调试使用 Notion / 飞书 / 语雀 整理每个模板包含使用场景说明完整的 Prompt 文本注意事项实战 2为你的项目创建 .cursorrules基于你实际工作的项目创建一个.cursorrules文件包含技术栈和版本代码规范API 规范样式规范7.2 常见问题 FAQQAgent 模式执行了错误的命令怎么办Agent 执行前会询问你确认。如果不小心执行了立即用 git 回滚git checkout -- .Q.cursorrules 文件有用吗非常有用它让 AI 在每次对话时都记住项目规范减少重复说明提高代码质量。QPrompt 写多长合适不是越长越好关键是信息密度。包含技术栈 功能需求 接口定义 输出要求。一般 200-500 字最佳。下一期预告管理后台核心页面——表单页与增删改查完整闭环