【立项原因】在低代码/CMS 平台的组件生产中,「设计稿 → 代码」环节长期依赖资深前端人工还原:看图写码、三端适配、平台规范改造、视觉走查、交互验证,一个组件动辄数人日,质量全凭个人经验,还原度与交付速度不可兼得。我们曾尝试用单个 AI 会话驱动全流程,但很快撞上上下文爆炸、角色串扰、三端串行、修复循环无结构等瓶颈。trustor 正是为此立项:把这条流水线重构为「确定性调度器 + 12 个专职 Agent」的多 Agent 协作系统——LLM 只做判断题,代码负责流程题,让设计稿一键进、符合平台规范的标准组件包一键出,且每个环节可校验、可修复、可追溯,让每一次 Agent 输出都值得信任。
【行业场景 / 业务背景】面向低代码平台运营、企业官网与营销页搭建、设计交付外包等「高频组件生产」行业。这类场景的共同特征是:设计稿来源集中在 Figma,交付物有强平台规范约束(ZCMS 组件类型化、SEO、Lighthouse 性能指标),质量验收高度依赖视觉还原度比对。业务上,平台方需要持续、规模化地扩充组件库供给,企业用户希望低成本把设计稿快速变成可上架组件。trustor 以 Figma 插件同步设计资源为入口,服务端多 Agent 流水线自动完成资源净化、三端组件并行开发、代码重构、视觉校验、交互验证、配置绑定与打包,并配套账号体系、Token 配额、管理员看板与人工审核闸门,把原来的「专家手工活」升级为可规模化、可运营的 SaaS 化组件生产线。
trustor 是「设计稿 → 可交付组件代码」的多 Agent 协作平台,包含五大功能模块:
1. Figma 插件(资源同步入口):星图式页面/组件/状态管理,按桌面/平板/手机三端同步主图截图、设计 DSL、切图素材、图标与交互说明,支持多状态注入;通过设备码授权绑定账号,设计稿一键推送到服务端。
2. 多 Agent 流水线(核心引擎):12 个专职 Agent 按有向图协作——资源净化(素材去重/命名/审查)→ 三端并行开发(Desktop/Tablet/Mobile 组件代码)→ 代码重构合并 → ZCMS 平台规范绑定 → 视觉校验(Puppeteer 截图 + 像素级 diff 比对设计稿)→ 素材审核 → 交互断言验证 → 质量闸门 → 人工审核闸门 → 自动打包成可直接上传平台的标准组件 zip。支持反馈修复闭环(fix 模式)、断点续跑与节点级重跑。
3. 运行管理中心:流水线实时日志(SSE 逐条推送)、节点进度可视化流程图、运行历史、修复中心、代码在线查看与产物下载,组件画廊展示成品效果。
4. 生成规范注入:内置 ZCMS 类型规范、GEO 搜索优化、Lighthouse 性能四绿灯等质量约束,支持个人级开关、文案自定义,并可按单个 Agent 追加自定义规则。
5. 账号与运营体系:注册登录、滑块人机验证、插件设备码授权、用户 Token 配额管理与申请、36 步新手引导、管理员看板(用户管理/企业入驻申请/资源与运行统计),支持 Docker 单实例一键部署。
【我负责的任务】作为项目核心开发者,我主导了从单体会话到多 Agent 架构的整体设计与落地:负责多 Agent 流水线图(LangGraph 状态机)的架构设计与全部 Agent 节点的 Prompt 工程;设计并实现 Figma 插件(星图式页面/状态管理、三端资源同步、设备码授权);搭建视觉校验体系(Puppeteer 截图 + pixelmatch 像素级 diff + LLM 多模态评分门禁);实现断点续跑、节点级重跑、反馈修复闭环与 SSE 实时日志;以及账号体系、配额管理、管理后台和 Docker 部署方案。
【技术栈与架构】Nuxt 3(Vue 3)全栈 + LangGraph 多 Agent 编排 + better-sqlite3(持久化与断点存档)+ Figma Plugin API,LLM 走 Anthropic 兼容端点,Puppeteer + pixelmatch + sharp 做视觉验证,Docker Compose + Caddy 自动证书部署。
【实现亮点】① 确定性调度器与 LLM 分离:流程路由、门禁、轮次预算全部是代码状态机,LLM 只做判断题,杜绝流程漂移;② Agent 间通过文件系统产物契约协作(blackboard 模式),无需发明通信协议,天然支持断点续跑;③ 三端开发 Agent 并行扇出,效率提升约 3 倍;④ 视觉评分 + 像素 diff + 人工闸门三道质量防线,保证「每一次 Agent 输出都值得信任」。
【难点攻克】① 多个评分 Agent 打分口径漂移——通过统一评分 rubric 与修复轮次预算收敛;② 修复循环成本失控——设计修复路由表,按失败类型精准派单给对应 Agent 而非全链路重跑;③ 长流程上下文爆炸——按节点切分 Prompt,每个 Agent 只注入所需规则子集。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!

下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论