前端开发者 Agent 实测：全栈搭档

凌晨两点的组件评审

你在 Review 一个虚拟化表格的实现，发现 overscan 设成了 5 而非 10，aria-label 漏了本地化 key。这时 Cursor 里弹出一段回复——不是泛泛而谈"优化一下"，而是直接给出带 @tanstack/react-virtual 的 memo 包裹方案，并追问："3G 下首屏是否已压到 3 秒内？"这是「前端开发者」Agent 的典型开场。

这个角色是干什么的

「前端开发者」定位是现代 Web 应用和 UI 实现专家，核心战场在浏览器端。它不碰后端数据库设计，也不写 Drupal 模块，而是死磕 React/Vue/Angular/Svelte 的组件架构、像素级设计还原、以及 Lighthouse 90+ 的性能底线。其角色记忆库里存着成功的 UI 模式、性能优化技术和 WCAG 无障碍最佳实践，沟通风格精确到百分比——"渲染时间减少 80%"而非"明显变快"。

能力边界：能做与不能做

能做的很具体：编辑器扩展工程（WebSocket/RPC 桥接、导航命令）、Core Web Vitals 优化、PWA 离线能力、组件库与设计系统、跨浏览器兼容性、CI/CD 前端集成。它甚至管到了编辑器协议 URI 的往返延迟要低于 150ms。

不能做的同样清晰：不涉及后端 API 设计、不处理支付网关或订单管理、不搭建 multi-agent 系统拓扑、不解析 OrgScript AST。如果你的需求是"做个电商后台"，它能搞定的是后台的前端界面和状态管理，而非 Drupal Commerce 的商品目录或税费配置。

一次真实任务的表现

我们让它处理一个数据密集型表格的卡顿问题。它的输出遵循了设定中的四步工作流：先搭架构（TypeScript + 虚拟化方案），再写组件（memo + useCallback + useVirtualizer），然后压性能（overscan 调参、图片 WebP/AVIF 策略），最后补测试（单元测试 + 屏幕阅读器兼容性）。实际使用中，它会主动追问 Lighthouse 基线、是否已配置性能预算、以及键盘导航的 tabIndex 逻辑——这种"唠叨"恰恰是它的价值：把无障碍和性能从"事后补"变成"事前拦"。

适用人群

适合已经跨过 CRUD 阶段、需要工程化规范的前端开发者。如果你是 junior，它能教你为什么要 overscan: 5 而不是 10；如果你是 senior，它适合当代码评审的自动化搭档，帮你守住 WCAG 2.1 AA 和 Core Web Vitals 的底线。不适合纯产品原型阶段——那时你需要的是快速出图、快速推翻，而非像素级还原和 80% 组件复用率。

与同类开发角色的对比

和「Drupal 购物车工程师」比：后者深耕 CMS 电商生态，管的是支付网关、checkout 流程、税费促销；前端开发者不管这些业务逻辑，只负责 Drupal 主题层或 headless 架构中的前端消费端。

和「OrgScript 工程师」比：后者是 DSL 解析专家，玩的是 AST 校验和业务逻辑定义；前端开发者写的是用户看得见的交互界面，不是语法树。

和「多智能体系统架构师」比：后者设计 agent 拓扑、上下文管理和故障恢复；前端开发者的"系统"是浏览器渲染流水线，不是 AI 编排流水线。

关键对比在「rapid-prototyper」类角色（虽未在清单中明示，但隐含于 senior-developer 分工讨论）：原型搭建者追求快、脏、能跑；前端开发者追求慢、稳、能维护。前者用 inline style 和 mock 数据两天出 demo，后者会追问设计 token 是否对齐、组件是否支持暗色模式、虚拟滚动是否兼容屏幕阅读器。