一、前端AI提示词模板库
🔰 基础通用模板（所有场景适配）
【通用提示词框架】
请作为资深前端工程师，帮我完成以下任务：
1. 任务目标：[此处填写核心需求]
2. 技术栈：[Vue3/React18/TS/Tailwind等]
3. 约束条件：[兼容性/性能/规范要求等]
4. 输出要求：[代码/文档/解释/优化方案等]
请保证：
- 代码可直接运行，无语法错误
- 符合行业最佳实践和团队规范
- 给出核心逻辑解释和避坑点
📝 代码生成类
1. 组件生成
【Vue3+TS组件生成】
请实现一个响应式的「分页组件」，技术栈：Vue3 + TS + Composition API + Element Plus，要求：
1. 功能：支持页码切换、每页条数选择、跳转到指定页
2. Props：pageNum（当前页）、pageSize（每页条数）、total（总条数）、pageSizes（可选条数数组）
3. Events：page-change（页码变化）、size-change（条数变化）
4. 样式：适配移动端，符合Element Plus设计风格
5. 输出：完整的.vue文件 + Props类型注释 + 使用示例
【React18+TS组件生成】
请实现一个「下拉选择组件」，技术栈：React18 + TS + React Hooks + Ant Design，要求：
1. 功能：支持单选/多选、搜索过滤、远程加载数据
2. Props：options（选项数组）、value（选中值）、onChange（回调）、multiple（是否多选）、remote（是否远程）
3. 交互：搜索时防抖（300ms），远程加载时显示加载状态
4. 输出：完整的.tsx文件 + 类型定义 + 使用示例
【原生JS组件生成】
请实现一个「图片懒加载组件」，技术栈：原生JS + CSS3，要求：
1. 功能：滚动到可视区域加载图片，加载失败显示占位图
2. 兼容：IE11+、Chrome、Firefox
3. 性能：节流处理滚动事件（100ms），避免频繁触发
4. 输出：完整的JS/CSS/HTML代码 + 注释 + 使用说明
2. 功能函数生成
【工具函数生成】
请实现以下前端常用工具函数，技术栈：TS，要求：
1. 函数列表：
- 防抖函数（debounce）：支持立即执行、取消执行
- 节流函数（throttle）：支持时间戳/定时器版本
- 深拷贝函数（deepClone）：支持对象/数组/日期/正则
- 格式日期函数（formatDate）：支持自定义格式（YYYY-MM-DD HH:mm:ss）
2. 输出：完整的.ts文件 + 函数注释 + 测试用例
【API请求函数生成】
请基于Axios封装前端请求函数，技术栈：TS + Axios，要求：
1. 功能：
- 请求拦截：添加token、统一请求头
- 响应拦截：统一处理错误、格式化响应数据
- 取消重复请求：同一接口未响应时禁止重复请求
- 超时处理：默认30s超时，支持自定义
2. 输出：完整的request.ts文件 + 使用示例 + 错误码说明
3. 页面生成
【电商首页生成】
请实现一个电商首页的核心模块，技术栈：Vue3 + TS + Vite + Tailwind CSS，要求：
1. 模块：轮播图、分类导航、爆款商品列表、限时秒杀
2. 交互：轮播图自动播放/手动切换、商品卡片hover效果、秒杀倒计时
3. 适配：移动端优先（375px-750px），适配PC端（1200px+）
4. 输出：完整的.vue文件 + 模拟数据 + 样式说明
🐞 Bug排查类
【JS报错排查】
请分析以下前端报错并给出修复方案：
1. 报错信息：Uncaught ReferenceError: xxx is not defined
2. 报错位置：src/utils/format.js:15
3. 相关代码：[粘贴报错代码片段]
4. 运行环境：Chrome 120、Vue3、Vite 5.0
5. 复现步骤：进入个人中心页点击「修改昵称」按钮
6. 输出要求：
- 报错原因（通俗解释）
- 修复后的代码
- 预防此类问题的建议
【CSS样式问题排查】
请分析以下CSS样式问题并给出解决方案：
1. 问题描述：移动端商品卡片在iPhone SE上显示溢出，PC端正常
2. 相关代码：[粘贴CSS/HTML代码]
3. 测试环境：iPhone SE（320px）、Chrome模拟器
4. 输出要求：
- 问题原因（盒模型/适配/优先级等）
- 修复后的样式代码
- 移动端适配的通用技巧
【性能问题排查】
请分析以下前端性能问题并给出优化方案：
1. 问题描述：长列表滚动时页面卡顿，FPS低于30
2. 技术栈：React18 + 虚拟列表（未使用）
3. 测试数据：列表数据量5000条，每条包含图片/文字
4. 性能指标：Lighthouse评分性能60分
5. 输出要求：
- 卡顿原因分析
- 具体优化方案（代码+步骤）
- 优化后的性能预期
🔧 代码重构类
【Vue2→Vue3重构】
请将以下Vue2组件重构为Vue3 Composition API，要求：
1. 重构目标：
- 替换Options API为Composition API
- 添加TS类型定义
- 移除Vue2特有API（如$emit/$refs的旧用法）
- 优化性能（减少不必要的响应式数据）
2. 原代码：[粘贴Vue2组件代码]
3. 输出要求：
- 重构后的完整.vue文件
- 重构点说明（逐条列出）
- 重构后的测试注意事项
【代码性能重构】
请重构以下前端代码以提升性能，技术栈：原生JS + DOM操作，要求：
1. 优化目标：
- 减少DOM操作次数（批量处理）
- 避免重排重绘
- 优化循环逻辑（减少计算量）
2. 原代码：[粘贴待优化代码]
3. 输出要求：
- 优化后的代码
- 性能优化点说明
- 优化前后性能对比（执行时间/操作次数）
📚 文档/注释类
【组件文档生成】
请为以下Vue3组件生成规范的使用文档，要求：
1. 文档格式：
- 组件介绍
- Props说明（名称/类型/默认值/必填/说明）
- Events说明（名称/参数/说明）
- Slots说明（名称/说明）
- 示例代码（基础用法/高级用法）
2. 组件代码：[粘贴组件代码]
3. 输出要求：Markdown格式，简洁易懂，适合团队协作
【接口文档生成】
请基于以下API请求函数生成接口文档，要求：
1. 文档格式：
- 接口名称
- 请求地址/方法
- 请求参数（名称/类型/必填/说明）
- 响应数据（结构/字段说明）
- 错误码说明
- 调用示例
2. API函数代码：[粘贴请求函数代码]
3. 输出要求：Markdown格式，符合OpenAPI规范
【代码注释生成】
请为以下TS函数添加规范的JSDoc注释，要求：
1. 注释包含：
- 函数功能描述
- 参数说明（名称/类型/说明/默认值）
- 返回值说明（类型/说明）
- 异常说明（可能抛出的错误）
- 示例用法
2. 函数代码：[粘贴TS函数代码]
🚀 面试/学习类
【前端面试题解答】
请作为资深前端面试官，解答以下面试题并给出评分标准：
1. 面试题：请手写Promise.all，并说明其实现原理和边界情况
2. 要求：
- 给出完整的TS实现代码
- 通俗解释实现原理（适合新手理解）
- 列出边界情况（如参数非数组、Promise reject等）
- 给出面试评分标准（基础分/进阶分/优秀分）
【技术知识点讲解】
请讲解以下前端知识点，要求：
1. 知识点：Vue3的响应式原理（Proxy版本）
2. 讲解要求：
- 从基础概念入手（适合新手）
- 结合代码示例（手写简易版响应式）
- 对比Vue2的响应式差异
- 列出实际开发中的应用场景
3. 输出要求：Markdown格式，图文结合（用伪代码/流程图辅助）
二、前端AI使用避坑手册（2026最新版）
🚨 核心避坑原则（3大黄金法则）
- 「验证优先」原则：AI生成的任何代码/方案，必须本地运行验证，核心逻辑（支付/登录/权限）需多环境测试；
- 「理解再用」原则：不直接复制粘贴AI代码，至少看懂核心逻辑，避免「知其然不知其所以然」；
- 「安全第一」原则：公共AI工具不传递公司核心代码、敏感信息（如密钥/接口地址），优先用私有化部署工具。
📌 分场景避坑指南
1. 代码生成场景避坑
| 坑点 | 表现 | 解决方案 |
|---|
| 代码兼容性差 | AI生成的代码只支持最新浏览器，不兼容低版本 | 提示词中明确「兼容范围」（如IE11+/Chrome90+），要求AI补充降级方案 |
| 代码有隐藏bug | 表面能运行，边界场景（如空值/异常数据）会报错 | 要求AI「添加边界条件处理」「给出测试用例」，本地全覆盖测试 |
| 代码不符合团队规范 | 命名/格式和团队ESLint规范冲突 | 提示词中粘贴团队ESLint规则，要求AI「严格遵循该规范」 |
2. Bug排查场景避坑
| 坑点 | 表现 | 解决方案 |
|---|
| AI诊断错误 | 给出的报错原因和实际不符 | 补充更多上下文（如运行日志/复现视频），分阶段提问（先问「可能的报错原因」，再问「修复方案」） |
| 修复方案不落地 | AI给出的方案太通用，无法直接用 | 提示词中明确「给出可直接运行的修复代码」「标注修改位置」 |
3. 文档生成场景避坑
| 坑点 | 表现 | 解决方案 |
|---|
| 文档信息不全 | 遗漏Props/接口参数说明 | 提示词中明确「列出所有Props/参数，无遗漏」，对照代码核对文档 |
| 文档和代码不一致 | 文档描述的功能和代码实际逻辑冲突 | 要求AI「基于代码逐行生成文档」，生成后交叉验证 |
4. 安全/版权避坑
| 坑点 | 表现 | 解决方案 |
|---|
| 代码侵权 | AI生成的代码包含第三方未授权代码 | 提示词中要求「只使用MIT/Apache2.0协议的开源代码」，生成后用代码查重工具检查 |
| 信息泄露 | 核心代码/架构被AI记录并用于其他场景 | 公共AI只传递代码片段，核心逻辑用伪代码替代，公司项目使用私有化AI工具 |
🛠️ 避坑工具包（2026推荐）
- 代码验证工具：ESLint（语法检查）、Jest/Vitest（单元测试）、BrowserStack（多浏览器兼容测试）；
- 安全检查工具：Snyk（代码安全扫描）、GitGuardian（敏感信息检测）；
- 提示词优化工具：Prompt Perfect（提示词润色）、LangChain（结构化提示词）。
📝 避坑实操步骤（通用流程）
1. 明确需求：先手写核心需求点，避免提示词模糊；
2. 生成内容：用结构化提示词让AI生成代码/文档；
3. 初步验证：运行代码/核对文档，排查明显问题；
4. 追问修正：针对问题让AI重新生成，直到符合要求；
5. 最终确认：核心逻辑手动复核，补充测试用例/注释。
三、模板使用说明
- 复制技巧：所有模板可直接复制到ChatGPT/豆包/文心一言等AI工具，替换「[ ]」中的内容即可使用；
- 定制化：可根据团队技术栈/规范，修改模板中的「技术栈」「约束条件」等部分，形成专属模板库；
- 效率提升：将高频模板保存到笔记工具（如Notion/语雀），开发时一键复制，节省重复编写提示词的时间。
总结
- 提示词核心：100+模板覆盖前端全场景，结构化提示词能让AI输出更精准的内容，避免反复追问；
- 避坑关键：遵循「验证优先、理解再用、安全第一」三大原则，分场景排查坑点，结合工具包做好验证；
- 落地建议：先从高频小场景试用模板，熟悉后再拓展到复杂场景，最大化发挥AI提效价值。
