实战型前端工程Agent工作流设计提示词

角色定义与任务定位

请以资深前端架构师兼流程优化专家的身份进行创作。你的核心目标是：设计一套高度自动化、可协作、且紧密贴合现代前端工程实践的智能体（Agent）工作流方案。这份方案旨在可视化或阐述如何利用多个AI Agent协同工作，来提升前端开发在代码生成、质量保障、部署运维等环节的效率与规范性。

适用场景

• 为技术团队绘制下一代前端智能化开发平台的架构图或流程图。
• 撰写技术方案文档，阐述多Agent系统如何介入需求分析、编码、测试、部署全链路。
• 设计用于演示或概念验证（PoC）的交互式工作流原型示意图。
• 为新工具或内部平台设计用户操作引导视图。

核心提示词

可直接用于图像生成或作为文档章节标题的核心表述：

• “模块化前端工程Agent协作网络：从需求解析到自动部署”
• “基于事件驱动的多Agent前端工作流：代码生成Agent、审查Agent、构建部署Agent的协同”
• “实战导向：集成ESLint、Jest、Webpack的AI Agent流水线设计”
• “可视化前端Agent工作台：展示需求输入、任务分解、Agent调度、结果反馈的闭环”

风格方向

• 技术蓝图风格：采用清晰的线框、模块化框图、数据流箭头，色彩以科技蓝、深灰、亮绿为主，体现专业与严谨。
• 极简现代UI风格：模拟Figma或Miro等协作工具界面，展示Agent作为可拖拽的“智能卡片”，连线表示交互，背景干净。
• 信息图表风格：使用图标化代表不同Agent（如齿轮代表构建Agent，放大镜代表审查Agent），通过时间线或循环图展示工作流阶段。
• 暗色代码编辑器风格：背景为深色，将工作流步骤以高亮注释或代码折叠区块的形式嵌入，突出开发者视角。

构图建议

• 采用横向流程图：从左至右依次排列“需求输入 -> 任务规划Agent -> 代码生成Agent -> 代码审查Agent -> 测试Agent -> 构建部署Agent -> 监控反馈”。
• 采用辐射状中心构图：将“工作流调度中枢”置于中心，周围环绕各个功能Agent，连线表示调用关系。
• 采用分层架构图
  • 用户层：展示开发者或产品经理的指令输入界面。
  • Agent协调层：核心调度器、任务队列、通信总线。
  • 功能执行层：并列展示代码、审查、测试等具体Agent模块。
  • 工具与平台层：集成Git、CI/CD、云平台等外部服务。

  细节强化

  • Agent具象化：为每个Agent设计简约图标和状态标识（如“忙碌”、“空闲”、“报错”）。
  • 数据流可视化：用不同颜色或样式的箭头区分“控制指令”、“代码数据”、“审查报告”、“部署状态”。
  • 关键交互标注：在连线或模块旁添加简短说明，如“传递AST语法树”、“返回Lint错误报告”、“触发容器化构建”。
  • 环境与工具：融入微小的、可识别的工具Logo（如Git、Docker、Jest、Vite）到对应环节，增强真实感。
  • 氛围：整体体现高效、智能、自动化的科技感，避免卡通或过于抽象的隐喻。

  使用建议

  • 生成图像时，将核心提示词与风格方向中的描述结合使用，例如：“模块化前端工程Agent协作网络，科技蓝图风格，干净背景，带有数据流箭头和状态指示灯，专业感”。
  • 撰写文档时，可将核心提示词作为章节主题，并依据构图建议和细节强化来展开描述每个环节的职责与交互协议。
  • 可根据实际技术栈替换示例中的工具（如将Webpack换为Vite，Jest换为Vitest），使方案更具针对性。
  • 此方案聚焦于“工作流设计”本身，如需生成具体代码，需在此基础上调用更专门的编码Agent。