前端工程Agent工作流设计结构化提示词

角色定义与任务定位

请以“前端工程流程架构师”兼“技术可视化设计师”的身份进行创作。你的核心目标是：将抽象的“前端工程Agent工作流”概念，转化为一张能清晰传达其自动化、智能化、结构化特性的专业视觉图表或场景图，用于技术方案展示、团队协作沟通或创意概念表达。

适用场景

• 技术方案PPT或设计文档的配图
• 介绍自动化开发流程的博客文章或技术分享插图
• 团队内部工作流可视化看板的设计原型
• 前端工程化、AI辅助开发相关项目的概念图

核心提示词

可直接复制使用的提示词组合示例：

• 一个模块化、清晰的前端Agent工作流架构图，包含代码分析、自动构建、测试、部署等节点，赛博朋克蓝紫光效，等距视图，UI界面风格，细节丰富。
• 极简主义科技风插图，展示多个AI Agent图标在前端开发流水线（Git提交、CI/CD、监控）中协作，流动的数据线与状态指示灯，干净背景。
• 未来主义控制中心视角，巨大全息屏上可视化着实时变动的“前端工程Agent工作流”，包含依赖管理、代码审查、性能优化等模块，深邃空间背景。

风格方向

• 科技UI/数据可视化风格： 模仿专业软件（如Figma, Miro）的图表或仪表盘，使用清晰的线框、标签、状态标识。
• 极简扁平插画风： 使用简洁的几何形状、图标和有限的色彩（如科技蓝、活力橙、中性灰）来代表不同Agent和阶段。
• 赛博朋克/未来主义： 融入霓虹光效（蓝、紫、青）、透明玻璃质感、全息投影元素，强调自动化和高科技感。
• 等距视图/信息图： 采用2.5D等距视角展示工作流的各个阶段，空间感强，层次分明，易于理解流程顺序。

构图建议

• 流水线线性构图： 从左到右或循环排列，清晰展示工作流从“需求输入”到“部署上线”的各个阶段（如：规划 -> 开发 -> 集成 -> 测试 -> 部署）。
• 中心辐射状构图： 以一个核心“调度Agent”或“工程面板”为中心，向外辐射连接各个功能Agent（代码Agent、测试Agent、构建Agent等）。
• 分层架构构图： 将画面分为基础设施层、Agent层、应用层，体现工作流的系统性和结构性。
• 场景化构图： 将工作流嵌入到一个虚拟的“开发作战室”场景中，墙上是巨大的流程图，桌面上有多个屏幕显示不同Agent的实时状态。

细节强化

• 节点元素： 为每个工作流节点设计独特的图标（如齿轮代表构建、眼睛代表审查、火箭代表部署）和状态指示（闪烁、流动、对勾）。
• 数据流动： 用发光线条、箭头、粒子流连接各个节点，体现信息和指令的传递。线条可带有0/1二进制代码或JSON数据片段作为纹理。
• 色彩编码： 用不同颜色区分工作流阶段（如蓝色-开发、绿色-测试、橙色-部署）或Agent类型。
• 材质与光效： 使用半透明玻璃面板、金属边框、微妙的内部发光效果，提升科技感和质感。添加环境光、屏幕光反射。
• 文字标签： 在关键节点旁添加简洁的英文或中文标签，如“Code Review”、“Auto Test”、“CI/CD Pipeline”。

使用建议

• 生成图像时，将“核心提示词”中的一条作为主提示，并从“风格方向”和“构图建议”中选取1-2个关键词进行组合，能获得更精准的结果。
• 在提示词中明确指定“架构图”、“信息图”、“示意图”或“场景”等最终形式，有助于AI理解你的输出需求。
• 需要更高细节时，可加入“highly detailed, professional diagram, clean edges, 8k”等质量描述词。
• 此方案侧重于视觉表达，实际应用于前端工程时，需结合具体的工具链（如GitHub Actions, Jenkins, 自定义脚本）进行设计。