用好AI的关键之一是写好Prompt。本文按组件生成、重构、测试、调试、CSS、API对接、代码审查、文档、性能优化等分类，整理50个可直接复制使用的前端Prompt模板，并标注预期输出，提升日常开发效率。
一、组件生成类
| # | 分类 | Prompt | 预期输出 |
|---|
| 1 | 组件 | 用Vue3 + TypeScript写一个带分页的表格组件，支持排序、筛选，使用Element Plus | 完整.vue文件，含props、emits、分页逻辑 |
| 2 | 组件 | 写一个可拖拽排序的列表组件，Vue3 Composition API | 使用vuedraggable或原生实现的可排序列表 |
| 3 | 组件 | 写一个图片上传组件，支持预览、裁剪、限制大小2MB | 含input、预览、裁剪弹窗的完整组件 |
| 4 | 组件 | 写一个树形选择器，支持多选、搜索、懒加载 | TreeSelect风格组件 |
| 5 | 组件 | 写一个骨架屏组件，传入行数、列数自动生成 | 灰色占位块组成的骨架 |
二、重构类
| # | 分类 | Prompt | 预期输出 |
|---|
| 6 | 重构 | 把下面Vue2 Options API改成Vue3 Composition API | 等价的setup + ref/reactive写法 |
| 7 | 重构 | 把这段class组件改成React函数组件 + Hooks | 使用useState、useEffect等 |
| 8 | 重构 | 把这段逻辑抽成Vue3 composable，保持类型安全 | useXxx.ts文件 |
| 9 | 重构 | 用TypeScript重写下面JS代码，补充类型定义 | 带interface/type的TS版本 |
| 10 | 重构 | 把这段jQuery代码改成原生JS或Vue | 无依赖的现代实现 |
三、测试类
| # | 分类 | Prompt | 预期输出 |
|---|
| 11 | 测试 | 为下面Vue组件写Vitest单元测试，覆盖主要交互和边界 | .spec.ts文件 |
| 12 | 测试 | 为useCounter这个composable写测试 | 测试初始值、方法、计算属性 |
| 13 | 测试 | 为getUser API函数写测试，Mock request | 校验参数、返回值 |
| 14 | 测试 | 补充下面测试的边界用例：空数据、错误、loading | 新增it块 |
| 15 | 测试 | 把这段测试从Jest迁移到Vitest | 替换API，调整配置 |
四、调试类
| # | 分类 | Prompt | 预期输出 |
|---|
| 16 | 调试 | 这段代码报错[粘贴错误]，可能原因和修复方式 | 原因分析 + 修改建议 |
| 17 | 调试 | 为什么这个ref在watch里拿到的还是旧值 | 解释时序 + 正确写法 |
| 18 | 调试 | 接口返回404，帮我检查请求URL和参数是否正确 | 指出问题并给出修正 |
| 19 | 调试 | 页面白屏，控制台无报错，可能原因 | 排查思路（路由、入口、构建） |
| 20 | 调试 | 这段代码在Safari上不工作，可能兼容性问题 | 指出问题API + 兼容写法 |
五、CSS类
| # | 分类 | Prompt | 预期输出 |
|---|
| 21 | CSS | 用Flexbox实现水平垂直居中 | 完整CSS代码 |
| 22 | CSS | 用Grid实现左边固定200px、右边自适应的两栏布局 | grid-template-columns写法 |
| 23 | CSS | 实现一个从下往上滑入的动画 | @keyframes + animation |
| 24 | CSS | 这段CSS在移动端有问题，帮我改成响应式 | 媒体查询或clamp等 |
| 25 | CSS | 用Tailwind重写下面这段CSS | 等价的Tailwind类名 |
六、API对接类
| # | 分类 | Prompt | 预期输出 |
|---|
| 26 | API | 根据这个OpenAPI/Swagger定义生成TypeScript类型和请求函数 | types.ts + api.ts |
| 27 | API | 把这段fetch改成axios，并加错误处理和loading | 完整请求封装 |
| 28 | API | 实现一个带重试的请求函数，失败最多重试3次 | 递归或循环实现 |
| 29 | API | 实现请求防抖，300ms内重复调用只发最后一次 | debounce包装 |
| 30 | API | 实现并发限制，同时最多3个请求 | Promise池实现 |
七、代码审查类
| # | 分类 | Prompt | 预期输出 |
|---|
| 31 | 审查 | 审查下面代码，指出潜在问题和改进点 | 问题列表 + 建议 |
| 32 | 审查 | 这段代码有没有内存泄漏风险 | 分析 + 修复建议 |
| 33 | 审查 | 检查这段代码的TypeScript类型是否严谨 | 补充类型或修正 |
| 34 | 审查 | 这段代码的性能瓶颈在哪？如何优化 | 分析 + 优化方案 |
| 35 | 审查 | 是否符合Vue/React最佳实践 | 逐条指出并给出改进 |
八、文档类
| # | 分类 | Prompt | 预期输出 |
|---|
| 36 | 文档 | 为下面函数生成JSDoc注释 | 含@param、@returns、@example |
| 37 | 文档 | 为这个组件写README，说明props、events、用法 | Markdown文档 |
| 38 | 文档 | 把这段代码逻辑用中文解释一遍 | 步骤化说明 |
| 39 | 文档 | 生成这个API的调用示例（curl、fetch、axios） | 多语言示例 |
| 40 | 文档 | 写一份这个功能的用户使用说明 | 面向非技术用户的说明 |
九、性能优化类
| # | 分类 | Prompt | 预期输出 |
|---|
| 41 | 性能 | 这段列表渲染很卡，如何优化 | 虚拟列表、分页、v-memo等 |
| 42 | 性能 | 如何减少这个Vue组件的重复渲染 | 分析依赖 + computed/watch建议 |
| 43 | 性能 | 这个大对象如何做深拷贝且性能好 | structuredClone、lodash等方案 |
| 44 | 性能 | 首屏加载慢，有哪些优化手段 | 路由懒加载、分包、预加载等 |
| 45 | 性能 | 图片很多，如何优化加载 | 懒加载、WebP、CDN、响应式图 |
十、综合类
| # | 分类 | Prompt | 预期输出 |
|---|
| 46 | 综合 | 从零实现一个简易的Vue reactive系统 | 简化版ref、reactive、effect |
| 47 | 综合 | 实现一个Promise.allSettled的polyfill | 完整实现代码 |
| 48 | 综合 | 写一个解析URL query为对象的函数，支持数组 | 健壮的解析逻辑 |
| 49 | 综合 | 实现一个简单的EventBus，支持on/off/emit | 发布订阅实现 |
| 50 | 综合 | 写一个深比较函数deepEqual(a, b) | 递归比较对象、数组、基本类型 |
使用建议
选中代码再发Prompt：让AI有上下文，输出更准
补充约束：如「不要用第三方库」「必须TypeScript」
迭代优化：第一次结果不满意，可追加「再简化一点」「加上错误处理」
分类收藏：按场景建文档，需要时直接复制
总结
50个模板覆盖组件、重构、测试、调试、CSS、API、审查、文档、性能等场景，可直接复制到Cursor等AI工具中使用。善用Prompt，能显著提升日常开发效率。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
链接: https://fly63.com/article/detial/13654
