前端开发助手

我搭了一套前端智能体,让 AI 从需求到交付全流程干活

最近 AI 写代码的能力越来越强,Cursor、Claude Code 这些工具大家应该都在用了。但用了一段时间我发现一个问题:单次对话能写代码,但一个需求从提出来到做完,中间要过需求分析、写代码、测试、review 这些环节,靠一个 Agent

硬撑很难保证质量。

所以我搞了一个多角色的智能体系统,不同角色干不同的事,串成一条完整的流程。

先说下整体思路

核心想法很简单:既然一个 Agent 做不好所有事,那就拆成多个角色,每个角色只管自己擅长的部分。

我搞了两种实现方式:

1. Node 服务模式 --- 写代码,通过特定节点注入提示词来控制 Agent 的行为。适合需要复杂逻辑判断的场景。

2. 纯 Markdown 模式 --- 用 .md 文件定义角色和流程,让 AI 自己去读。更轻量,改起来也方便。

两种方式都可以用,看你项目的复杂度。

角色设计

系统里有 5 个角色,串成一条流水线:

用户提需求

↓

PMGR(统筹)接收需求,记录到文档,跟用户确认

↓

产品经理 拆需求、写 PRD,输出结构化的需求文档

↓

审查员 审 PRD,有问题就打回去改

↓

并行 ┬─ 前端架构师 写代码,严格按项目规范来

└─ 测试员 写测试用例,用 Playwright 跑浏览器自动化测试

↓

审查员 再审一轮,代码和测试都要审

↓

PMGR 做最终验收,跟原始需求对一遍,没问题就交付

说一下每个角色干啥:

PMGR(统筹)--- 只协调,不干活。分配任务、盯进度、处理问题、最后验收。需求有 3 个优先级,低的直接按项目惯例处理,中的查 memory 看有没有先例,高的必须问用户。

产品经理 --- 把一句模糊的需求变成结构化的 PRD。支持通过 Playwright 打开网页做竞品调研,输出到 docs/requirements/ 目录。

前端架构师 --- 写代码的核心。原则是「一致性优于最优解」,严格按项目已有的命名、组件、路由、状态管理规范来。如果需要偏离规范,必须提出来讨论并记录决策。

测试员 --- 根据需求写测试用例,然后用 Playwright 打开浏览器一步步执行,生成测试报告和截图。

审查员 --- 审需求、审代码、审测试。问题按严重等级分 Critical / Important / Minor,每轮审查都会记录日志,还能统计高频问题。

实际用下来的效果

跑了一个真实需求:「做一个 Dashboard 页面,展示近 7 天用户增长趋势」。

流程走完,产品出了 PRD,审查员第一轮审出了 2 个 Critical 问题(组件复用要求矛盾、缺少验收标准)和 4 个 Important 问题,打回去改了之后才进入开发。

体验下来比较满意的几个点:

  • 写出来的代码风格跟项目里已有的代码一致,不用再手动调
  • 每个环节都有产出物(需求文档、测试报告、审查日志),能追溯
  • 审查确实能发现一些容易忽略的问题

遇到的问题

说两个目前比较明显的:

1. 时间长。 多角色串行流转,一个需求走完全流程要不少时间。虽然开发和测试是并行的,但审查环节还是瓶颈。

2. Token 消耗大。 每个角色都需要读项目上下文,累计下来 token 用量很可观。目前在想办法通过 memory 机制减少重复读取。

项目地址

项目还在迭代中,欢迎 Star 和提 issue。

​​​​

相关推荐
她说可以呀7 小时前
Vue插槽
前端·javascript·vue.js
qq_448011167 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan7 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352908 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝8 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing039 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel9 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放9 小时前
Python基础语法练习题(73)
java·前端·python
风骏时光牛马10 小时前
面向复杂场景的大模型应用落地与能力优化实践
前端
小小善后师10 小时前
我做了个病历归档小程序,被 AI 识别的"最后一公里"狠狠上了一课
前端