实战型前端工程Agent任务规划提示词

角色定义与任务定位

你将以资深前端架构师与AI工程协调者的身份，使用以下提示词来设计和规划Agent任务。核心目标是：将模糊的业务需求拆解为可执行、可验证、低耦合的前端工程任务单元，并输出清晰的任务描述、依赖关系、验收标准与资源分配，使AI Agent能直接理解并执行编码、重构、测试或部署动作。你需要始终围绕“实战落地”与“工程可控”两个原则，避免空泛概括。

适用场景

• 大型前端项目的模块拆分与子任务委派，如从用户故事到组件实现的拆解。
• AI辅助代码生成前的任务描述撰写，确保Agent输出符合架构约束。
• 跨团队协作时，标准化任务规划格式以减少沟通歧义。
• 自动化流水线中，为构建、测试、部署Agent编排步骤与依赖。

核心提示词

以下提示词可以直接复制用于生成或描述任务规划内容。使用时可根据实际项目调整方括号内的参数：

• “请你作为前端工程Agent，接收以下任务规划：
• 任务ID：[TASK-101]
• 任务标题：实现用户登录表单的组件化封装
• 依赖任务：[TASK-100 全局样式变量定义]
• 技术约束：使用React 18 + TypeScript + Ant Design，无额外状态管理库
• 验收标准：表单包含邮箱和密码输入、输入校验、提交按钮、加载状态；错误提示样式与design token一致；单元测试覆盖率≥90%”
• “请将以下用户需求分解为最多5个子任务，每个子任务包含输入、输出和风险点：[粘贴需求文本]”

风格方向

• 工程化严谨：使用任务ID、依赖图、验收标准等结构化字段，避免自然语言模糊描述。
• 指令明确：动词优先（“创建”“重构”“实现”“验证”），少用“考虑”“优化”。
• 可度量：每个任务包含明确的完成条件（测试通过、性能指标、API对接成功等）。

构图建议

若需将任务规划可视化为图示（如用于文档或演示），建议采用以下构图元素：

• 纵向泳道图：左侧为任务ID与负责人，右侧为时间轴与依赖箭头。
• 卡片式布局：每个任务用独立卡片展示，卡片内包含标题、标签（如“高优先”“并行”）、预估工时、验收勾选框。
• 色彩编码：使用蓝色代表前端UI类任务，绿色代表逻辑/接口层，橙色代表测试/构建。

细节强化

• 在任务描述中加入“边界条件”：如“当网络超时超过5秒时，显示友好错误页”；“当用户未登录时，路由重定向至/login”。
• 为每个任务指定明确的“输出产物”：如“src/components/LoginForm/index.tsx”、“tests/LoginForm.test.tsx”、“storybook/stories/LoginForm.stories.tsx”。
• 增加“失败处理”子段：若Agent在实现过程中遇到性能问题或API变更，应记录在任务备注中并通知架构师。

使用建议

• 初次使用时，先创建一个任务规划模板（包含上述字段），每次需求拆解直接复制填充，保持格式一致。
• 将任务规划与代码仓库的issue系统关联，每个任务对应一个issue，Agent可自动创建分支并提交PR。
• 定期回溯任务规划的执行效率，根据实际偏差调整任务颗粒度（推荐一个任务耗时控制在1~4小时）。
• 若Agent是多模态的（如支持图表生成），可在任务规划中附加UI原型参考图链接或设计稿截图。