【第四期】AI代码生成超全指南：提示词工程

一、提示词工程：让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
<template>
  <div>{{ count }}</div>
  <button @click="increment">+</button>
</template>

<script setup>
const count = ref(0)
const increment = () => count.value++
</script>

要求：
1. 测试初始值为 0
2. 测试点击后数值增加
3. 使用 Testing Library 模拟用户操作

5. 跨平台代码转换

需求：将 Vue 2 Options API 代码迁移到 Vue 3 组合式 API。
提示词示例：

markdown 复制代码

将以下 Vue 2 代码转换为 Vue 3 Composition API：
```vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>
```

要求：
1. 使用 `<script setup>` 语法
2. 用 ref 实现响应式
3. 保留模板结构
4. 添加类型声明（TypeScript）

# 转换规则
1. **数据声明**：  
   `data() { return { count: 0 } }` → `const count = ref(0)`

2. **方法迁移**：  
   `methods: { increment() {...} }` → 直接声明函数

3. **生命周期**：  
   `mounted()` → `onMounted()`（需从vue导入）

4. **计算属性**：  
   `computed: { total() {...} }` → `const total = computed(() => {...})`

# 典型差异处理
❌ Vue 2 写法  
```vue
export default {
  mixins: [loggerMixin],
  props: ['initialValue']
}
```

✅ Vue 3 转换

```
<script setup>
import { useLogger } from './logger'  // 用组合式函数替代 mixins
const props = defineProps(['initialValue'])
useLogger()  // 组合式函数调用
</script>
```

# 注意事项

-   使用 `defineProps` 替代 `props` 选项
-   事件发射改用 `defineEmits`
-   移除 `this` 上下文依赖

输出效果：

xml 复制代码

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Add</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const count = ref<number>(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变量中的初始值等等

总结

提示词工程是释放大模型潜力的关键，通过明确目标、结构化设计和持续优化，可在代码生成等场景中显著提升效率。未来，随着模型理解能力的增强，提示词工程将更趋智能化和自动化