结构化前端工程代码审查优化提示词

角色定义与任务定位

请以“前端架构可视化设计师”的身份，专注于将“代码审查与优化”这一技术性过程，转化为逻辑清晰、视觉友好、具有指导意义的结构化图表或概念图。你的核心目标是：通过视觉语言，系统化地呈现审查流程、问题归类、优化策略及最佳实践，使复杂的前端工程概念变得直观、易懂且易于执行。

适用场景

• 团队内部代码审查规范的可视化指南
• 技术分享中，用于解释前端代码质量维度的演示材料
• 新人工程师入职培训中的代码标准学习图
• 项目复盘时，对代码优化路径的总结与展示
• 技术文档中，替代纯文字说明的流程示意图

核心提示词

• 主干结构： 结构化前端代码审查与优化流程图，信息架构清晰
• 核心层级： 输入(待审查代码) -> 审查维度(性能、安全、可维护性、规范) -> 问题分类 -> 优化建议 -> 输出(优化后代码/报告)
• 视觉元素： 模块化框图、连接线、颜色编码标签、轻量级代码片段图标、上升箭头（代表优化）、检查清单符号
• 氛围基调： 专业、严谨、清晰、现代、具有科技感与秩序感

风格方向

• 视觉风格： 现代极简主义图表、扁平化设计、等距投影插图、或专业工具（如Miro、Draw.io）风格的线框图表
• 色彩方向： 主色调采用蓝色系（象征技术与理性），辅以绿色（通过/优化）、橙色（警告/待改进）、红色（错误/高风险）进行状态区分。背景为干净的白色或浅灰色。
• 质感细节： 平滑的圆角矩形、细微的投影或描边以区分层级、简洁的线性图标、清晰的字体排版。

构图建议

• 中心放射式： 以“代码审查”为核心节点，向四周辐射出不同审查维度（如性能、安全等）。
• 垂直流程图： 从上至下展示从“代码提交”到“优化合并”的完整线性流程，并在各阶段展开分支细节。
• 矩阵网格： 将审查维度作为横轴，问题严重性/优先级作为纵轴，在网格中定位具体问题点及其优化方案。
• 镜头语言： 宏观视角展示完整流程全景，配合局部特写镜头聚焦于某个关键优化案例（如“懒加载优化前后对比”）。

细节强化

• 在“性能”维度下： 可细化出“加载性能”、“渲染性能”、“运行时效率”子块，并关联图标（时钟、仪表盘、闪电）。
• 在“问题分类”旁： 添加简化的真实代码前后对比片段，突出修改点（如将“for循环”改为“map函数”）。
• 在“优化建议”节点： 使用引注方式列出具体工具或规则名称（如“使用ESLint规则: prefer-const”、“通过Webpack Bundle Analyzer分析”）。
• 整体点缀： 添加表示数据流动的箭头动画感、在关键路径上添加微弱的发光效果以引导视线。

使用建议

• 本提示词框架可直接用于生成视觉图表的概念草稿或详细设计图。用户可根据自身项目特点，替换或深化“审查维度”和“优化建议”中的具体内容。
• 在生成具体图像时，建议将“核心提示词”中的层级与“风格方向”、“构图建议”相结合，例如：“一幅采用垂直流程图构图、扁平化蓝色系风格的‘前端代码审查优化全流程图’，重点突出性能与安全两个维度的细节。”
• 可尝试将最终视觉成果封装为团队知识库的封面图或指导手册的插图，使其成为可重复使用的工程资产。