代码生成的提示词困境
你是否经历过：
- AI 生成的代码跑不起来
- 风格和项目完全不搭
- 缺少错误处理和边界情况
- 类型不完整或者直接用 any
这些问题的根源往往不在 AI，而在提示词。本文分享我总结的代码生成提示词模板和技巧。
提示词结构框架
一个好的代码生成提示词包含以下要素：
[技术栈] + [功能描述] + [输入输出] + [约束条件] + [示例/参考]
基础模板
## 技术栈
- 语言: TypeScript
- 框架: Vue 3 Composition API
- 状态管理: Pinia
- UI 库: Element Plus
## 功能描述
实现一个 [具体功能]
## 输入参数
- param1: 类型 - 说明
- param2: 类型 - 说明
## 输出结果
- 返回值类型
- 副作用说明
## 约束条件
- 必须使用 async/await
- 需要完整的错误处理
- 遵循 ESLint 规范
## 参考示例
[提供类似功能的代码片段]
函数生成场景
场景 1：工具函数
## 需求
实现日期格式化函数
## 输入
- date: Date | string | number - 日期对象或时间戳
- format: string - 格式模板，如 'YYYY-MM-DD HH:mm:ss'
## 输出
- string - 格式化后的日期字符串
## 格式占位符
- YYYY: 四位年份
- MM: 两位月份（补零）
- DD: 两位日期（补零）
- HH: 24小时制（补零）
- mm: 分钟（补零）
- ss: 秒（补零）
## 边界情况
- 无效日期返回空字符串
- null/undefined 返回空字符串
## 示例
formatDate(new Date('2024-01-15'), 'YYYY年MM月DD日')
// => '2024年01月15日'
场景 2：异步数据处理
## 需求
实现带缓存和重试的请求函数
## 技术要求
- TypeScript 严格模式
- 使用泛型支持类型推断
## 功能点
1. 支持请求结果缓存（可配置过期时间）
2. 失败自动重试（可配置次数和间隔）
3. 支持请求取消
4. 并发请求去重（相同 URL 只发一次）
## 接口设计
\`\`\`typescript
interface RequestOptions<T> {
url: string
method?: 'GET' | 'POST'
data?: unknown
cache?: {
enabled: boolean
ttl: number // 毫秒
}
retry?: {
times: number
delay: number
}
}
function request<T>(options: RequestOptions<T>): Promise<T>
\`\`\`
## 请给出完整实现，包含单元测试用例
组件生成场景
Vue 组件模板
## 组件名称
SearchSelect - 可搜索的下拉选择器
## 技术栈
- Vue 3.4+ <script setup> 语法
- TypeScript
- Element Plus 风格（但不依赖 Element Plus）
- Tailwind CSS
## Props
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| modelValue | string \| number | - | 选中值，支持 v-model |
| options | Option[] | [] | 选项列表 |
| placeholder | string | '请选择' | 占位文字 |
| searchable | boolean | true | 是否可搜索 |
| clearable | boolean | true | 是否可清空 |
| disabled | boolean | false | 是否禁用 |
| loading | boolean | false | 加载状态 |
## Events
| 事件 | 参数 | 说明 |
|------|------|------|
| update:modelValue | value | 值变化 |
| search | keyword | 搜索输入 |
| change | value, option | 选中变化 |
## 类型定义
\`\`\`typescript
interface Option {
label: string
value: string | number
disabled?: boolean
}
\`\`\`
## 功能要求
1. 点击展开下拉
2. 输入关键词实时过滤
3. 键盘上下选择，回车确认
4. 点击外部关闭
5. 过渡动画
## 样式要求
- 宽度自适应父容器
- 下拉最大高度 300px，超出滚动
- 搜索无结果显示"暂无数据"
React 组件模板
## 组件名称
DataTable - 数据表格
## 技术栈
- React 18+
- TypeScript
- Tailwind CSS
- 无第三方依赖
## Props 接口
\`\`\`typescript
interface Column<T> {
key: keyof T | string
title: string
width?: number | string
align?: 'left' | 'center' | 'right'
sortable?: boolean
render?: (value: unknown, record: T, index: number) => ReactNode
}
interface DataTableProps<T extends Record<string, unknown>> {
columns: Column<T>[]
data: T[]
rowKey: keyof T
loading?: boolean
bordered?: boolean
striped?: boolean
onRowClick?: (record: T, index: number) => void
onSort?: (key: string, order: 'asc' | 'desc' | null) => void
}
\`\`\`
## 功能要求
1. 列宽支持固定和自适应
2. 点击表头排序（升序/降序/无）
3. loading 时显示骨架屏
4. 空数据显示占位图
5. 行 hover 效果
## 性能要求
- 使用 React.memo 优化
- 大数据量考虑虚拟滚动
测试生成场景
单元测试模板
## 被测试函数
\`\`\`typescript
// 粘贴需要测试的函数代码
\`\`\`
## 测试框架
Vitest + @testing-library/vue
## 测试要求
1. 覆盖正常情况
2. 覆盖边界情况
3. 覆盖异常情况
4. 每个测试用例有清晰的描述
## 输出格式
\`\`\`typescript
describe('函数名', () => {
describe('正常情况', () => {
it('应该...当...', () => {})
})
describe('边界情况', () => {
it('应该...当输入为空', () => {})
})
describe('异常情况', () => {
it('应该抛出错误当...', () => {})
})
})
\`\`\`
E2E 测试模板
## 测试页面
用户登录页面
## 测试框架
Playwright
## 测试场景
### 正常登录流程
1. 访问登录页
2. 输入正确的用户名和密码
3. 点击登录按钮
4. 验证跳转到首页
5. 验证用户信息显示正确
### 登录失败场景
1. 密码错误
2. 用户不存在
3. 账户被锁定
### 边界场景
1. 空用户名提交
2. 空密码提交
3. 表单验证提示
## 请生成完整的测试代码
重构提示词技巧
代码优化
## 原始代码
\`\`\`typescript
// 粘贴需要优化的代码
\`\`\`
## 优化目标
1. 减少嵌套层级
2. 提取复用逻辑
3. 改善可读性
4. 添加类型标注
## 约束条件
- 保持功能不变
- 保持接口兼容
- 不引入新依赖
## 请输出
1. 优化后的代码
2. 每处优化的说明
拆分大文件
## 原始文件
\`\`\`typescript
// 粘贴大文件内容
\`\`\`
## 拆分要求
将这个 500 行的组件拆分为：
1. 主组件（处理布局和组合）
2. 子组件（UI 展示）
3. composable（业务逻辑）
4. 工具函数（通用逻辑）
5. 类型定义（独立文件）
## 文件组织
\`\`\`
components/
├── UserProfile/
│ ├── index.vue # 主组件
│ ├── UserAvatar.vue # 子组件
│ ├── UserStats.vue # 子组件
│ └── types.ts # 类型定义
composables/
└── useUserProfile.ts # 业务逻辑
utils/
└── userHelper.ts # 工具函数
\`\`\`
避免常见错误
❌ 错误：描述太模糊
帮我写一个表格组件
✅ 正确：具体详细
实现一个数据表格组件：
- 支持 columns 和 data 两个必填 props
- columns 包含 key, title, width, render 字段
- 支持表头点击排序
- 使用 Tailwind CSS
- 包含 loading 和 empty 状态
❌ 错误：一次要求太多
写一个完整的后台管理系统，包含用户、权限、菜单、日志...
✅ 正确：分步推进
第一步：设计系统的路由结构和目录规范
（等待输出后再请求下一步）
❌ 错误：不说明技术栈
写一个下拉选择器
✅ 正确：明确技术选型
使用 Vue 3 Composition API + TypeScript 实现下拉选择器，
样式使用 Tailwind CSS，不依赖任何 UI 框架
高级技巧
1. 提供参考实现
## 需求
实现一个 useDebounce composable
## 参考实现
类似 VueUse 的 useDebounceFn，但需要：
- 支持取消
- 支持立即执行选项
- 返回 pending 状态
## VueUse 用法参考
\`\`\`typescript
const debouncedFn = useDebounceFn(() => {
// ...
}, 1000)
\`\`\`
2. 错误示例反向约束
## 需求
实现用户表单验证
## 不要这样做
\`\`\`typescript
// 不要用 any
const validate = (form: any) => {...}
// 不要硬编码错误信息
if (!form.name) return '名称不能为空'
\`\`\`
## 应该这样做
- 使用泛型保证类型安全
- 错误信息支持 i18n
- 验证规则可配置
3. 版本约束
## 环境要求
- Node.js: >= 18
- Vue: 3.4+
- TypeScript: 5.x
- Vite: 5.x
## 注意事项
- 使用 Vue 3.4 的 defineModel 宏
- 不使用已废弃的 API
- 兼容 ESM 和 CommonJS
总结
好的代码生成提示词 = 精准的需求描述 + 完整的上下文 + 明确的约束条件
核心原则：
- 具体化：避免模糊表述
- 结构化：使用模板组织信息
- 示例化：提供参考代码或输入输出
- 约束化：说明边界和限制
- 迭代化：复杂任务分步完成
相关文章推荐：
