专业版前端工程自建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，确保方案的鲁棒性和可维护性。
本方案为通用框架，请务必结合具体“行业应用”标签（如金融、医疗、电商）填充领域特定的业务规则与合规要求。