大语言模型自动化生成前端前端工程师的 Prompt 工程实战指南与高质量测试用例效能探索前言我是大山哥。上周帮团队做 AI 代码生成培训时产品经理小张问我大山哥为什么我用 AI 写代码总是不如你写的好我笑了笑不是你不行是你不会说话同样一个需求用不同的方式提问AI 给出的代码质量天差地别。兄弟Prompt 工程是开发者的新技能今天我就来分享前端工程师必备的 Prompt 工程实战指南。一、 Prompt 工程核心原则1.1 基本原则原则描述示例明确性清晰描述需求写一个 React 按钮组件 vs 写一个支持多种状态的 React 按钮组件具体性提供详细约束支持 primary/secondary/danger 三种样式上下文提供背景信息这是一个企业级后台系统需要符合设计规范格式要求指定输出格式输出 TypeScript 代码包含类型定义质量标准定义验收标准代码需要有完整的单元测试1.2 反模式// ❌ 不好的 Prompt const badPrompts [ 写个按钮, 优化这段代码, 帮我做个页面, ]; // ✅ 好的 Prompt const goodPrompts [ 写一个 React 按钮组件支持 primary/secondary/danger 三种样式包含 loading 状态使用 Tailwind CSS, 优化这段 Vue 代码提升性能减少不必要的重渲染添加防抖处理, 创建一个用户登录页面包含表单验证、记住密码功能使用 React TypeScript Vite, ];二、 技术场景 Prompt 模板2.1 代码生成模板const codeGenerationTemplate 你是一位资深前端工程师请按照以下要求生成代码 ## 任务描述 {taskDescription} ## 技术栈 - React 18 - TypeScript - Tailwind CSS 3 - Vite ## 实现要求 1. 代码结构清晰有良好的命名规范 2. 包含完整的类型定义 3. 遵循 React 最佳实践 4. 代码可直接运行 ## 输出格式 \\\typescript // 代码文件路径{filePath} {code} \\\ ;2.2 代码审查模板const codeReviewTemplate 你是一位资深前端架构师请审查以下代码并提供改进建议 ## 代码 \\\typescript {code} \\\ ## 审查维度 1. **性能优化**是否存在性能瓶颈 2. **代码质量**是否符合最佳实践 3. **类型安全**TypeScript 类型是否完整 4. **可维护性**代码结构是否清晰 5. **安全性**是否存在安全风险 ## 输出格式 ### 问题分析 - [问题1] 描述... - [问题2] 描述... ### 改进建议 - [建议1] 具体改进方案... - [建议2] 具体改进方案... ### 优化后代码 \\\typescript {optimizedCode} \\\ ;三、 实战案例3.1 案例一组件生成// Prompt const prompt 写一个 React 数据卡片组件包含以下功能 1. 显示标题、数值、单位 2. 支持趋势指示上升/下降 3. 显示趋势百分比 4. 支持自定义图标 5. 支持渐变色背景 使用 TypeScript Tailwind CSS提供完整的类型定义。 ; // 生成的代码 interface DataCardProps { title: string; value: number | string; unit?: string; trend?: up | down | neutral; trendValue?: string; icon?: React.ReactNode; gradient?: string; } export default function DataCard({ title, value, unit , trend neutral, trendValue , icon, gradient from-blue-500 to-purple-500 }: DataCardProps) { const trendColor { up: text-green-500, down: text-red-500, neutral: text-gray-500, }[trend]; const trendIcon { up: ↑, down: ↓, neutral: , }[trend]; return ( div className{relative overflow-hidden rounded-2xl bg-gradient-to-br ${gradient} p-6 shadow-lg} {icon div classNameabsolute top-4 right-4 opacity-20{icon}/div} div classNamerelative p classNametext-white/70 text-sm font-medium mb-2{title}/p div classNameflex items-baseline gap-1 span classNametext-white text-3xl font-bold{value}/span {unit span classNametext-white/70 text-lg{unit}/span} /div {trendValue ( div className{mt-2 flex items-center gap-1 ${trendColor}} span{trendIcon}/span span classNametext-sm font-medium{trendValue}/span /div )} /div /div ); } // 使用示例 function Dashboard() { return ( div classNamegrid grid-cols-2 gap-4 DataCard title今日销售额 value¥12,345 trendup trendValue12.5% / DataCard title活跃用户 value8,523 trenddown trendValue-2.3% gradientfrom-green-500 to-teal-500 / /div ); }3.2 案例二性能优化// Prompt const prompt 优化以下 React 搜索组件解决性能问题 \\\tsx function Search({ onSearch }: { onSearch: (query: string) void }) { const [query, setQuery] useState(); const handleChange (e: React.ChangeEventHTMLInputElement) { setQuery(e.target.value); onSearch(e.target.value); }; return ( input typetext value{query} onChange{handleChange} placeholder搜索... / ); } \\\ 问题每次输入都触发搜索导致频繁的 API 调用。 请提供优化方案。 ; // 优化后代码 function Search({ onSearch }: { onSearch: (query: string) void }) { const [query, setQuery] useState(); const debouncedSearch useMemo( () debounce(onSearch, 300), [onSearch] ); useEffect(() { if (query.trim()) { debouncedSearch(query); } }, [query, debouncedSearch]); useEffect(() { return () { debouncedSearch.cancel(); }; }, [debouncedSearch]); return ( input typetext value{query} onChange{(e) setQuery(e.target.value)} placeholder搜索... / ); } function debounceT extends (...args: unknown[]) void( fn: T, delay: number ): T { cancel: () void } { let timeoutId: ReturnTypetypeof setTimeout | null null; const debounced ((...args: unknown[]) { if (timeoutId) { clearTimeout(timeoutId); } timeoutId setTimeout(() { fn(...args); }, delay); }) as T; debounced.cancel () { if (timeoutId) { clearTimeout(timeoutId); timeoutId null; } }; return debounced; }四、 Prompt 优化技巧4.1 角色设定const rolePrompts { seniorEngineer: 你是一位拥有10年经验的资深前端工程师精通 React、Vue、TypeScript熟悉性能优化和最佳实践。, architect: 你是一位前端架构师擅长系统设计、技术选型和架构优化。, debugger: 你是一位调试专家能够快速定位和解决复杂的代码问题。, reviewer: 你是一位代码审查专家关注代码质量、安全性和可维护性。, };4.2 约束条件const constraintExamples [ 代码行数不超过 50 行, 不使用第三方状态管理库, 必须支持 IE11, 代码需要通过 ESLint 检查, 需要包含完整的单元测试, ];4.3 迭代优化async function iterativePromptOptimization( initialPrompt: string, iterations: number 3 ): Promisestring { let prompt initialPrompt; for (let i 0; i iterations; i) { const result await callLLM(prompt); const feedbackPrompt 请分析以下输出并提供改进建议 ## 原始 Prompt ${prompt} ## 输出结果 ${result} ## 改进建议 请指出 Prompt 中需要改进的地方以便获得更好的结果。 ; const feedback await callLLM(feedbackPrompt); prompt refinePrompt(prompt, feedback); } return prompt; } function refinePrompt(original: string, feedback: string): string { return ${original}\n\n## 优化建议\n${feedback}; }五、 评估指标interface PromptQualityMetrics { clarity: number; completeness: number; specificity: number; relevance: number; resultQuality: number; } class PromptEvaluator { evaluate(prompt: string, result: string): PromptQualityMetrics { const metrics: PromptQualityMetrics { clarity: this.assessClarity(prompt), completeness: this.assessCompleteness(prompt), specificity: this.assessSpecificity(prompt), relevance: this.assessRelevance(prompt, result), resultQuality: this.assessResultQuality(result), }; return metrics; } private assessClarity(prompt: string): number { const score prompt.length 50 ? 80 : 50; return prompt.includes(明确) || prompt.includes(具体) ? score 10 : score; } private assessCompleteness(prompt: string): number { const requiredElements [技术栈, 功能, 输出格式, 约束]; const matched requiredElements.filter(el prompt.includes(el)).length; return (matched / requiredElements.length) * 100; } private assessSpecificity(prompt: string): number { const specifics [TypeScript, React, Vue, 组件, 功能]; const matched specifics.filter(s prompt.includes(s)).length; return Math.min((matched / specifics.length) * 100, 100); } private assessRelevance(prompt: string, result: string): number { const keywords prompt.split(/\s/).filter(w w.length 3); const matched keywords.filter(k result.includes(k)).length; return (matched / keywords.length) * 100; } private assessResultQuality(result: string): number { const qualityIndicators [ export, interface, function, const, return, ]; const matched qualityIndicators.filter(i result.includes(i)).length; return (matched / qualityIndicators.length) * 100; } }六、 实践工作流async function generateCodeWithAI(task: string): Promisestring { const prompt buildPrompt(task); const result await callLLM(prompt); const evaluator new PromptEvaluator(); const metrics evaluator.evaluate(prompt, result); if (metrics.resultQuality 70) { const refinedPrompt await iterativePromptOptimization(prompt); return await callLLM(refinedPrompt); } return result; } function buildPrompt(task: string): string { return ${rolePrompts.seniorEngineer} ## 任务 ${task} ## 技术要求 - 使用 TypeScript - 遵循最佳实践 - 代码可直接运行 ## 输出格式 \\\typescript {code} \\\ .trim(); }七、 避坑指南避免模糊不要使用写一个组件这种模糊的描述⚠️提供上下文告诉 AI 你的项目背景和约束❌不要假设明确说明你想要的输出格式⚡迭代改进如果结果不满意尝试调整 Prompt验证输出AI 生成的代码需要人工审查总结Prompt 工程是前端工程师的新技能掌握它可以大幅提高 AI 辅助开发的效率和质量。一个好的 Prompt 应该具备明确性、具体性、上下文、格式要求和质量标准。记住会提问才会高效别整那些花里胡哨的技术散文了去优化你的 Prompt 吧