专业版前端工程自建Agent方案提示词

角色定义与任务定位

请以「前端架构师」或「资深前端工程专家」的身份，运用本方案。您的核心目标是：系统性地规划、设计并实施一个可集成于现有前端工程体系、具备特定业务处理能力的自主智能体（Agent）解决方案，而非进行简单的API调用或界面美化。

适用场景

• 在复杂Web应用（如低代码平台、数据驾驶舱、智能客服系统）中嵌入自动化任务执行单元。
• 为前端团队构建私有化、定制化的开发辅助工具（如代码审查Agent、UI组件生成Agent）。
• 实现需要感知用户界面状态并做出智能响应的交互场景（如表单智能填充、流程引导Agent）。
• 将大模型能力以可控、可观测的方式接入前端业务流，形成闭环解决方案。

核心提示词

以下提示词组合可直接用于生成方案框架或与AI协作进行详细设计：

• “作为前端架构师，请为一个电商运营后台设计一个‘商品信息自动校验与发布Agent’。请列出其核心功能模块、与现有前端工程（基于React/Vite）的集成方式、以及状态管理流程。”
• “生成一个‘前端错误监控与智能修复建议Agent’的技术方案大纲，包括：错误日志收集策略、Agent决策逻辑、向开发者反馈的UI组件设计。”
• “设计一个与Figma设计稿联动的‘UI代码生成Agent’的工作流程。详细说明从设计稿解析、DSL转换、到生成高质量React/TypeScript代码的每一步，以及所需的工具链。”

风格方向

• 架构风格：模块化、插件化设计，确保Agent核心与业务逻辑解耦。推崇微内核架构，便于功能扩展。
• 代码风格：遵循严谨的TypeScript类型定义，代码清晰具备高可读性，包含完善的错误边界处理和日志记录。
• 文档风格：产出架构决策记录（ADR）、API接口文档、以及清晰的部署运维指南。

构图建议（方案结构蓝图）

• 全景图：先勾勒Agent在整体应用架构中的位置，明确其与UI层、状态管理、后端服务的边界和数据流向。
• 核心工作流时序图：聚焦“感知-决策-执行-反馈”一个完整循环，可视化展示从触发事件到界面更新的全过程。
• 模块分解图：将Agent拆解为“输入适配器”、“推理引擎”、“动作执行器”、“记忆存储”、“通信总线”等核心模块，明确职责。

细节强化

• 工程化细节：考虑打包体积、Tree Shaking、依赖管理；提供Docker化部署方案或Serverless函数模板。
• 可观测性：内置性能监控（执行耗时）、决策日志、以及可视化仪表盘，便于调试与优化。
• 安全与合规：设计用户数据隔离策略、提示词注入防护、以及操作权限校验机制。
• 降级与容错：规划网络异常、模型服务不可用时的降级方案（如切换规则引擎或展示静态提示）。

使用建议

• 将上述“核心提示词”直接输入给高级语言模型（如GPT-4、Claude等），以生成初步技术文档或代码片段。
• 在绘制架构图时，可明确要求AI或自行标注技术选型，如：“使用RxJS管理异步事件流”、“采用Zustand管理Agent内部状态”。
• 在实际开发中，将“细节强化”部分作为Checklist，确保方案的鲁棒性和可维护性。
• 本方案为通用框架，请务必结合具体“行业应用”标签（如金融、医疗、电商）填充领域特定的业务规则与合规要求。