前端工程代码重构建议专业版提示词

角色定义 / 任务定位
以资深前端架构师兼技术视觉顾问的身份，为了生成一张既能体现代码重构专业性、又适合页面展示的视觉示意图而设计。目标是：通过对比布局、清晰层次与科技感风格，直观传达“重构前混乱 → 重构后优雅”的核心信息，辅助开发团队理解推荐的重构策略。

适用场景

技术博客或公众号文章中配套的“代码重构流程示意图”
团队内部分享PPT的封面图或过渡页
代码审查（Code Review）报告中的对比插图
开源项目README或文档中展示项目演进历史的配图


核心提示词
以下提示词可直接复制用于 Midjourney、DALL·E 3 或 Stable Diffusion 等图像生成工具：

英文基础版：Professional front‑end code refactoring diagram, side‑by‑side comparison left “before” (messy, spaghetti JavaScript) and right “after” (clean, modular TypeScript), blue‑gray color palette, tech flat design, clean background, arrows showing transition, code snippets with syntax highlighting, minimalist, 16:9 aspect ratio –‑v 6.0
进阶细节版：Data architecture visualization for front‑end engineering, showing refactoring steps (Extract Component → Split Module → Apply Design Pattern), connected by dashed lines, soft neon accent on key changes, grid background, monospace font for code, motion blur on old code, sharp focus on new code, 8k render, cinematic lighting


风格方向

整体调性：极简、专业、无冗余装饰
色彩体系：蓝灰主色（#2C3E50, #3498DB）搭配白色或浅灰背景，用少量橙色或绿色高亮重构亮点
字体建议：等宽无衬线字体（如 JetBrains Mono, Source Code Pro）用于代码块，标题使用现代无衬线（如 Inter, SF Pro）
质感：扁平化为主，可轻微添加柔和阴影或毛玻璃效果增强层次


构图建议

首选布局：左右对称对比。左侧标注“Legacy Code”，代码块密集、颜色灰暗、缩进混乱；右侧标注“Refactored Code”，代码块清晰、颜色明亮、结构分明；中间用渐变色箭头或时间线连接。
备选布局：自上而下流程图。上方放“现状问题”（混乱代码+坏味道标签），中间列出3~4个重构动作（Extract, Rename, Split, Test），下方呈现最终“健康架构”（模块化+测试覆盖）。
画面比例：16:9 横版优先，适合屏幕演示；4:3 用于文档内嵌。


细节强化

代码块内使用彩色注释（绿色代表新增，红色代表删除或废弃）
在重构前后对比区域分别放置小型统计标签（如“复杂度: 24 → 8”、“依赖数量: 12 → 3”）
添加虚线框或节点标注关键重构原则（单一职责、开闭原则等）
背景可使用浅色网格或极细点阵，体现工程感
可在右下角放置版本号或“v2.0 Refactoring”等小元素增加叙事性


使用建议

根据实际输出效果，可适当调整提示词中的颜色、箭头样式或代码语言（如将JavaScript换成React/ Vue代码）
若用于幻灯片，建议将文字标题（如“重构前后对比”）单独用PPT图层叠加，保持画面干净
多尝试不同宽高比：方形（1:1）适合社交平台配图，竖版（3:4）适合作封面图
最终图像建议输出为PNG或SVG（若支持），确保在技术文档中不失真