一、提示词工程：让AI听懂你的需求
1. 基础概念：给AI下指令的学问
想象你在教新同事写代码——要说清楚做什么、怎么做、注意哪些细节。提示词工程就是类似的过程：通过精心设计的指令，让AI生成符合预期的代码或内容。
关键要素：
- 任务目标：像写需求文档一样明确（比如“生成登录页面的Vue组件”）；
- 风格要求：如同代码评审，指定技术栈、代码规范（如“使用Composition API”）；
- 避坑指南：提前说明常见错误（如“禁止使用var声明变量”）。
- 上下文信息：涉及到的文件、组件库的文档地址等等（在cursor中使用@可以引入文件和web地址）
2. 为什么需要关注提示词？
好的提示词能：
- 减少反复调试的时间
- 避免生成无用代码（比如过时的jQuery写法）
- 保持团队代码风格统一
二、写给程序员的提示词设计指南
1. 设计原则：像写测试用例一样写提示
反例 ❌
"写个搜索功能"
正例 ✅
md 代码解读复制代码用Vue 3实现商品搜索功能，要求：
1. 使用<script setup>语法
2. 搜索框防抖处理（300ms延迟）
3. 调用/src/api/search.js中的postSearch方法
4. 展示结果时显示商品名称、价格和缩略图
5. 网络错误时弹出Element Plus的ElMessage提示
2. 优化技巧：拆解复杂需求
把大需求拆成提示链（Prompt Chaining）：
第一阶段：生成基础组件
md 代码解读复制代码用Vue 3写一个带 loading 状态的按钮组件：
- 接收loading布尔值prop
- loading时显示旋转图标
- 使用Tailwind CSS样式
第二阶段：集成到业务逻辑
md 代码解读复制代码在刚才的按钮组件基础上：
1. 点击时调用/login接口
2. 请求期间自动进入loading状态
3. 接口返回401错误时触发全局消息提示
3. 高阶技巧：让AI扮演角色
md 代码解读复制代码# 角色
你是资深前端TL，需要评审以下代码：
<此处粘贴代码>
# 审查重点
1. Vueuse是否符合最佳实践
2. 内存泄漏风险
3. 响应式数据拆分是否合理
# 要求
用代码注释的形式指出问题，并给出优化建议
三、提示词工程的具体场景（以代码生成为例）
1.前后端交互
需求：根据后台的接口代码，生成出前后端交互代码。
提示词设计：
md 代码解读复制代码# 角色
你是拥有资深经验的前端工程师，负责编写前端代码来调用后端接口，并处理接口返回的数据，将其展示在页面上。
# 目标
接口信息：后端有个搜索商品的接口/api/searchProducts，请求方法是 POST 。请求体需要包含一个参数{ "keyword": "string" }用于搜索关键词，返回的数据格式为 JSON。
# 交互流程
请写前端代码实现搜索功能，在用户输入关键词并点击搜索按钮后，根据接口请求类型，使用src/api/manage.js中的对应请求方法如postAction，构造请求体发送请求到该接口，接口响应后在页面展示符合条件的商品名称和价格。
# 接口返回结果
后端接口返回的数据格式如下：
json
[
{
"id": 1,
"name": "大米",
"price": 30
},
]
组件数据DataSource
[
{
"id": 1,
"productName": "大米",//对应接口的name字段
"price": 30//对应接口的price字段
}
]
前端页面需要将接口数据转换为组件数据DataSource。
# 要求
代码要具有良好的可读性和可维护性，遵循前端开发的最佳实践。
对接口调用进行错误处理，当网络请求失败时，要给出相应的提示信息。
提供详细的代码注释，解释每一步的操作和逻辑。
2.造mock数据
需求：生成测试用的模拟数据，需约束字段范围和数据类型。
提示词示例：
markdown 代码解读复制代码生成包含 50 条用户数据的 JSON 文件，字段要求：
- id: 自增整数（从 1 开始）
- name: 中文姓名（随机生成）
- gender: "male" 或 "female"
- createdAt: 符合 ISO 8601 格式的时间戳
3. 生成枚举
需求：创建状态码枚举类，需定义命名规范和值范围。
提示词示例：
ts 代码解读复制代码// 用 TypeScript 编写 HTTP 状态码枚举
enum HttpStatus {
OK = { code: 200, message: "请求成功" },
NOT_FOUND = { code: 404, message: "资源未找到" },
SERVER_ERROR = { code: 500, message: "服务器错误" }
}
要求：
1. 提供枚举值类型定义
2. 实现通过 code 值反向查找 message 的方法
4. 测试用例生成
需求：为 Vue 组件生成单元测试用例，覆盖边界条件。
提示词示例：
md 代码解读复制代码为以下组件生成 Vitest 测试用例：
```vue
{{ count }}
要求：
1. 测试初始值为 0
2. 测试点击后数值增加
3. 使用 Testing Library 模拟用户操作
5. 跨平台代码转换
需求：将 Vue 2 Options API 代码迁移到 Vue 3 组合式 API。
提示词示例：
markdown 代码解读复制代码将以下 Vue 2 代码转换为 Vue 3 Composition API：
```vue
{{ count }}
```
要求：
1. 使用 `
```
# 注意事项
- 使用 `defineProps` 替代 `props` 选项
- 事件发射改用 `defineEmits`
- 移除 `this` 上下文依赖
输出效果：
xml 代码解读复制代码<template>
<div>
<p>{{ count }}p>
<button @click="increment">Addbutton>
div>
template>
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
script>
6. 算法实现与复杂逻辑生成
需求：生成前端防抖函数并集成到搜索组件。
提示词示例：
markdown 代码解读复制代码用 TypeScript 实现防抖函数：
1. 函数名为 `debounce`
2. 支持自定义延迟时间（默认 300ms）
3. 返回的函数可传递泛型参数
4. 提供使用示例：
```vue
// 在搜索输入框中使用防抖
const handleSearch = debounce((keyword: string) => {
searchAPI(keyword)
}, 500)
7. 代码重构与优化
需求：用策略模式优化 Vue 表单验证逻辑。
提示词示例：
ini 代码解读复制代码重构以下表单验证代码：
```vue
const validate = (type: string, value: string) => {
if (type === 'email') {
return /^[^\s@]+@[^\s@]+.[^\s@]+$/.test(value)
} else if (type === 'phone') {
return /^1[3-9]\d{9}$/.test(value)
}
}
要求：
1. 定义 ValidationStrategy 接口
2. 实现 EmailStrategy 和 PhoneStrategy
3. 通过策略模式调用验证方法
8. 代码审查与安全扫描
需求：检测 Vue 项目中的 XSS 漏洞。
提示词示例：
xml 代码解读复制代码审查以下代码片段：
```vue
<template>
<div v-html="userContent">div>
template>
要求：
1. 识别潜在安全风险
2. 提供修复方案
3. 给出安全的替代代码示例
四、注意事项与局限性
- 潜在问题：
- 样式粗制滥造，不够精美，建议配合组件库使用，或者给出优秀的html模板作为样例
- 极易产生ai幻觉，例如引入组件的地址【ai经常喜欢瞎编文件路径】、定义data变量中的初始值等等
总结
提示词工程是释放大模型潜力的关键，通过明确目标、结构化设计和持续优化，可在代码生成等场景中显著提升效率。未来，随着模型理解能力的增强，提示词工程将更趋智能化和自动化
评论记录：
回复评论：