2025新年快乐兄弟们。今年开始投入AI的怀抱，再不学习真要没了
你们有没有过这种崩溃时刻？
- 让 AI“写一段 JavaScript 数组去重的代码”，它返回的是 Python 的
set()实现； - 让 AI“帮我改前端组件的 Bug”，它扯了一堆 React 生命周期，可我用的是 Vue3；
- 让 AI“生成一个营销文案”，结果读起来像机器人在念说明书——“我们的产品非常优秀，欢迎购买”……
直到有天我看到 OpenAI 工程师说：“AI 的输出质量，90%取决于你‘提问的清晰度’”——原来不是 AI 笨，是我根本没“说清楚需求”！
这篇文章是我30 天学习+实战的总结：没有复杂术语，全是“学习者踩过的坑、摸透的技巧、直接能用的模板”。如果你也想从“被 AI 坑”变成“用 AI 爽”，往下看就对了～
一、先搞懂：AI 提示词的“底层逻辑”——像“点奶茶”一样和 AI 对话
学提示词工程的第一步，不是记“规则”，而是理解**“AI 是你的‘工具人’，你得教它‘怎么做’”**。
我把提示词拆解成4 大核心组成部分，用“点奶茶”的例子类比，瞬间就懂了：
| 组成部分 | 类比“点奶茶”的场景 | 作用说明 |
|---|---|---|
| 指令 | “我要一杯珍珠奶茶” | 给 AI 的明确任务（必须回答“做什么”，不能模糊） |
| 上下文 | “我要热的、少糖、不要芋圆” | 给 AI 的背景信息（让它站在你的角度理解需求，避免歧义） |
| 输入数据 | “加一份波霸” | AI 要处理的原材料（比如代码片段、文本内容，没有就省略） |
| 输出格式 | “打包带走，杯套要可爱的” | 要求 AI 返回的结果形式（比如列表、表格、代码块，避免“答非所问”） |
举个“能落地”的例子：让 AI 生成 Vue3 组件的注释
比如我想让 AI 帮我写 Vue3 组件的 JSDoc 注释，按这 4 部分写提示词，结果会精准到“不用改”：
指令：帮我写一段 Vue3 组件的 JSDoc 注释；
上下文：我是前端新手，刚写了一个<UserList>组件，功能是展示用户列表，用了 Composition API，想让注释清晰到“同事看了就会用”；
输入数据：组件代码片段（const UserList = defineComponent({ props: { users: { type: Array as PropType<User[]>, required: true } }, setup(props) { /* ... */ } })）；
输出格式：用 JSDoc 标准，包含组件用途、Props 说明、使用示例，语言简洁，不用复杂术语。
AI 返回的结果直接能用：
/**
* 用户列表展示组件（Vue3 Composition API）
* @component UserList
* @description 用于展示用户信息列表，支持传入用户数组渲染
*
* @props {User[]} users - 要展示的用户数组（必填）
* @propsExample <UserList :users="[{ id: 1, name: '张三' }]" />
*
* @example
* // 在父组件中使用
* <template>
* <UserList :users="userList" />
* </template>
*
* <script setup>
* import UserList from './UserList.vue'
* const userList = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
* </script>
*/💡 关键结论：这 4 部分不是“必须全有”，但越全，AI 的输出越精准——比如你让 AI“改代码”，至少要加“上下文：这是 Vue3 的组件代码，报错是‘Props validation failed: users is required’”，否则 AI 根本不知道要修什么！
二、基础技巧：从“模糊”到“明确”的 3 个关键——我踩过的坑你别踩
我最开始学提示词时，犯的最多错误是**“把‘形容词’当‘要求’”**——比如“写个好的函数”“改一下代码”，结果 AI 的输出总是“差口气”。
后来我总结了 3 个**“让提示词变明确”的技巧**，直接解决 90%的“答非所问”：
1. 把“抽象形容词”换成“可衡量的标准”——AI 听不懂“好的”，但懂“具体的”
❌ 坏例子（模糊）：“帮我写个好的 JavaScript 函数”（“好的”是抽象词，AI 不知道你要什么）；
✅ 好例子（明确）：“帮我写一个 JavaScript 的数组去重函数，要求：① 参数是arr: any[]（需要去重的数组）；② 返回值是any[]（去重后的数组）；③ 用 ES6 的Set实现（性能好）；④ 带 JSDoc 注释（说明参数和返回值）”。
2. 用“示例法（Few-Shot）”教 AI“怎么做”——给它“标准答案”，它会学得更快
如果你要让 AI 做“分类、翻译、代码优化”这类任务，给它几个“正确例子”，比“讲规则”管用 10 倍——这就是 AI 领域的“小样本学习（Few-Shot Learning）”。
比如我想让 AI“分类 JavaScript 代码片段是‘数组操作’还是‘字符串操作’”，给 2 个例子，AI 立刻就会：
示例 1：代码：
const newArr = arr.filter(item => item > 10);→ 分类：数组操作；
示例 2：代码：const newStr = str.replace('hello', 'hi');→ 分类：字符串操作；
现在请分类：const newArr = [...new Set(arr)];
AI 会立刻返回：“分类：数组操作”——比直接说“帮我分类代码”准 10 倍！
3. 限定“输出格式”——让 AI“按你的要求交付结果”
如果你需要 AI 返回结构化内容（比如代码块、列表、表格），一定要明确“输出格式”——否则它可能返回一大段文字，你还要自己整理。
比如我想让 AI 帮我总结“JavaScript 常用数组方法”，用表格输出，提示词这么写：
指令：帮我总结 JavaScript 常用的数组方法；
输出格式：表格，包含“方法名、功能说明、示例代码”3 列，每列不超过 50 字，示例用 ES6 写法。
AI 返回的结果直接能用，不用再排版：
| 方法名 | 功能说明 | 示例代码 |
|---|---|---|
map() | 遍历数组，返回新数组 | arr.map(item => item * 2) |
filter() | 过滤数组，返回符合条件 | arr.filter(item => item > 10) |
reduce() | 累加数组元素，返回值 | arr.reduce((sum, item) => sum + item, 0) |
三、进阶技巧：让 AI“会思考”的 2 个方法——解决“复杂问题”
当你要处理逻辑推理、代码调试、长文本分析这类任务，光用基础技巧不够——你得让 AI“学会思考”。
我亲测有效的 2 个方法，直接解决“AI 答不对复杂问题”的痛点：
1. 思维链（Chain of Thought）：让 AI“一步步想”——像“教小朋友做数学题”
对于需要“拆解步骤”的问题（比如代码调试、逻辑推理），不要让 AI“直接给答案”，要让它**“把思考过程写出来”**。
比如我遇到 Vue3 的报错：TypeError: Cannot read property 'name' of undefined，用“思维链”写提示词，AI 会跟着我的思路找 Bug：
指令：帮我调试这段 Vue3 代码的报错；
上下文：我写了一个<UserCard>组件，想展示用户的name，但报错“Cannot read property 'name' of undefined”；
输入数据：组件代码（const UserCard = defineComponent({ props: { user: { type: Object } }, setup(props) { return { userName: props.user.name } } })）；
要求：按“1. 报错原因 → 2. 修改思路 → 3. 修改后的代码”的步骤说明。
AI 返回的结果，直接帮我定位到问题：
- 报错原因：
props.user可能是undefined（比如父组件没传user属性），导致props.user.name无法读取；- 修改思路：给
userprops 加“默认值”或“非空校验”，避免undefined；- 修改后的代码：
jsconst UserCard = defineComponent({ props: { user: { type: Object, required: true, // 加非空校验，父组件必须传user default: () => ({ name: '未知用户' }), // 加默认值，兜底 }, }, setup(props) { return { userName: props.user.name } }, })
2. 自我反思（Self-Reflection）：让 AI“自己检查错误”——避免“漏信息”
有时候 AI 的输出会“漏要点”，比如我让它“写一篇 Vue3 的新手教程”，结果漏了“Composition API 的基本用法”。这时候可以让 AI**“自我检查”**：
指令：帮我写一篇 Vue3 的新手教程；
要求：写完后，检查是否覆盖了“① 为什么用 Vue3？② Composition API 的基本用法？③ 一个实战组件示例？”这 3 点，如果没覆盖，请补充。
AI 会先返回教程，然后自动补充遗漏的部分：
补充：之前的教程漏了“Composition API 的基本用法”，现在补充：
Composition API 是 Vue3 的核心，用setup()函数代替 Vue2 的data()和methods，比如：js// Vue3 Composition API示例 const Counter = defineComponent({ setup() { const count = ref(0) // 响应式数据 const increment = () => { count.value++ } // 方法 return { count, increment } // 暴露给模板 }, })
四、实战案例：我用提示词解决的 3 个真实问题——直接抄作业
学技巧不用，等于白学。这部分是我用提示词解决的真实任务，你可以直接套模板：
1. 代码优化：让 AI 帮我简化 Vue3 的计算属性
我写了一段 Vue3 的计算属性，逻辑很绕，用提示词让 AI 帮我简化：
指令：帮我简化这段 Vue3 的计算属性代码；
上下文：我想计算“已完成的任务占比”，原代码逻辑太复杂，想让它更简洁；
输入数据：原代码（const completedRatio = computed(() => { const completed = tasks.filter(item => item.done).length; return completed / tasks.length * 100 + '%' })）；
要求：用 ES6 的箭头函数简化，保持逻辑不变。
AI 返回的代码，直接省了 3 行：
const completedRatio = computed(
() =>
`${(
(tasks.filter((item) => item.done).length / tasks.length) *
100
).toFixed(2)}%`
)2. 文本生成：让 AI 帮我写“Vue3 组件的 README”
我开发了一个 Vue3 的ImageUpload组件，想写 README 让用户会用，用提示词生成：
指令：帮我写一段 Vue3
ImageUpload组件的 README；
上下文：用户是前端开发者，想快速知道“组件能做什么、怎么用、注意事项”；
输出格式：结构分成“① 组件功能 → ② 安装方法 → ③ 使用示例 → ④ 注意事项”，用 Markdown 格式，语言简洁。
AI 生成的 README，我只改了“安装命令”，直接用在 GitHub 上：
# Vue3 ImageUpload 组件
## ① 组件功能
用于图片上传，支持：
- 限制文件类型（仅图片）；
- 限制文件大小（默认 2MB）；
- 预览上传的图片。
## ② 安装方法
```bash
npm install @your-org/image-upload --save
```③ 使用示例
<template>
<ImageUpload :max-size="2" // 最大2MB @upload-success="handleUpload" />
</template>
<script setup>
import ImageUpload from '@your-org/image-upload'
const handleUpload = (url) => {
console.log('图片上传成功：', url)
}
</script>④ 注意事项
- 需配置后端接口接收文件（组件默认上传到
/api/upload）； - 支持自定义上传接口（通过
action属性修改）。
3. 问题排查：让 AI 帮我解决“Vue3 路由跳转不刷新”的 Bug
我遇到“Vue3 路由跳转后，组件不刷新”的问题，用提示词让 AI 帮我排查：
指令：帮我解决 Vue3 路由跳转后组件不刷新的问题；
上下文：我用vue-router的router.push()跳转，但<UserDetail>组件的setup()函数不重新执行，导致数据不更新；
要求：按“1. 问题原因 → 2. 解决方法 → 3. 代码示例”说明。
AI 返回的结果，直接帮我搞定：
- 问题原因：Vue3 的组件默认是“缓存的”，路由跳转不会重新创建组件实例；
- 解决方法：用
router.afterEach()钩子强制刷新，或给组件加key属性（监听路由变化）； - 代码示例（加
key属性）：
<template>
<router-view :key="$route.fullPath" />
<!-- 加key，路由变化时重新渲染 -->
</template>五、我踩过的 5 个“致命误区”——你别再犯
最后总结我学习时踩过的坑，帮你少走弯路：
❌ 误区 1：用“抽象形容词”代替“具体要求”
比如“帮我写个好的函数”→ 改成“帮我写一个 JavaScript 的数组去重函数，用Set实现，带 JSDoc 注释”。
❌ 误区 2：忽略“上下文”——让 AI“猜你的需求”
比如“帮我改代码”→ 改成“帮我改这段 Vue3 的组件代码，报错是‘Cannot read property 'name' of undefined’，上下文是我想展示用户的name”。
❌ 误区 3：“过度简化”提示词
比如“写篇文章”→ 改成“写一篇面向前端新手的 Vue3 文章，包含‘Composition API’‘组件通信’2 个要点，用‘我之前学 Vue2 踩过的坑’举例子”
❌ 误区 4：不限制“输出格式”
比如“总结文章”→ 改成“总结这篇 Vue3 的文章，分 3 点，每点不超过 200 字，用列表展示”
❌ 误区 5：“不敢多写”
提示词不是“越短越好”，而是“越明确越好”。多写 10 个字，AI 的输出可能好 10 倍
六、写在最后：AI 提示词工程的“本质”——和 AI“好好说话”
学了 30 天，我最大的感悟是：AI 提示词不是“玄学”，而是“沟通技巧”——你越能“把需求拆碎、说清楚”，AI 就越能成为你的“超级助理”。
现在我用 AI 写代码、改文档、生成教程，再也不会“被坑”了——反而经常惊喜于“AI 的输出比我想的还周到”。
比如我让它“写一段 Vue3 的测试代码”，它会自动加上“边界情况的测试用例”（比如空数组、undefined），比我自己想的还全。
附录：我的“常用提示词模板”（直接抄）
最后送你 3 个“万能模板”，覆盖 90%的需求：
- 代码生成：“帮我写一个
[功能]的 JavaScript/Vue3 代码，要求：
① 参数是[参数列表]； ② 返回值是[返回值类型]； ③ 用[技术栈/方法]实现（比如 ES6 的 Set、Vue3 的 Composition API）； ④ 带[注释类型]（比如 JSDoc、中文注释）。”
💡 示例：“帮我写一个 Vue3 的‘图片预览’组件代码 要求： ① 参数是
imgUrl: string（图片地址）、isShow: boolean（是否显示）； ② 返回值是组件实例； ③ 用 Composition API+Teleport 实现（弹层挂载到 body）； ④ 带中文注释说明弹层的显示逻辑。”
- 文本生成模板：“帮我写一段
[类型]文本（比如营销文案、技术文档、博客），面向[读者]（比如前端新手、产品经理、普通用户），包含[要点]（比如产品的 3 个特点、技术的 2 个优势），用[风格]（比如口语化、专业、可爱）表达，输出格式是[格式]（比如 Markdown 列表、HTML 段落、纯文本）。”
💡 示例：“帮我写一段‘Vue3 比 Vue2 好在哪’的博客片段” 要求： ① 面向刚学 Vue 的大学生 ② 包含‘Composition API 更灵活、性能提升 30%、更好的 TypeScript 支持’3 个要点 ③ 用‘我学 Vue2 踩过的坑’举例子，输出格式是 Markdown 段落
- 问题排查模板：“帮我解决
[技术领域]的问题（比如 Vue3、JavaScript、前端工程化），问题是[具体现象]（比如‘组件不刷新’‘代码报错’‘性能卡顿’），上下文是[背景信息]（比如‘我用了 Vue3 的 Composition API’‘代码是数组去重的逻辑’），要求按[步骤]（比如‘1. 问题原因 → 2. 解决方法 → 3. 代码示例’）说明。”
💡 示例：帮我解决 JavaScript 的‘内存泄漏’问题 问题: ‘页面打开 10 分钟后浏览器卡顿’ 上下文: ‘我用了 setInterval 循环调用接口，没清除定时器’ 要求: 按‘1. 问题原因 → 2. 解决方法 → 3. 代码示例’ 说明
这些模板我每天都用，直接套就能解决 80%的 AI 使用问题——兄弟们，别再瞎写提示词了，用模板把需求“拆碎”，AI 比你想象中“听话”！
七、最后想说：AI 提示词工程，是“学会沟通”，不是“学规则”
很多人觉得“提示词工程是玄学”，但我学下来发现：它的本质是“学会用 AI 能理解的方式，表达你的需求”——就像你跟同事提需求，得说“帮我改一下这个 Vue 组件，把按钮颜色换成 #0070f3 ，字体大小 14px”，而不是“帮我把按钮弄好看点”。
现在我用 AI 的流程是这样的：
1. 明确需求：“我要什么？”（比如“写一个 Vue3 的表格组件”）；
2. 拆解需求：“用什么技术？要什么功能？输出什么格式？”（比如“用 Composition API，支持排序、筛选，输出代码块+中文注释”）；
3. 按模板写提示词：把拆解的需求“填”进模板里；
4. 调整优化：如果 AI 输出不对，加“上下文”或“示例”，比如“我要的是 Vue3 的组件，不是 React 的”。给新手的 3 个建议
- 多试：别怕写长提示词，多写 10 个字，AI 的输出可能好 10 倍；
- 多总结：把自己常用的场景写成“专属模板”（比如“我经常要写 Vue3 组件的注释，模板是……”）；
- 多抄：直接用我上面的模板，套到你的需求里，比自己瞎想管用。
兄弟们，AI 不是“替代你的工具”，而是“帮你提高效率的助理”——学会“和 AI 好好说话”，你会发现：以前要花 1 小时写的代码、改的文档、查的问题，现在 10 分钟就能搞定！
如果这篇文章帮到了你，点个赞再走～ 有问题评论区留，我帮你改提示词！ 😊
参考资料（权威但易懂）：
- OpenAI 官方提示词指南：Best practices for prompt engineering with OpenAI API
- Vue3 官方文档：Composition API 基础
- 本文链接：https://fridolph.top/posts/2025-01-04__ai-tips
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
