用AI写组件就像让猩猩开叉车，代码能跑算我输，满大街的"AI提效"口号比React生命周期还烦人。
—— 鲁迅：我没说过这种话
AI时代如何利用好AI工具对工作进行提效，相信很多人哪怕到2025年的今天还有拿起AI工具但不知道怎么提问的经历，我总结了以下场景，希望能帮到你们。
通用提示词
作为[资深前端专家]，请：
[详细描述任务背景]
具体要求：
1. [需求点1]
2. [需求点2]
3. [技术限制条件]
期望输出：
1. [代码示例/架构图/配置方案]
2. 使用技术栈：[Vue3.x/React 18.x]
组件生成
请帮我生成[React/Vue]组件代码，实现[具体功能]，要求：
1. 使用[TypeScript/JavaScript]
2. 包含[props参数列表]
3. 实现[动画/响应式设计]效果
4. 考虑[可访问性/性能优化]」
页面布局
使用[Flexbox/Grid]实现[布局结构描述]，要求：
1. 适配[移动端/桌面端]
2. 处理[IE11兼容性问题]
3. 实现[滚动吸附/等高列]效果
示例：三栏布局，中间自适应，左右固定200px，移动端自动换行
状态管理
在[Redux/Vuex/Context API]中如何：
1. 组织[大型应用]的状态结构
2. 实现[异步操作/数据缓存]
3. 优化[组件重渲染]问题
4. 集成[TypeScript类型]
性能优化
优化[具体页面]的Lighthouse评分：
1. 减少[FCP/TTI]时间
2. 处理[CLS累积布局偏移]
3. 实现[图片懒加载/代码分割]
4. 优化[Webpack/Vite]构建配置
代码调试
分析以下[错误场景]的可能原因：
1. [粘贴错误日志/代码片段]
2. 运行环境：[浏览器版本/Node版本]
3. 异常表现：[具体现象描述]
4. 已尝试方案：[列出已试方法]
构建工具
配置[Webpack/Vite]实现：
1. 多环境变量注入
2. 自动生成d.ts类型文件
3. 可视化包分析
4. 自定义Loader处理SVG图标
代码重构
重构以下代码提升可维护性：
[粘贴代码片段]
目标：
1. 提取可复用Hook
2. 增加类型定义
3. 优化条件判断逻辑
4. 拆分巨型组件
响应式设计
实现[设计稿]的响应式适配：
设计尺寸：[提供设计稿参数]
断点要求：[列出关键断点]
需处理：
1. Retina屏幕适配
2. 横屏显示优化
3. 系统深色模式支持
API对接（需要能读取外部链接的AI工具，如claude）
对接[REST/GraphQL]接口：
文档地址：[API文档链接]
技术栈：[axios/fetch/XMLHTTPRequest]
需求：
1. 错误重试机制
2. 请求取消功能
4. 数据缓存策略
5. TypeScript类型生成
文档编写
为以下组件生成文档：
组件功能：[功能描述]
代码示例：[粘贴关键代码]
要求：
1. 参数说明表格
2. 使用示例代码块
3. 注意事项清单
4. 版本更新日志模板
代码审查
审查以下代码潜在问题：
[粘贴代码片段]
关注点：
1. XSS安全漏洞
2. 内存泄漏风险
3. 不必要的重渲染
4. 代码规范符合性
技术方案对比
对比[技术A]与[技术B]的：
1. 核心原理差异
2. 性能基准测试
3. 生态系统对比
4. 适用场景分析
示例：Vue vs React
团队协作
制定[项目名称]的：
1. Git分支管理规范
2. Commit Message模板
3. 代码Review Checklist
4. CI/CD流程优化方案
使用技巧
- 提供完整上下文信息
- 明确输入/输出格式要求
- 限制解决方案的技术范围
- 要求分步骤解释实现逻辑
- 添加"遇到XX情况如何处理"等防御性提问
总结
以上所有提示词可根据具体项目需求组合使用，灵活调整内容来适配自己的项目情况，建议保存为代码片段管理工具（如MassCode/SnippetsLab）的模板库，配合快捷键快速调用。
最后，祝你们都能在AI时代下猥琐发育，保住这份工。
