1. 提示词的三要素角色 任务 约束条件① 角色你是谁错误示范正确示范“帮我写一个登录页面”“你是一个资深前端开发擅长React TypeScript请帮我写一个登录页面”“这段代码哪里错了”“你是一个代码审查专家请帮我检查这段代码的问题”为什么有效AI会调用它训练数据中“资深前端开发”相关的知识输出质量明显更高。② 任务要做什么任务要具体、可执行。不要一句话概括要拆解成小步骤。模糊任务 ❌清晰任务 ✅“写一个后台管理系统”“写一个后台管理系统的用户列表页包含搜索框按用户名/手机号搜索、表格显示用户ID/姓名/手机号/状态/操作按钮、分页器每页10条”“优化一下这段代码”“请重构这个函数①把嵌套的if-else改成早返回模式 ②把重复的抽成公共方法 ③添加JSDoc注释”③ 约束条件有什么限制这是新手最容易忽略的。不告诉AI限制它会放飞自我。常见的约束条件技术栈使用Vue3 Element Plus TypeScript兼容性需要支持Chrome 90性能要求列表超过1000条时不能卡顿风格要求参考项目现有代码风格不要做什么不要引入新的第三方库完整示范“你是一个资深前端开发擅长Vue3 TypeScript Element Plus。任务帮我生成一个用户管理表格组件包含表格列用户名、邮箱、角色管理员/普通用户、状态启用/禁用、操作编辑/删除顶部有“新增用户”按钮表格自带分页每页10条删除时需要弹窗二次确认约束使用Vue3 Composition APIscript setup语法TypeScript 类型定义完整不要使用any类型样式使用 Element Plus 原生样式不要自定义CSS”这样写出来的提示词AI第一次生成的代码基本就能用了。2. 进阶技巧Few-shot给AI“抄作业”有时候AI生成的代码风格跟你想要的不一样或者它用的写法你跟不上。怎么办秘诀给AI看例子。 术语解释Few-shot少样本学习—— 给AI提供几个示例让它模仿示例的风格和模式来生成新内容。操作示范你在项目里已经写过一个UserTable.vue风格是使用defineProps和defineEmits用computed处理表格数据用const handleXxx () {}命名方法现在你要写一个OrderTable.vue想让风格保持一致提示词“我接下来会发给你两个文件UserTable.vue和ProductTable.vue这是我的代码风格示例。请你完全模仿这两个文件的结构、命名方式、TypeScript写法帮我生成一个新的OrderTable.vue组件。功能需求表格列订单号、用户姓名、金额、状态待支付/已支付/已取消、操作查看详情支持按状态筛选下拉选择框点击“查看详情”弹窗显示订单明细注意不要创造新的写法跟示例文件保持一致。”然后直接把UserTable.vue和ProductTable.vue的代码粘贴给AI。这样生成的代码几乎可以直接提交不需要再花时间改风格。3. 进阶技巧强制思维链让AI先思考后回答AI有个毛病你问什么它立即答有时候答得仓促逻辑有漏洞。解决办法强制让AI先“思考”。在提示词末尾加上这句话“请先给出你的实现思路分步骤说明等我确认后再写代码。”效果对比不加这句话 ❌加上这句话 ✅AI直接输出代码可能有隐藏bugAI先输出1.数据定义→2.表格配置→3.分页逻辑→4.事件处理...你确认思路没错它再写代码你花时间改代码你花1分钟确认思路AI一次性生成正确代码这个技巧叫Chain of Thought思维链是所有高级AI使用者必用的招数。4. 进阶技巧迭代式对话不追求一次完美小白常犯的另一个错误试图一次性让AI生成全部代码。正确做法分步走。第一轮“我要做一个商品管理页面请帮我列出需要哪些功能模块”第二轮AI回复后“好的我先做列表页。请根据刚才的方案生成表格部分使用Ant Design的Table组件。”第三轮表格出来后“表格可以了。现在加一个搜索栏搜商品名称和分类。”第四轮“搜索功能好了。再加一个弹窗表单用于新增和编辑商品。”每一步AI都基于之前已经生成的内容上下文继续工作这样每一步的代码质量都更高你也不会被一堆代码淹没。记住跟AI对话就像跟人协作一次只说一件事。5. 提示词自查清单每次写提示词前对照检查项你的提示词有没有✅ 角色“你是资深前端开发...”✅ 任务“生成一个表格包含列A/B/C...”✅ 约束“使用Vue3 TS Element Plus”✅ 可选附带示例代码“参考我发的这个文件风格”✅ 可选强制思维链“请先给出你的实现思路分步骤说明等我确认后再写代码”✅ 可选迭代式对话6. 实战演练对比好提示词和坏提示词❌ 坏提示词新手水平“帮我写一个注册页面。”AI会随便写可能用React、可能用Vue、可能用Bootstrap、可能用原生HTML完全不靠谱。✅ 好提示词合格水平“你是一个资深前端开发擅长Vue3 TypeScript Naive UI。请帮我写一个注册页面包含用户名、邮箱、密码、确认密码、验证码60秒倒计时五个字段。要求表单有校验用户名4-20位、邮箱格式、密码8位以上含数字字母、验证码6位数字提交时控制台打印表单数据。使用script setup语法完整TypeScript类型定义。”✅✅ 优秀提示词高手水平“你是一个资深前端开发擅长Vue3 TypeScript Naive UI。任务生成注册页面组件RegisterForm.vue功能需求五个字段用户名、邮箱、密码、确认密码、验证码验证码按钮有60秒倒计时点击后禁用表单校验规则用户名4-20位字母数字下划线邮箱标准邮箱格式密码8位以上包含字母和数字确认密码跟密码一致验证码6位数字提交成功后弹窗提示“注册成功”失败弹窗提示具体错误约束条件使用script setup TypeScript所有字段有完整的类型定义interface不使用any表单校验使用 Naive UI 的useForm或Form组件自带的校验提交时只打印数据不调用真实API请先列出你的组件结构设计我确认后再生成完整代码。”你对比一下同样的需求三种提示词AI给出的代码质量完全不在一个级别。这就是为什么有人觉得AI厉害有人觉得AI鸡肋——区别全在提示词上。7. 本篇小结提示词核心公式角色 任务 约束条件给AI看示例强制思维链“请先给出你的实现思路分步骤说明等我确认后再写代码”迭代式对话一次只做一个模块提示词的质量决定了AI输出的质量下篇预告提示词学会了第4篇我们来真的——用AI写一个完整的页面从头到尾让你看看什么叫做“AI 70% 人工 30%”的高效开发。
