用Qoder实战Vue3大屏：从项目分析到Agent团队协作的完整开发流程

最近聊 AI 编程工具，越来越多团队开始关注国产方案。因为账号限制、安全合规等问题，很多团队开始重新评估自己的 AI 工具链，这里面被频繁提到的就是阿里的 Qoder。真正的 AI 编程，核心是理解项目、处理上下文，再把完整需求落下来。

这次没有用简单的 Demo，而是把手中的 Vue3 IoT 数据大屏可视化编辑器直接交给它去测试。

Vue3 大屏：看着简单，做起来麻烦

大屏项目的特点是页面看着很简单——中间一张地图，左边设备状态，下面几个图表，但维护起来一点也不简单。分辨率适配、接口联调、实时数据刷新、图表联动都是费时间的活。改一个布局很容易影响周围的组件，最后变成只改了一个地方却坏三个地方。

以前只能自己慢慢拆，出了问题再让 AI 补几段代码，代码是写得快了一点，但项目怎么拆、做到哪一步才算完成、测试有没有跑，还得自己盯着。这一次直接把这个基于 Vue 3 + Konva.js 的拖拽式设计项目交给 Qoder 来试。

01 项目分析：先让 Agent 看懂项目

第一步没有让它生成页面，而是把需求、接口说明以及现有的项目一起交给它，让它先梳理出目录、路由、组件和数据流。第一个任务没有说太多细节：

优化这个 Vue3 IoT 数据大屏可视化编辑器，保持现有功能，调整整体布局和视觉效果。

意外的是，它并没有立刻生成代码，而是先查看项目结构、理解页面组成后，才向我提问来明确需求细节。这里用的是 Qoder Desktop 中的 Quest，这是一个独立的任务工作区，任务可以由分析一直做到修改、测试和交付。

这一轮跑完之后，它不仅拆出了页面结构，还发现了几个问题：测试入口不明确、一些规则没有真正进入执行流程、部分修改没有相应的验收标准。Agent 做不好，并不一定是因为模型不够强，也可能是因为项目本身没有做好。

02 环境检查：给 Agent 的工作环境做次体检

于是用了 Better Harness。过去都是人最后检查 Agent 写的代码，现在反过来让 Agent 去检查自己的工作环境。它考察的是：目标和上下文是否明确、项目能否启动、Rules、Skills、Hooks 是否真正起作用、测试验证是否形成闭环。而且还会翻真实的任务执行记录——项目里有测试并不代表这次真的跑起来了，安装了 Skill 并不等于真正使用过。

原来的想法是怎么样写好 Prompt，现在变成了怎么样给 Agent 做好工作环境。发现的问题点击创建修复方案就可以让 Agent 来生成和执行修复。经验会沉淀为规则、技能和记忆，资产越多，Agent 对你的项目就越了解。

03 任务执行：AI不怕没有能力，就怕不知道什么是完成

环境理顺之后才真正放手。这次没有说帮我做好，而是用 /goal 来定义完成条件：

/goal 完成大屏组件重构，测试全绿、lint 清零，stop after 10 tries

它的终点可以验证：每一轮执行完毕后自己检查，达不到就换一种思路继续，达到条件就停止，还可以设置最大尝试次数来防止死循环。它会对任务范围进行分析，然后修改相应的代码，修改完成后还会运行项目来检验实际效果。

04 持续运行：从人盯着 Agent到人制定规则

大屏还有一类任务没有固定的结束时间，比如 CI 正在跑。很多时候只希望知道什么时候出结果，如果失败了也希望有一个原因分析。固定每 30 分钟查一次当然可以，但构建刚开始没必要频繁看，快跑完又不想半小时后才发现结果。因此用了动态 /loop：

/loop 监控CI流水线，跑完之后告诉我结果，如果失败了就分析原因

Agent 每次结束后自己决定下次什么时候醒来：刚开始晚一点看，快要完成时缩短间隔，得出结果马上通知，失败了就自动分析原因。

Loop Engineering 的意思是：不是让 Agent 一直跑下去，而应该在开始之前就把目标、反馈、节奏和终止条件都预先设定好。过去是人盯着 Agent，现在是由人来制定规则，Agent 自己决定何时停止。

05 复杂任务：一个Agent忙不过来的时候，就分成一个团队

大屏继续往下做，同时要整理旧组件、检查接口、补测试。没有让一个 Agent 去硬扛，而是把任务分成三部分：整理旧组件、检查接口、补充测试，最后再汇总。这就是 Qoder 的 Agent Teams（专家团模式），由规划、调研、编码、审查、测试等几个方面的专家组成。Lead Agent 分工、统筹全局、把关质量，各个专家同时进行，统一交付。

前面的能力是连在一起的：Better Harness 检查环境，Goal 明确目标，Loop 负责持续运行，Agent Teams 把复杂任务拆分成不同部分进行分工。

06 延伸场景：从写代码，到知识库和科研

做完大屏之后，把这套方法也应用到写代码之外的地方。Obsidian 里全是 Markdown——项目笔记、学习资料、零散的想法，以前只用作笔记软件，现在把 Qoder + Skills 拿来检索、整理、建立联系，形成一个本地的知识库。

科研场景也是这样。目前已经有 research-copilot 相关的技能，包括文献调研、研究构思、实验设计、数据分析以及成果写作等，这 18 个科研技能可以在 Quest 插件市场里一键安装。

背后的逻辑都是一样的：Agent 不只做一件事，它要接管的是整个工作流程。

经过一轮 Vue3 大屏项目测试之后，最大的变化是：以前关注的是 AI 能不能帮我写代码，现在更关心的是它能不能真正参与进去——从理解项目到修改代码再到最后运行验证，AI 就像一个开发助手一样帮我完成了整个过程。