10秒生成官网，WeaveFox重塑前端研发生产力 | 蚂蚁徐达峰

编辑部 整理自 AIGC产业峰会
量子位 | 公众号 QbitAI

AI入职大厂担当程序员编程助手，如今已非新鲜事。

不过，随着实践的深入，新的问题正在出现：AI生成代码需要大量翻修、安全生产难以保障……

“如果不能找到一个合适的切入点，可能会适得其反——用AI不如不用AI。”

作为技术变革的一线亲历者，蚂蚁集团平台智能体验技术负责人徐达峰如是坦言。

聚焦前端开发场景，徐达峰和他的团队打造了WeaveFox智能研发体系进行AI编码。主要有图生代码、意图生码和AI质检系统三大突破方向，让AI能根据用户输入的设计图，或者工程上下文补充逻辑代码，交付通过多模态技术检查产物质量。

目前WeaveFox已在阿里和蚂蚁实际投产，据介绍在超500名前端工程师的参与下，目前在设计图交付动线场景下，AI已累计生成合并接近100万行代码；研发效率最高可提升5倍。

在第三届中国AIGC产业峰会上，围绕“AI赋能软件研发周期”的话题，徐达峰带来更多前端从业者、开发者的第一视角实践与思考。为了完整体现徐达峰的分享，在不改变原意的基础上，量子位对演讲内容进行了编辑整理，希望能给你带来更多启发。

中国AIGC产业峰会是由量子位主办的AI领域前沿峰会，20余位产业代表与会讨论。线下参会观众超千人，线上直播观众320万+，累计曝光2000万+。

话题要点

• AI前端研发如果不能找到一个合适的切入点，可能会适得其反——用AI不如不用AI。
• AI辅助编码会带来思维方式的转变，从人产出代码AI配合优化，过渡到AI生成代码再人工进行检查。
• 对面向开发者的产品来说，用户同时是开发者，是构成新质生产力的重要部分。

（以下为徐达峰演讲全文）

AI前端研发需要合适的突破视角

大家下午好！很荣幸来到AIGC产业峰会，我叫徐达峰，来自蚂蚁集团平台智能体验技术团队，目前正在主导前端智能研发系统WeaveFox，同时我也是开源社区的深度参与者。

在AI技术高速发展的今天，AI前端研发已然成为行业的共识，尤其在今年初以来，开源社区对技术的促进和推动，让我们发现整个软件研发生命周期里面，有非常多的环节有很大的提效空间。

AI如何深度赋能软件研发周期呢？我会从自身作为前端从业者、开发者的第一视角给大家介绍蚂蚁前端技术团队的实践及思考。

从前端视角来看，AI研发落地上的困难包括很多方面。整体的实践没有一个固定的标准，在AI编码方面有行级代码生成、片断级代码生成、需求级代码生成，还有另外一种范式是先完成单元测试的编写再反推实现。

这样就带来多个瓶颈。首先，AI生成的大部分代码可能50%以上都需要后续二次修改或者大量翻修。

其次，在安全生产方面，我们在使用AI工具的时候很容易将企业数据和敏感信息发出去，甚至提交到海外，这给企业带来了很大的风险，包括入侵风险。企业内部如何安全合规地使用AI能力进行AI生产，也是我们面临的问题。

在现有软件研发体系上，很多工具经历十多年打磨，已经很方便、很成熟了，此时如果不能找到一个合适的切入点可能会适得其反——用AI不如不用AI。

不是任何地方都需要智能化升级，我们需要找到一个可以突破的合适的视角。

另外，AI研发也在平台和组织层面上带来了冲击和思维方式的转变。从以往更多是人来产出代码、AI配合优化，慢慢过渡到AI生成代码、人工来检查，这对现有人员的经验或者思维方式冲击还是很大的。

我们主要从以下三个方面突破这些瓶颈：

• 图生代码，通过图片直接生成生产级代码；
• 意图生码，通过意图生成骨架代码，或根据工程上下文生成逻辑代码；
• AI质检，通过多模态能力对产出检查并自动完善，帮助提升交付品质。

图生代码

图生代码解决的核心问题主要分为以下几个方面。

第一，其最大的优势在于简化了流程，不再依赖上游的各种工具，不管是 Figma、Sketch 还是其他工具，直接将图片像素输入给多模态模型，它就可以理解并生成源代码，并且一定要一次成型。其好处在于减少了中间的人工干预，一次成形意味着自动化，自动化意味着可以规模化地使用，在产业的落地中具备了可行性。

其次，在端侧研发过程中还有一个比较关键的技术项，那就是跨端。在现今的产业中，很多产品端是多端的，用在车机系统、手机、PC上，可能形式是小程序或者移动端网页等，这么多端如果每一套都做AI化的模型，成本非常高昂而且不便于复用，能否用一个模型解决所有端侧问题呢，让跨技术栈成为可以复用甚至可以一键切换的可能性？用户直接输入一个图片，通过模型推理在十几秒就生成整体代码，最终交付到代码仓库中。

完成这样的能力需要用到GUI的领域多模态模型，生产这样模型并不容易，我们做了以下几方面工作。

基座模型与数据

首先是强化了基座模型。

我们基于蚂蚁多模态基座模型对整个细粒度调节做了高强度强化，针对细颗度的Query Token叠加位置编码。这样的特性其实对grounding（基础训练）的任务有很大好处，生成在布局、准确度、精准度上会有很大优势。

第二是在深度融合和预训练阶段使用海量数据，以提升大模型本身对于GUI风格的敏感度。

第三方面涉及其他高分辨率的编码器，例如具备2K分辨率的数据窗口。对于一些常规的页面区域或界面，此类编码器能够轻松应对。

数据处理方面，涵盖数据采集、标注以及精筛等环节，面临的挑战较大。

以往在训练视觉小模型时，使用数千至上万个样本往往就能取得不错的效果。然而，如今训练大模型则需要动辄数百万的数据样本，这使得样本精筛和问题查找工作面临巨大挑战。例如，要从数百万数据中找出错误样本，可能需要训练专业的专家模型。为此，我们对整体的训练模型工具链进行了大幅升级，付出了诸多心血和努力。

训练与评测

接下来进入训练阶段，此阶段包括样本预处理以及二百万级别的后训练，并进行了相应的调试工作。

评测部分从两个维度展开。

其一为白盒的多维评测，我们每周都会对版本模型进行迭代。为了评估这些版本模型在各个维度上是得到了优化还是出现了劣化，我们设置了多个评测维度，如组件布局、颜色准确性等。

其二是存图的泛化评测，主要用于评估大模型上一个版本的产出准确性和相似度。

UI IR标准

说到训练工作，不得不提到我们确立的IR（Intermediate Representation)）标准，作为模型训练备数和跨端消费的统一标准，完备描述GUI世界。目前，我们已支持60+ GUI语义单元的数据定义，能够涵盖行业流行标准和现代操作系统，基本涵盖了行业的流行的视觉组件包括流行的框架库，并适配现有的操作系统。

作为模型训练以及后续消费的统一标准，我们去年添加了17个视觉可视化相关的标准，IR标准让整体跨端的实现成为了可能性。不仅能够生成如Vue等各种框架库，甚至可以后续生成鸿蒙、安卓界面类的代码。这些技术栈的操作和切换只需要一键操作。

我们还开展了模型上下文的扩展与增强工作，包括对细节方面的处理。以颜色（如背景色、按钮背景色）为例，原本呈现为列表形式，存在组件混淆的问题。通过工程校准，我们基本实现了高度还原的效果。

这在图生代码的演示中得到了体现，直接输入官网图片即可生成代码，生成的代码质量与人工编写的代码相近，能够满足测试标准。

我们采用了这样的测试方法：将同一份代码展示给测试人员，让他们判断代码是通过辅助工具编写还是一次性自动生成。若大部分人难以分辨，则认为该代码达到了标准。

接下来大家可以看一下我们“图生代码”的演示。仅需10秒，我们就用WeaveFox轻松生成了Claude的官网。

接下来给大家介绍一下“交付设计图即交付代码”。

在企业内部实践中，涉及众多业务线和产品线，会产生大量的设计图和设计稿。我们在设计稿平台上直接集成了相关能力，当上游生成设计资产后，可直接通过模型推理生成代码，下游工程师能够直接获取这些资产、代码片段甚至完整代码进行生产。这种模式有效降低了中间环节的成本，提高了效率。

在图生代码方面，我们还将自身模型与行业内的优秀模型，如Claude-3.7-Sonnet、GPT-4o、Qwen2.5-VL 进行了对比。在列表、卡片布局、图片处理以及众多资源处理（包括SVG）方面，我们的模型展现出了显著优势。由于大模型对SVG不够敏感，我们针对这些方面进行了大量的细节优化。未来，我们将持续与行业内的SOTA模型进行参照和对比，不断提升自身能力。

意图生码

意图生码，主要是通过意图来生成骨架代码。

然而，在实际的产业生产中，对话式编程这种模式较难落地，难以实现标准化和工业化。在实际需求中，企业通常不会要求技术团队开发类似坦克大战这样的演示项目，更多的是希望完成特定 APP 功能的开发。

针对意图生码，我们进行了L3级别的产品封装，推出了意图生码智能体。该智能体旨在将研发场景的效率优势进行固化。例如，在多语言处理方面，对于已有代码上下文如何进行覆盖单侧处理，以及用户埋点行为相关代码等复杂工作，智能体能够借助AI技术一次性完成。

当然，仅有这些能力还不够。为了将企业内部工程师转化为新质生产力，让每位工程师都能成为能力的贡献者，我们需要解决内部开放和接入的问题。为此，我们将开放面向工具的多种接入方式，包括API、WebUI以及IDE插件等，同时兼容标准化大模型通用的MCP协议标准。

对面向开发者的产品来说，用户同时是开发者，是构成新质生产力的重要部分。

AI质检

在突破发展瓶颈方面，我们引入了AI质检技术。

该技术充分复用了前文提及的多模态能力，旨在分析产品交付前原始需求与最终交付成果之间的差异，并通过 AI 分析和再次生成修复代码，以此提升交付环节的品质。

目前，这一技术的实践和落地情况如下：我们耗时四个多月的工作日，邀请了500多位前端工程师，生成了一百万行代码。

去年年底，我们进行了科学论证。行业中一直流传着“10倍速工程师”的说法，为了验证其“真实性”，我们邀请了几十位同学并将他们分成AB两组，其中一组使用智能研发动线和智能研发工具。最终的验证结果显示，工作效率大约有2.7倍的提升；在复杂场景下，效率提升可达5倍。

虽然目前尚未达到10倍速，但这仍是我们努力的方向和目标。此外，我们还致力于为行业体系内已有的搭建平台工具提供赋能和接入支持。

开放计划

最后介绍一下WeaveFox开放计划，我们目前有公有SaaS版在测试中，会逐步扩大公测名单。下一步计划是通过蚂蚁开源社区进行开源，像大家使用Ollama一样，让每个人可以本地拥有这样的服务，持续开放代码生成器甚至模型训练的工具链，同时包括各种丰富的上下游工具生态。

在面向产业应用方面，可以通过一个形象的比喻来理解。首先是一体化交付模式，就像前面提及的图生代码智能体或意图生码智能体，它们借助L3级别能力能够自动化完成任务。这类似于一体化压铸技术，直接完成某个大型部件的生产，之后无论是外观设计还是内饰配置，都可以根据需求自由选择。同样，在技术层面，跨端技术栈的切换和选择也能为用户提供这样的自主选择权，而无需重新训练模型。此外，在交付之前，具备AI检查和自动质检能力，以此确保交付成果的质量和效果。

在当前产业蓬勃发展的背景下，我们前端研发或者外部技术研发所构建的智慧工厂，或许就蕴含在这样的模式之中。

以上就是我今天分享的内容。