前端工程师进阶提示词工程实战前置知识为什么提示词工程如此重要优质提示词的核心编写原则原则一清晰明确原则二角色设定原则三具体输出格式原则四场景化约束LangChain PromptTemplate 使用详解基础语法多变量与默认值对话模板 ChatPromptTemplateFew-Shot 示例提示词实战场景前端代码生成国内模型提示词优化技巧技巧一中文优先避免中英混杂技巧二控制提示词长度技巧三使用分隔符结构化实战前端 Bug 排查助手完整代码实现提示词效果对比优化前 vs 优化后对比测试实际输出对比结语学会问问题让 AI 输出质量提升 10 倍前置知识在开始之前我们需要掌握以下技能基础 JavaScript/TypeScript能看懂 async/await 即可LangChain 基础了解 ChatOpenAI 和 PromptTemplate 的基本用法Node.js 环境已安装 Node.js 18 版本如果对 LangChain 环境搭建还不熟悉建议先看我之前的文章《LangChain JS 入门前端快速搭建 AI 开发环境》。为什么提示词工程如此重要很多人觉得 AI “不够聪明”其实往往是我们问得不够好。同样的模型提示词的质量直接决定输出的质量。提示词类型示例效果❌ 糟糕提示词“帮我写个登录页面”输出随意风格不一致可能缺少关键功能✅ 优质提示词“用 Vue3 TypeScript 写一个登录页包含邮箱/手机号验证、记住密码功能样式用 Tailwind CSS”输出精准符合技术栈要求功能完整核心观点提示词工程不是魔法而是一套可学习、可复用的方法论。优质提示词的核心编写原则原则一清晰明确AI 无法读取你的想法提示词越清晰输出越精准。❌ 模糊版帮我解释一下响应式 ✅ 清晰版用前端开发者的视角解释 Vue3 的响应式原理包含 Proxy 的使用300字以内原则二角色设定给 AI 一个身份它能更好地进入角色。// 角色设定模板constrolePrompt你是一个资深的前端架构师有 8 年大厂经验。 擅长技术选型、代码规范制定和性能优化。 回答要专业但易懂可以适当举例说明。;原则三具体输出格式指定输出格式让结果可预测、可解析。请按以下 JSON 格式输出 { bugType: 类型语法错误/逻辑错误/性能问题, cause: 可能原因, solution: 解决方案, codeExample: 修复后的代码示例如果需要 }原则四场景化约束结合具体场景给 AI 更精准的限制。约束维度示例长度约束回复不超过 200 字风格约束面向初级开发者通俗易懂技术栈约束只使用 Vue3 Composition API不使用 Options API禁止项不要使用 any 类型不要忽略错误处理LangChain PromptTemplate 使用详解基础语法PromptTemplate是 LangChain 中最基础的提示词模板组件使用{变量名}作为占位符。import{PromptTemplate}fromlangchain/core/prompts;// 基础用法constsimpleTemplatePromptTemplate.fromTemplate(你是一个{role}请用{style}的风格回答{question});constformattedawaitsimpleTemplate.format({role:前端技术专家,style:幽默风趣,question:解释一下闭包});console.log(formatted);// 输出你是一个前端技术专家请用幽默风趣的风格回答解释一下闭包多变量与默认值import{PromptTemplate}fromlangchain/core/prompts;consttemplatenewPromptTemplate({inputVariables:[bug,lang],template:你是一个前端代码审查专家。 【Bug描述】{bug} 【目标语言】{lang} 请完成以下任务 1. 分析 Bug 原因用 {lang} 回复 2. 提供修复方案 3. 给出修复后的代码示例 注意如果没有明确要求默认使用 JavaScript。,// 可以为变量设置默认值需要配合 partial 使用});// 部分填充预置默认值constpartialTemplateawaittemplate.partial({lang:TypeScript});对话模板 ChatPromptTemplate适用于多轮对话场景支持 system、human、ai 等角色。import{ChatPromptTemplate}fromlangchain/core/prompts;constchatPromptChatPromptTemplate.fromMessages([[system,你是一个{role}回答要{style}不超过{maxLength}字。],[human,{question}],[ai,好的我正在思考...],[human,请直接给出答案不要废话]]);constformattedawaitchatPrompt.format({role:前端 bug 排查专家,style:简洁明了,maxLength:100,question:Vue3 中 ref 和 reactive 有什么区别});Few-Shot 示例提示词实战Few-Shot少样本学习是通过提供几个示例让模型理解你的期望输出格式和风格。场景前端代码生成import{ChatOpenAI}fromlangchain/openai;import{SystemMessage,HumanMessage}fromlangchain/core/messages;importdotenvfromdotenv;dotenv.config();asyncfunctionfewShotDemo(){// 1. 定义 Few-Shot 示例constexamples[{input:写一个函数判断是否为回文数,output:/** * 判断一个整数是否为回文数 * param {number} x - 待判断的整数 * returns {boolean} - 是回文数返回 true否则返回 false */ function isPalindrome(x: number): boolean { if (x 0) return false; const str x.toString(); return str str.split().reverse().join(); }},{input:写一个函数实现防抖,output:/** * 防抖函数 * param {Function} fn - 需要防抖的函数 * param {number} delay - 延迟时间毫秒 * returns {Function} - 防抖后的函数 */ function debounceT extends (...args: any[]) any( fn: T, delay: number ): (...args: ParametersT) void { let timer: NodeJS.Timeout; return (...args: ParametersT) { clearTimeout(timer); timer setTimeout(() fn(...args), delay); }; }}];// 2. 手动构建示例文本constformattedExamplesexamples.map(ex用户需求${ex.input}\n代码输出\n${ex.output}).join(\n\n);// 3. 构建消息constsystemPrompt你是一个资深前端工程师擅长编写高质量、有注释的 TypeScript 代码。 以下是几个优秀的代码示例请参考它们的风格${formattedExamples}要求 - 必须有 JSDoc 注释 - 使用 TypeScript 类型 - 考虑边界情况 - 代码风格保持一致;constuserPrompt写一个函数实现数组去重支持对象数组根据指定字段去重;// 4. 调用模型constmodelnewChatOpenAI({apiKey:process.env.DASHSCOPE_API_KEY,configuration:{baseURL:process.env.DASHSCOPE_API_URL,},model:qwen-turbo,temperature:0.3,});constmessages[newSystemMessage(systemPrompt),newHumanMessage(userPrompt)];constresponseawaitmodel.invoke(messages);console.log(生成的代码\n);console.log(response.content);}fewShotDemo();国内模型提示词优化技巧技巧一中文优先避免中英混杂❌ 避免Please write a function to 处理数组数据 ✅ 推荐请用 JavaScript 写一个函数处理数组数据技巧二控制提示词长度阿里云百炼的qwen-turbo模型上下文窗口为 1M tokens但提示词过长会影响响应速度。// 将复杂提示词拆分为多个小提示词constshortPrompts[角色设定你是一个前端专家,任务分析以下代码的性能问题,代码codeSnippet];// 或者使用精简表达constconcisePrompt【角色】前端专家 | 【任务】分析性能问题 | 【代码】${codeSnippet};技巧三使用分隔符结构化conststructuredPrompt 角色设定 你是一个严谨的前端代码审查专家 输入代码 \\\typescript${userCode}\\\ 输出要求 请按以下格式输出 1. 严重程度【高/中/低】 2. 问题描述【具体问题】 3. 修复建议【方案】 4. 优化后代码【代码示例】 注意事项 - 不要输出多余的解释 - 优先关注性能和安全问题;实战前端 Bug 排查助手完整代码实现创建src/bug-assistant.tsimport{ChatPromptTemplate}fromlangchain/core/prompts;import{ChatOpenAI}fromlangchain/openai;importdotenvfromdotenv;dotenv.config();asyncfunctionbugAssistant(){// 定义系统提示词 - 转义 JSON 中的花括号constsystemPrompt你是一个专业的前端 Bug 排查助手。 【你的能力】 - 快速定位 JavaScript/TypeScript 代码中的问题 - 分析 Vue3 / React 框架相关的常见坑点 - 提供可执行的修复方案 【输出格式】 请严格按照以下 JSON 格式返回 {{bugType: 类型语法错误/逻辑错误/性能问题/兼容性问题/框架使用错误, severity: 严重程度高/中/低, rootCause: 根本原因分析一句话概括, solution: 解决方案具体步骤, fixedCode: 修复后的代码如适用, prevention: 如何避免类似问题}} 【注意事项】 - 如果无法确定请说明需要更多信息 - 不要猜测基于代码本身分析 - 保持专业、简洁;// 定义用户提示词模板 - 使用转义的花括号constuserPromptTemplate【Bug 描述】 {description} 【相关代码】 \\\{lang} {code} \\\ 【错误信息如有】 {errorMsg} 【环境信息】 - 框架{framework} - 版本{version};constpromptChatPromptTemplate.fromMessages([[system,systemPrompt],[human,userPromptTemplate]]);constmodelnewChatOpenAI({apiKey:process.env.DASHSCOPE_API_KEY,configuration:{baseURL:process.env.DASHSCOPE_API_URL,},model:qwen-turbo,temperature:0.2,// Bug 排查需要准确降低温度});constchainprompt.pipe(model);// 测试用例Vue3 响应式丢失问题consttestCase{description:修改 reactive 对象后页面没有更新,lang:typescript,code:const state reactive({ count: 0 }); function increment() { // 这样做页面不会更新 state { count: state.count 1 }; },errorMsg:没有报错但页面没反应,framework:Vue3,version:3.3.0};console.log( 正在分析 Bug...\n);console.log(【Bug 描述】${testCase.description});console.log(【代码】\n${testCase.code}\n);constresponseawaitchain.invoke(testCase);console.log( 分析结果\n);console.log(response.content);// 尝试提取和解析 JSONtry{// 从响应中提取 JSON 对象constcontentresponse.contentasstring;constjsonMatchcontent.match(/\{[\s\S]*\}/);if(jsonMatch){constresultJSON.parse(jsonMatch[0]);console.log( Bug 类型,result.bugType);console.log(⚠️ 严重程度,result.severity);console.log( 根本原因,result.rootCause);console.log( 解决方案,result.solution);if(result.fixedCode){console.log( 修复代码\n,result.fixedCode);}console.log(️ 预防建议,result.prevention);}else{// 如果不是 JSON 格式直接输出console.log(content);}}catch(error){console.error(JSON 解析失败直接显示原始输出);console.log(response.content);}}bugAssistant();提示词效果对比优化前 vs 优化后对比测试维度❌ 优化前✅ 优化后提示词“帮我修复这个 bug” 代码结构化提示词角色格式示例约束输出结构随意段落可能遗漏关键信息固定 JSON 格式包含 type/severity/solution/fixedCode代码质量可能没有注释类型不完整有 JSDoc使用 TypeScript考虑边界情况响应时间较长需要自己组织输出更快格式约束后生成效率高可用率~60%需要人工二次处理~95%可直接解析使用实际输出对比优化前输出你的代码有问题state 不能重新赋值要用 state.count 来修改。建议了解一下 Vue3 的响应式原理…优化后输出JSON{bugType:框架使用错误,severity:高,rootCause:reactive 对象被整体重新赋值导致响应式连接丢失,solution:直接修改对象属性不要重新赋值整个对象,fixedCode:const state reactive({ count: 0 });\n\nfunction increment() {\n state.count;\n},prevention:避免直接重新赋值 reactive 对象而是修改其属性或使用 ref 来包装对象}结语提示词工程是 AI 应用开发中投入产出比最高的技能之一。掌握本文介绍的编写原则和 LangChain PromptTemplate 用法你就能让 AI 输出质量提升 10 倍。对于文章中错误的地方或有任何疑问欢迎在评论区留言讨论
前端工程师进阶提示词工程实战
前端工程师进阶提示词工程实战前置知识为什么提示词工程如此重要优质提示词的核心编写原则原则一清晰明确原则二角色设定原则三具体输出格式原则四场景化约束LangChain PromptTemplate 使用详解基础语法多变量与默认值对话模板 ChatPromptTemplateFew-Shot 示例提示词实战场景前端代码生成国内模型提示词优化技巧技巧一中文优先避免中英混杂技巧二控制提示词长度技巧三使用分隔符结构化实战前端 Bug 排查助手完整代码实现提示词效果对比优化前 vs 优化后对比测试实际输出对比结语学会问问题让 AI 输出质量提升 10 倍前置知识在开始之前我们需要掌握以下技能基础 JavaScript/TypeScript能看懂 async/await 即可LangChain 基础了解 ChatOpenAI 和 PromptTemplate 的基本用法Node.js 环境已安装 Node.js 18 版本如果对 LangChain 环境搭建还不熟悉建议先看我之前的文章《LangChain JS 入门前端快速搭建 AI 开发环境》。为什么提示词工程如此重要很多人觉得 AI “不够聪明”其实往往是我们问得不够好。同样的模型提示词的质量直接决定输出的质量。提示词类型示例效果❌ 糟糕提示词“帮我写个登录页面”输出随意风格不一致可能缺少关键功能✅ 优质提示词“用 Vue3 TypeScript 写一个登录页包含邮箱/手机号验证、记住密码功能样式用 Tailwind CSS”输出精准符合技术栈要求功能完整核心观点提示词工程不是魔法而是一套可学习、可复用的方法论。优质提示词的核心编写原则原则一清晰明确AI 无法读取你的想法提示词越清晰输出越精准。❌ 模糊版帮我解释一下响应式 ✅ 清晰版用前端开发者的视角解释 Vue3 的响应式原理包含 Proxy 的使用300字以内原则二角色设定给 AI 一个身份它能更好地进入角色。// 角色设定模板constrolePrompt你是一个资深的前端架构师有 8 年大厂经验。 擅长技术选型、代码规范制定和性能优化。 回答要专业但易懂可以适当举例说明。;原则三具体输出格式指定输出格式让结果可预测、可解析。请按以下 JSON 格式输出 { bugType: 类型语法错误/逻辑错误/性能问题, cause: 可能原因, solution: 解决方案, codeExample: 修复后的代码示例如果需要 }原则四场景化约束结合具体场景给 AI 更精准的限制。约束维度示例长度约束回复不超过 200 字风格约束面向初级开发者通俗易懂技术栈约束只使用 Vue3 Composition API不使用 Options API禁止项不要使用 any 类型不要忽略错误处理LangChain PromptTemplate 使用详解基础语法PromptTemplate是 LangChain 中最基础的提示词模板组件使用{变量名}作为占位符。import{PromptTemplate}fromlangchain/core/prompts;// 基础用法constsimpleTemplatePromptTemplate.fromTemplate(你是一个{role}请用{style}的风格回答{question});constformattedawaitsimpleTemplate.format({role:前端技术专家,style:幽默风趣,question:解释一下闭包});console.log(formatted);// 输出你是一个前端技术专家请用幽默风趣的风格回答解释一下闭包多变量与默认值import{PromptTemplate}fromlangchain/core/prompts;consttemplatenewPromptTemplate({inputVariables:[bug,lang],template:你是一个前端代码审查专家。 【Bug描述】{bug} 【目标语言】{lang} 请完成以下任务 1. 分析 Bug 原因用 {lang} 回复 2. 提供修复方案 3. 给出修复后的代码示例 注意如果没有明确要求默认使用 JavaScript。,// 可以为变量设置默认值需要配合 partial 使用});// 部分填充预置默认值constpartialTemplateawaittemplate.partial({lang:TypeScript});对话模板 ChatPromptTemplate适用于多轮对话场景支持 system、human、ai 等角色。import{ChatPromptTemplate}fromlangchain/core/prompts;constchatPromptChatPromptTemplate.fromMessages([[system,你是一个{role}回答要{style}不超过{maxLength}字。],[human,{question}],[ai,好的我正在思考...],[human,请直接给出答案不要废话]]);constformattedawaitchatPrompt.format({role:前端 bug 排查专家,style:简洁明了,maxLength:100,question:Vue3 中 ref 和 reactive 有什么区别});Few-Shot 示例提示词实战Few-Shot少样本学习是通过提供几个示例让模型理解你的期望输出格式和风格。场景前端代码生成import{ChatOpenAI}fromlangchain/openai;import{SystemMessage,HumanMessage}fromlangchain/core/messages;importdotenvfromdotenv;dotenv.config();asyncfunctionfewShotDemo(){// 1. 定义 Few-Shot 示例constexamples[{input:写一个函数判断是否为回文数,output:/** * 判断一个整数是否为回文数 * param {number} x - 待判断的整数 * returns {boolean} - 是回文数返回 true否则返回 false */ function isPalindrome(x: number): boolean { if (x 0) return false; const str x.toString(); return str str.split().reverse().join(); }},{input:写一个函数实现防抖,output:/** * 防抖函数 * param {Function} fn - 需要防抖的函数 * param {number} delay - 延迟时间毫秒 * returns {Function} - 防抖后的函数 */ function debounceT extends (...args: any[]) any( fn: T, delay: number ): (...args: ParametersT) void { let timer: NodeJS.Timeout; return (...args: ParametersT) { clearTimeout(timer); timer setTimeout(() fn(...args), delay); }; }}];// 2. 手动构建示例文本constformattedExamplesexamples.map(ex用户需求${ex.input}\n代码输出\n${ex.output}).join(\n\n);// 3. 构建消息constsystemPrompt你是一个资深前端工程师擅长编写高质量、有注释的 TypeScript 代码。 以下是几个优秀的代码示例请参考它们的风格${formattedExamples}要求 - 必须有 JSDoc 注释 - 使用 TypeScript 类型 - 考虑边界情况 - 代码风格保持一致;constuserPrompt写一个函数实现数组去重支持对象数组根据指定字段去重;// 4. 调用模型constmodelnewChatOpenAI({apiKey:process.env.DASHSCOPE_API_KEY,configuration:{baseURL:process.env.DASHSCOPE_API_URL,},model:qwen-turbo,temperature:0.3,});constmessages[newSystemMessage(systemPrompt),newHumanMessage(userPrompt)];constresponseawaitmodel.invoke(messages);console.log(生成的代码\n);console.log(response.content);}fewShotDemo();国内模型提示词优化技巧技巧一中文优先避免中英混杂❌ 避免Please write a function to 处理数组数据 ✅ 推荐请用 JavaScript 写一个函数处理数组数据技巧二控制提示词长度阿里云百炼的qwen-turbo模型上下文窗口为 1M tokens但提示词过长会影响响应速度。// 将复杂提示词拆分为多个小提示词constshortPrompts[角色设定你是一个前端专家,任务分析以下代码的性能问题,代码codeSnippet];// 或者使用精简表达constconcisePrompt【角色】前端专家 | 【任务】分析性能问题 | 【代码】${codeSnippet};技巧三使用分隔符结构化conststructuredPrompt 角色设定 你是一个严谨的前端代码审查专家 输入代码 \\\typescript${userCode}\\\ 输出要求 请按以下格式输出 1. 严重程度【高/中/低】 2. 问题描述【具体问题】 3. 修复建议【方案】 4. 优化后代码【代码示例】 注意事项 - 不要输出多余的解释 - 优先关注性能和安全问题;实战前端 Bug 排查助手完整代码实现创建src/bug-assistant.tsimport{ChatPromptTemplate}fromlangchain/core/prompts;import{ChatOpenAI}fromlangchain/openai;importdotenvfromdotenv;dotenv.config();asyncfunctionbugAssistant(){// 定义系统提示词 - 转义 JSON 中的花括号constsystemPrompt你是一个专业的前端 Bug 排查助手。 【你的能力】 - 快速定位 JavaScript/TypeScript 代码中的问题 - 分析 Vue3 / React 框架相关的常见坑点 - 提供可执行的修复方案 【输出格式】 请严格按照以下 JSON 格式返回 {{bugType: 类型语法错误/逻辑错误/性能问题/兼容性问题/框架使用错误, severity: 严重程度高/中/低, rootCause: 根本原因分析一句话概括, solution: 解决方案具体步骤, fixedCode: 修复后的代码如适用, prevention: 如何避免类似问题}} 【注意事项】 - 如果无法确定请说明需要更多信息 - 不要猜测基于代码本身分析 - 保持专业、简洁;// 定义用户提示词模板 - 使用转义的花括号constuserPromptTemplate【Bug 描述】 {description} 【相关代码】 \\\{lang} {code} \\\ 【错误信息如有】 {errorMsg} 【环境信息】 - 框架{framework} - 版本{version};constpromptChatPromptTemplate.fromMessages([[system,systemPrompt],[human,userPromptTemplate]]);constmodelnewChatOpenAI({apiKey:process.env.DASHSCOPE_API_KEY,configuration:{baseURL:process.env.DASHSCOPE_API_URL,},model:qwen-turbo,temperature:0.2,// Bug 排查需要准确降低温度});constchainprompt.pipe(model);// 测试用例Vue3 响应式丢失问题consttestCase{description:修改 reactive 对象后页面没有更新,lang:typescript,code:const state reactive({ count: 0 }); function increment() { // 这样做页面不会更新 state { count: state.count 1 }; },errorMsg:没有报错但页面没反应,framework:Vue3,version:3.3.0};console.log( 正在分析 Bug...\n);console.log(【Bug 描述】${testCase.description});console.log(【代码】\n${testCase.code}\n);constresponseawaitchain.invoke(testCase);console.log( 分析结果\n);console.log(response.content);// 尝试提取和解析 JSONtry{// 从响应中提取 JSON 对象constcontentresponse.contentasstring;constjsonMatchcontent.match(/\{[\s\S]*\}/);if(jsonMatch){constresultJSON.parse(jsonMatch[0]);console.log( Bug 类型,result.bugType);console.log(⚠️ 严重程度,result.severity);console.log( 根本原因,result.rootCause);console.log( 解决方案,result.solution);if(result.fixedCode){console.log( 修复代码\n,result.fixedCode);}console.log(️ 预防建议,result.prevention);}else{// 如果不是 JSON 格式直接输出console.log(content);}}catch(error){console.error(JSON 解析失败直接显示原始输出);console.log(response.content);}}bugAssistant();提示词效果对比优化前 vs 优化后对比测试维度❌ 优化前✅ 优化后提示词“帮我修复这个 bug” 代码结构化提示词角色格式示例约束输出结构随意段落可能遗漏关键信息固定 JSON 格式包含 type/severity/solution/fixedCode代码质量可能没有注释类型不完整有 JSDoc使用 TypeScript考虑边界情况响应时间较长需要自己组织输出更快格式约束后生成效率高可用率~60%需要人工二次处理~95%可直接解析使用实际输出对比优化前输出你的代码有问题state 不能重新赋值要用 state.count 来修改。建议了解一下 Vue3 的响应式原理…优化后输出JSON{bugType:框架使用错误,severity:高,rootCause:reactive 对象被整体重新赋值导致响应式连接丢失,solution:直接修改对象属性不要重新赋值整个对象,fixedCode:const state reactive({ count: 0 });\n\nfunction increment() {\n state.count;\n},prevention:避免直接重新赋值 reactive 对象而是修改其属性或使用 ref 来包装对象}结语提示词工程是 AI 应用开发中投入产出比最高的技能之一。掌握本文介绍的编写原则和 LangChain PromptTemplate 用法你就能让 AI 输出质量提升 10 倍。对于文章中错误的地方或有任何疑问欢迎在评论区留言讨论
