别再瞎写 Prompt 了！LLM 调用与提示工程实战指南，让 AI 真的听懂你说话
从「AI 听不懂人话」到「精准控制输出」，这篇文带你掌握 LLM 调用的核心技巧，附 10+ 个实战 Prompt 模板
🎯 前言：为什么你的 AI 总是「答非所问」？
你是不是也遇到过这些场景：
场景 1：写代码
你：帮我写一个登录功能
AI：[返回了一堆 HTML/CSS/JS 代码，但没有后端，没有验证，没有错误处理]
你：...这不是我想要的
场景 2：写文章
你：帮我写一篇关于 Vue 3 的文章
AI：[返回了 500 字的泛泛而谈，没有深度，没有实战]
你：...太水了
场景 3：数据分析
你：帮我分析这个数据
AI：[返回了一些通用的分析，没有针对性]
你：...这谁不会？
问题出在哪？
不是你不够聪明，也不是 AI 不够智能，而是你没有掌握「提示工程」（Prompt Engineering）！
提示工程是什么？
简单说：和 AI 沟通的「艺术」和「科学」
就像你教新员工，你说得越清楚，他做得越好。AI 也一样！
📚 一、LLM 调用基础（10 分钟速成）
1. 什么是 LLM？
LLM（Large Language Model）= 大语言模型
常见的有：
- 🤖 OpenAI: GPT-3.5, GPT-4
- 🦙 Meta: Llama 2/3
- 🐘 Google: Gemini
- 🦜 Anthropic: Claude
- 🇨🇳 国内：通义千问、文心一言、混元等
2. 如何调用 LLM？
方式一：直接调用 API（推荐）
// 使用 OpenAI SDK
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
const response = await openai.chat.completions.create({
model: 'gpt-4',
messages: [
{ role: 'system', content: '你是一名专业的 Vue 开发工程师' },
{ role: 'user', content: '帮我写一个组件' }
],
temperature: 0.7
});
console.log(response.choices[0].message.content);
方式二：使用 LangChain（更灵活）
import { ChatOpenAI } from '@langchain/openai';
import { PromptTemplate } from 'langchain/prompts';
const llm = new ChatOpenAI({
temperature: 0.7,
model: 'gpt-4'
});
const prompt = PromptTemplate.fromTemplate(
'你是一名{role}，请{task}'
);
const chain = prompt.pipe(llm);
const response = await chain.invoke({
role: 'Vue 开发工程师',
task: '写一个响应式组件'
});
console.log(response.content);
方式三：使用前端库（适合快速原型）
// 使用 openai 库
import { OpenAI } from 'openai';
async function chatWithAI(message) {
const openai = new OpenAI({ apiKey: 'sk-xxx' });
const completion = await openai.chat.completions.create({
messages: [
{ role: 'system', content: '你是一个有帮助的助手' },
{ role: 'user', content: message }
],
model: 'gpt-4',
});
return completion.choices[0].message.content;
}
3. 核心参数详解
| 参数 | 说明 | 推荐值 | 作用 |
|---|---|---|---|
| model | 模型版本 | gpt-4 / gpt-3.5-turbo | 决定智能程度 |
| temperature | 随机性 | 0.0-0.3 (精确) / 0.7-1.0 (创意) | 控制输出多样性 |
| max_tokens | 最大输出长度 | 256-2000 | 控制回复长度 |
| top_p | 核采样 | 0.9 | 另一种随机性控制 |
| frequency_penalty | 频率惩罚 | 0.0-2.0 | 减少重复 |
| presence_penalty | 存在惩罚 | 0.0-2.0 | 鼓励新话题 |
Temperature 实战对比：
// temperature = 0.0 (确定性最高)
// 每次输出几乎一样，适合代码生成、数据分析
// temperature = 0.7 (平衡)
// 适合大多数场景，有一定创造性但不离谱
// temperature = 1.0 (最随机)
// 每次输出差异大，适合创意写作、头脑风暴
🎨 二、提示工程核心技巧（20 分钟精通）
技巧 1：角色设定（Role Prompting）
❌ 错误示范：
帮我写一个 Vue 组件
✅ 正确示范：
你是一名有 5 年经验的高级 Vue 开发工程师，擅长编写高性能、可复用的组件。
请帮我写一个响应式表格组件，要求：
- 使用 Vue 3 Composition API
- 支持虚拟滚动
- 包含排序、筛选功能
- 代码要有详细注释
效果对比：
- 错误示范：返回基础代码，无注释，功能不全
- 正确示范：返回专业代码，有注释，功能完整
技巧 2：Few-Shot Learning（少样本学习）
给 AI 提供示例，让它学习模式：
const prompt = `
你是一个数据格式化专家。
示例 1:
输入：{"name": "张三", "age": 25, "city": "北京"}
输出：张三，25 岁，居住在北京
示例 2:
输入：{"name": "李四", "age": 30, "city": "上海"}
输出：李四，30 岁，居住在上海
现在请格式化：
输入：{"name": "王五", "age": 28, "city": "广州"}
输出：
`;
适用场景：
- 数据转换
- 格式标准化
- 模式识别
技巧 3：思维链（Chain of Thought）
让 AI 展示思考过程：
const prompt = `
请逐步分析这个问题：
问题：如何优化一个加载 10000 条数据的列表？
请按照以下步骤思考：
1. 分析性能瓶颈
2. 列出可能的优化方案
3. 评估每个方案的优缺点
4. 给出最终推荐方案
开始分析：
`;
效果： AI 会输出详细的分析过程，而不是直接给答案
技巧 4：约束输出格式
❌ 错误示范：
帮我提取这些数据的名称
✅ 正确示范：
请从以下数据中提取名称，并以 JSON 数组格式返回：
数据：[...大量数据...]
输出格式要求：
```json
[ "名称 1", "名称 2", "名称 3"]
只返回 JSON，不要其他文字。
### 技巧 5：分步任务（Step-by-Step）
复杂任务拆分成小步骤：
```javascript
const prompt = `
请完成以下任务，每一步都要输出结果：
步骤 1：分析用户需求
步骤 2：设计组件结构
步骤 3：编写核心代码
步骤 4：添加错误处理
步骤 5：编写使用示例
现在开始步骤 1：
`;
技巧 6：负面约束（Negative Constraints）
明确告诉 AI 不要做什么：
const prompt = `
请写一个登录组件。
要求：
✅ 使用 Vue 3 Composition API
✅ 包含表单验证
✅ 支持密码显示/隐藏
❌ 不要使用 class 组件
❌ 不要硬编码密码
❌ 不要省略错误处理
`;
技巧 7：上下文增强
提供充分的背景信息：
const prompt = `
项目背景：
- 这是一个电商后台管理系统
- 使用 Vue 3 + TypeScript + Element Plus
- 需要支持多租户
- 用户量预计 10 万+
任务：
请设计一个用户管理模块，包括：
1. 用户列表（支持分页、搜索、筛选）
2. 用户详情（展示用户信息、操作日志）
3. 权限管理（角色、权限分配）
技术栈：
- Vue 3 Composition API
- Pinia 状态管理
- Axios 网络请求
- Element Plus UI 组件
请给出完整的设计方案和核心代码。
`;
技巧 8：迭代优化
第一次不满意？让 AI 自己改进：
// 第一轮
const response1 = await callLLM('帮我写一个登录组件');
// 第二轮（基于第一轮结果优化）
const response2 = await callLLM(`
这是我之前的代码：${response1}
请优化：
1. 添加 TypeScript 类型定义
2. 改进错误处理
3. 添加单元测试示例
4. 优化性能
`);
技巧 9：系统提示词（System Prompt）
设置 AI 的「人设」：
const messages = [
{
role: 'system',
content: `你是一名资深的前端架构师，有 10 年 Vue 开发经验。
你的特点：
- 代码简洁、优雅、可维护
- 注重性能优化
- 善于使用设计模式
- 会给出最佳实践建议
请始终用专业的态度回答问题。`
},
{
role: 'user',
content: '如何设计一个大型 Vue 项目？'
}
];
技巧 10：元提示（Meta Prompting）
让 AI 帮你写 Prompt：
const prompt = `
我需要让 AI 帮我写一个 Vue 组件，请帮我写一个高质量的 Prompt。
要求：
- 明确角色
- 提供充分上下文
- 指定输出格式
- 包含约束条件
请输出这个 Prompt。
`;
🎮 三、实战 Prompt 模板库（10+ 个即用模板）
模板 1：代码生成
const codeGenerationPrompt = `
你是一名资深的前端工程师，擅长编写高质量、可维护的代码。
任务：{task}
技术栈：
- 框架：{framework}
- 语言：{language}
- UI 库：{uiLibrary}
要求：
1. 使用最新的技术规范
2. 代码要有详细注释
3. 包含错误处理
4. 遵循最佳实践
5. 提供使用示例
请输出完整代码。
`;
使用示例：
const prompt = codeGenerationPrompt
.replace('{task}', '创建一个响应式表格组件')
.replace('{framework}', 'Vue 3')
.replace('{language}', 'TypeScript')
.replace('{uiLibrary}', 'Element Plus');
模板 2：代码审查
const codeReviewPrompt = `
你是一名代码审查专家，请审查以下代码：
\`\`\`{code}\`\`\`
请从以下角度分析：
1. 代码质量（可读性、可维护性）
2. 性能问题
3. 安全性问题
4. 潜在 Bug
5. 改进建议
输出格式：
## 📊 代码审查报告
### ✅ 优点
- [列出优点]
### ⚠️ 问题
- [列出问题]
### 💡 改进建议
- [给出具体建议]
### 📝 优化后的代码
\`\`\`
[优化后的代码]
\`\`\`
`;
模板 3：技术文档生成
const docGenerationPrompt = `
请为以下代码生成技术文档：
\`\`\`{code}\`\`\`
文档要求：
1. 组件功能说明
2. Props 列表（类型、必填、默认值、说明）
3. Events 列表
4. Slots 说明
5. 使用示例
6. 最佳实践
输出格式：Markdown
`;
模板 4：Bug 调试
const debugPrompt = `
我遇到了一个 Bug，请帮我分析：
## 问题描述
{problem}
## 相关代码
\`\`\`{code}\`\`\`
## 错误信息
{error}
## 已尝试的解决方案
{attempts}
请：
1. 分析可能的原因
2. 给出调试步骤
3. 提供解决方案
4. 解释为什么会出现这个问题
`;
模板 5：技术方案设计
const architecturePrompt = `
我需要设计一个{systemType}系统。
## 需求
- {requirements}
## 约束条件
- {constraints}
## 技术栈偏好
- {techStack}
请给出：
1. 系统架构设计
2. 核心模块划分
3. 数据流设计
4. 关键技术选型及理由
5. 潜在风险及应对方案
6. 实施路线图
请用专业的技术文档格式输出。
`;
模板 6：学习路径规划
const learningPathPrompt = `
我想学习{topic}，目前水平是{currentLevel}。
请为我制定一个学习路径：
1. 基础知识（必学）
2. 进阶技能（选学）
3. 实战项目（巩固）
4. 资源推荐（书籍、课程、文档）
5. 时间规划（预计学习时长）
要求：
- 循序渐进
- 理论与实践结合
- 包含实战项目
- 推荐优质资源
`;
模板 7：数据转换
const dataTransformationPrompt = `
请将以下数据从{inputFormat}格式转换为{outputFormat}格式：
输入数据：
\`\`\`{data}\`\`\`
转换规则：
{rules}
输出要求：
- 只返回转换后的数据
- 不要额外解释
- 保持数据完整性
`;
模板 8：性能优化建议
const performancePrompt = `
请分析以下代码的性能问题：
\`\`\`{code}\`\`\`
请从以下角度分析：
1. 渲染性能
2. 内存使用
3. 网络请求
4. 计算复杂度
5. 打包体积
给出具体优化建议和代码示例。
`;
模板 9：单元测试生成
const unitTestPrompt = `
请为以下代码编写单元测试：
\`\`\`{code}\`\`\`
测试框架：{testFramework}
要求：
1. 覆盖主要功能
2. 包含边界情况
3. 包含错误处理测试
4. 测试代码要有注释
5. 遵循测试最佳实践
请输出完整的测试代码。
`;
模板 10：API 设计
const apiDesignPrompt = `
请设计一个{apiType}的 RESTful API。
功能需求：
{features}
要求：
1. 符合 RESTful 规范
2. 包含请求/响应格式
3. 包含错误码定义
4. 包含认证/授权方案
5. 包含速率限制建议
输出格式：OpenAPI 3.0 规范
`;
🔧 四、实战项目：智能代码助手
让我们做一个**「智能代码助手」**，它能：
- 📝 生成代码
- 🔍 审查代码
- 🐛 调试 Bug
- 📚 生成文档
1. 项目结构
ai-code-assistant/
├── src/
│ ├── index.js # 入口
│ ├── llm.js # LLM 调用封装
│ ├── prompts.js # Prompt 模板
│ └── utils.js # 工具函数
├── .env
└── package.json
2. LLM 调用封装
// src/llm.js
import OpenAI from 'openai';
class LLMService {
constructor() {
this.openai = new OpenAI({
apiKey: process.env.OPENAI_API_KEY
});
}
async chat(messages, options = {}) {
const response = await this.openai.chat.completions.create({
model: options.model || 'gpt-4',
messages,
temperature: options.temperature ?? 0.7,
max_tokens: options.maxTokens ?? 2000,
top_p: options.topP ?? 0.9,
});
return response.choices[0].message.content;
}
async generateCode(prompt, techStack = {}) {
const messages = [
{
role: 'system',
content: `你是一名资深前端工程师，擅长编写高质量代码。
技术栈偏好：
- 框架：${techStack.framework || 'Vue 3'}
- 语言：${techStack.language || 'TypeScript'}
- UI 库：${techStack.uiLibrary || 'Element Plus'}
请遵循最佳实践，代码要有详细注释。`
},
{ role: 'user', content: prompt }
];
return this.chat(messages, { temperature: 0.3 }); // 代码生成需要低随机性
}
async reviewCode(code, context = '') {
const messages = [
{
role: 'system',
content: '你是一名代码审查专家，请从代码质量、性能、安全性等角度进行审查。'
},
{
role: 'user',
content: `请审查以下代码：\n\n\`\`\`\n${code}\n\`\`\`\n\n上下文：${context}`
}
];
return this.chat(messages, { temperature: 0.5 });
}
async debugBug(problem, code, error, attempts = '') {
const messages = [
{
role: 'system',
content: '你是一名调试专家，擅长定位和解决复杂 Bug。'
},
{
role: 'user',
content: `
问题描述：${problem}
相关代码：
\`\`\`
${code}
\`\`\`
错误信息：${error}
已尝试的解决方案：${attempts}
请分析原因并给出解决方案。
`
}
];
return this.chat(messages, { temperature: 0.5 });
}
async generateDocs(code, type = 'component') {
const messages = [
{
role: 'system',
content: '你是一名技术文档专家，请为代码生成详细的技术文档。'
},
{
role: 'user',
content: `请为以下${type}生成技术文档：\n\n\`\`\`\n${code}\n\`\`\``
}
];
return this.chat(messages, { temperature: 0.3 });
}
}
export default new LLMService();
3. Prompt 模板库
// src/prompts.js
export const PROMPTS = {
// 代码生成
CODE_GENERATION: (task, techStack) => `
你是一名资深前端工程师。
任务：${task}
技术栈：
- 框架：${techStack?.framework || 'Vue 3'}
- 语言：${techStack?.language || 'TypeScript'}
- UI 库：${techStack?.uiLibrary || 'Element Plus'}
要求：
1. 使用最新的技术规范
2. 代码要有详细注释
3. 包含错误处理
4. 遵循最佳实践
5. 提供使用示例
请输出完整代码。
`,
// 代码审查
CODE_REVIEW: (code, context) => `
请审查以下代码：
\`\`\`
${code}
\`\`\`
上下文：${context}
请从以下角度分析：
1. 代码质量（可读性、可维护性）
2. 性能问题
3. 安全性问题
4. 潜在 Bug
5. 改进建议
输出格式：
## 📊 代码审查报告
### ✅ 优点
- [列出优点]
### ⚠️ 问题
- [列出问题]
### 💡 改进建议
- [给出具体建议]
### 📝 优化后的代码
\`\`\`
[优化后的代码]
\`\`\`
`,
// Bug 调试
DEBUG_BUG: (problem, code, error, attempts) => `
我遇到了一个 Bug，请帮我分析：
## 问题描述
${problem}
## 相关代码
\`\`\`
${code}
\`\`\`
## 错误信息
${error}
## 已尝试的解决方案
${attempts}
请：
1. 分析可能的原因
2. 给出调试步骤
3. 提供解决方案
4. 解释为什么会出现这个问题
`,
// 文档生成
GENERATE_DOCS: (code, type) => `
请为以下${type}生成技术文档：
\`\`\`
${code}
\`\`\`
文档要求：
1. 功能说明
2. API 文档（Props/Events/Slots）
3. 使用示例
4. 最佳实践
5. 注意事项
输出格式：Markdown
`
};
export default PROMPTS;
4. 使用示例
// src/index.js
import llm from './llm.js';
import PROMPTS from './prompts.js';
// 生成代码
const code = await llm.generateCode(
'创建一个响应式表格组件，支持排序、筛选、分页',
{ framework: 'Vue 3', language: 'TypeScript', uiLibrary: 'Element Plus' }
);
// 审查代码
const review = await llm.reviewCode(code, '这是一个电商后台管理系统');
// 调试 Bug
const debug = await llm.debugBug(
'表格排序功能不工作',
code,
'TypeError: Cannot read property \'sort\' of undefined',
'已经检查了数据类型，确认是数组'
);
// 生成文档
const docs = await llm.generateDocs(code, '组件');
console.log('生成的代码:', code);
console.log('代码审查:', review);
console.log('调试结果:', debug);
console.log('技术文档:', docs);
📊 五、提示工程最佳实践总结
1. 通用原则
| 原则 | 说明 | 示例 |
|---|---|---|
| 明确角色 | 告诉 AI 它是谁 | "你是一名资深工程师" |
| 提供上下文 | 给足背景信息 | "这是一个电商系统" |
| 具体任务 | 说清楚要做什么 | "创建一个表格组件" |
| 约束条件 | 明确限制 | "使用 Vue 3 + TypeScript" |
| 输出格式 | 指定返回格式 | "输出 JSON 格式" |
| 示例引导 | 提供 Few-Shot | "示例 1... 示例 2..." |
| 分步执行 | 复杂任务拆分 | "步骤 1... 步骤 2..." |
| 迭代优化 | 不满意就改进 | "请优化之前的代码" |
2. 常见错误
❌ 错误 1：太模糊
帮我写代码
✅ 正确：
请用 Vue 3 + TypeScript 写一个响应式表格组件，支持排序、筛选、分页
❌ 错误 2：缺少上下文
优化这个性能
✅ 正确：
这是一个加载 10000 条数据的列表，目前首屏加载需要 5 秒，请优化性能
❌ 错误 3：没有约束
写一个登录功能
✅ 正确：
写一个登录功能，要求：
- 使用 Vue 3 Composition API
- 包含表单验证
- 支持密码显示/隐藏
- 包含错误处理
- 不要使用 class 组件
3. 进阶技巧
技巧 1：自反思（Self-Reflection）
const prompt = `
请完成以下任务：{task}
完成后，请自我审查：
1. 是否满足了所有要求？
2. 是否有遗漏？
3. 是否有改进空间？
如果有问题，请重新生成。
`;
技巧 2：多视角（Multiple Perspectives）
const prompt = `
请从以下角度分析这个问题：
1. 前端工程师视角
2. 后端工程师视角
3. 用户体验视角
4. 安全工程师视角
然后给出综合建议。
`;
技巧 3：对比分析（Comparison）
const prompt = `
请比较以下两种方案的优缺点：
方案 1：{solution1}
方案 2：{solution2}
从以下维度对比：
- 性能
- 可维护性
- 开发效率
- 学习成本
给出最终推荐。
`;
🎓 六、学习资源
✅ 总结
通过这篇文章，我们学会了：
- ✅ LLM 调用基础（API 调用、参数配置）
- ✅ 提示工程 10 大技巧（角色设定、Few-Shot、思维链等）
- ✅ 10+ 个实战 Prompt 模板（代码生成、审查、调试等）
- ✅ 完整项目实战（智能代码助手）
- ✅ 最佳实践与常见错误
提示工程不是「魔法」，而是「沟通的艺术」！
你越清楚自己想要什么，AI 就能给你越好的结果。
🚀 下一步
- 练习 10 个 Prompt 模板，熟练掌握
- 建立自己的 Prompt 库，复用优质模板
- 尝试不同模型，找到最适合的
- 学习高级技巧（Agent、工具调用等）
- 分享你的经验，帮助他人
现在，轮到你动手实践了！🎉
如果觉得这篇文章对你有帮助，欢迎点赞、收藏、评论！也欢迎关注我，获取更多 AI 开发实战经验。
参考资料
作者：一名热爱 AI 应用开发的前端工程师
本文代码已开源，欢迎 Star 和 Fork！
