现在各种 AI 编码工具非常丰富，每隔几个月就有新产品，社交媒体上各种鼓吹提效多少。我作为专业前端，在面对存量项目时，现有 AI 工具往往无力提供高效的解决方案，导致代码重构耗时耗力。当 WeaveFox 团队邀请体验WeaveFox 产品之后，我对此震撼不已，原来 AIGC 时代前端还可以这样玩，我自己试了很多个测试，不只是可用，出码效率非常高，而且支持 Vue、React 等多种技术栈。WeaveFox 是首个基于多模态大模型的 Image-to-Code 工具，能够精准生成高质量代码，让前端开发更加高效且直观。所以，我觉得花点时间把我的感受，以及我对之前各种前端出码工具，比如 D2C、v0.dev 等对比着写出来，希望大家能够有所收获。

现有前端 AI 编程工具对比

AI 编程工具的出现和快速发展是技术进步的必然产物。这种必然性首先源于开源社区和代码托管平台提供的海量代码样本，为 AI 模型提供了充足的学习素材。其次，编程语言本身具有严格的语法规则和结构化特征，这种高度规范化的特性使得AI能够准确理解和生成代码。同时，深度学习技术的突破，特别是大语言模型在代码理解和生成方面的重大进展，为 AI 编程提供了强大的技术支撑。此外，随着软件开发需求的持续增长，传统开发方式已难以满足效率要求，开发者们迫切需要更智能的辅助工具来提升生产力，这些因素共同推动了AI编程工具的蓬勃发展。

AI编程工具的发展呈现多元化趋势，可分为以下几大类：

• 智能编辑器类

• • Cursor：基于AI的代码编辑器，提供实时代码补全、重构建议和错误检测。之前单文件很好，后来出现composor之后，同时编辑多文件问题也很强。

  • GitHub Copilot：集成于VS Code等主流IDE，提供智能代码建议和自动补全，依靠github生态，和不行就免费策略，市场占有率也非常不错。

  • WindSurf：专注于代码重构和优化的智能编辑器，提供代码质量分析和优化建议

• 代码生成与转换类

• • CopyCode AI：专注于代码复制和转换，支持跨语言代码转换和优化

  • bolt.new：集成了前沿的 AI 模型(如 Anthropic 的 Claude 和 v0),让用户可以通过自然语言提示,自动生成项目的代码结构。开发者只需简单地告诉 AI 想要实现的功能,bolt․new 就能生你想要的效果。它尤其强的是webcontainer。4 周内实现 400 万美元 ARR，2 个月内突破 2000 万 ARR，每天 50 万美元的 ARR 增长，也是让人唏嘘不已。

  • V0.dev：专注于前端开发的AI工具，可直接将设计转换为React代码。

• 开发辅助插件类

• • Continue.dev：跨平台AI编程助手，支持多种编程语言和开发环境

  • Tabnine：基于深度学习的代码补全工具，能够适应开发者的编码风格

  • Amazon CodeWhisperer：专为AWS云服务开发的智能编程助手

• 一站式AI开发平台

• • Devin：被誉为首个完全自主的AI软件工程师，能理解、规划和执行完整的编程任务

  • Replit Ghost：集成代码生成、调试和部署功能的完整开发环境

这些工具的出现标志着AI编程正在从简单的代码补全和建议，逐步发展为能够理解开发上下文、参与软件工程全流程的智能助手。它们不仅提高了开发效率，也正在改变传统的软件开发模式。

除了国际主流AI编程工具外，国内也涌现出一批优秀的AI编程助手和平台（这里的对标是大方向，不是严格的领域）：

• 豆包 MarsCode（对标Cursor）

• • 专注于企业级开发场景的AI编程助手，尤其是Web IDE领域，一枝独秀

  • 提供代码生成、重构和测试等全方位功能

  • 针对中文开发环境和国内开发习惯进行特别优化

  • 对刷题场景也有较好优化

• WeaveFox（对标V0.dev和bolt.new）

• • 首个基于多模态大模型的 Image-to-Code 工具，能够精准生成高质量代码。它是Image to Code领域代表产品，比传统的Design To Code有本质区别，后面会详细讲。

  • 高效，生成步骤简单，生成的代码质量和人写的代码几乎无差别。

  • 确定性强，适当性大型项目里，唯一且精准落地，可提效的神器。

  • 1比1还原，精确，自动同步CDN，且图片清晰度足够。

• 商汤小浣熊Raccoon（对标Continue.dev）

• • 基于商汤大语言模型开发的智能软件研发助手

  • 提供全面的软件开发支持，包括需求分析、架构设计、代码编写和软件测试。支持超过100种主流编程语言（如Python、Java、JavaScript、C++、Go、SQL等），并可集成至VS Code、IntelliJ IDEA等主流开发环境。

  • 实际应用数据显示，代码小浣熊能提升开发者的编程效率50%以上。

• ClackyAI（对标Devin）

• • 一站式开发，流程和Devin类似

  • 自主实现IDE，具备更多深层次优化

  • 支持自动修复PR等

这些国内AI编程工具的出现，不仅为中国开发者提供了更适合本地化需求的解决方案，也在推动着整个行业的技术创新和发展。它们在理解中文编程需求、适应本土开发环境等方面具有独特优势。

整体来看，AI编程无论在国内还是国外都受到高度关注和期待。各大公司和开发团队都在积极探索如何通过AI技术来降低开发成本、提升编程效率。从目前的发展趋势来看，AI编程正在逐步实现从"专家式编程"向"人人可编程"的转变。这种转变不仅能够降低编程门槛，让更多人能够参与到软件开发中来，还能够大幅提升专业开发者的工作效率。

AIGC出码的问题

AIGC（生成式AI）的优点在于其创造性和多样性。每次生成的内容都是独特的。比如在代码生成方面，同样的需求描述可能产生不同的实现方案，这种多样性有助于开发者获得新的思路和解决方案，或者严格一点说，它面向的是非技术的专业开发者，或者专业开发者使用自己不熟悉的领域。比如让前端写Go，比如让JAVA同学写单片机，比如让产品经理自己开发iOS App。

然而，这种不确定性也正是AIGC的主要缺点。在现代编码工具中，这种不确定性会带来以下问题：

• 代码一致性难以保证：同一需求在不同时间生成的代码可能风格和实现方式都不同，增加了代码库维护的难度

• 调试和测试复杂化：由于输出结果的不可预测性，难以建立稳定的测试用例和调试流程

• 团队协作障碍：不同开发者使用AI工具可能得到不同的代码实现，增加了代码审查和整合的复杂度

• 版本控制困难：频繁的代码变化和不一致性会使版本控制和代码合并变得更加困难

这些问题使得在实际开发中需要在AI的创造性和代码的可维护性之间找到平衡点。所以当我看到很多人在鼓吹AI出码如何如何高效的时候，我会忍不住想和他们争论一下，到底是不是非专业技术，产品是否需要长期迭代。

无论如何，AI编程工具在快速原型开发和简单任务中确实表现出色，这使得它们成为外包项目和新手开发者的理想选择。然而，对于需要长期维护和迭代的企业级项目来说，代码质量、可维护性和一致性变得尤为重要。

专业开发者在使用AI工具时需要考虑：

• 代码规范的统一性：确保AI生成的代码符合团队既定的编码标准和风格指南

• 架构的可扩展性：生成的代码需要能够适应未来的功能扩展和系统演进

• 文档的完整性：AI生成的代码应该包含清晰的注释和文档，便于其他开发者理解和维护

• 测试的可靠性：需要建立完善的测试机制，确保AI生成代码的质量和稳定性

这就要求AI编程工具不仅要关注代码生成的效率，还要提供更多确保代码质量和可维护性的功能。这包括代码风格的一致性检查、架构建议、自动化测试生成等高级特性。

如果站在这个角度上思考，你会发现绝大部分已有AI产品都无法满足。比如v0，它是多轮问巡式生成，典型的每次都不一样的生产式AI。比如强如Cursor，它也无法在之前就有的存量代码上帮我提效很多。

经过各种比对，我发现对专业前端，对存量代码，具备确定性提效的产品只有WeaveFox。也就是我们今天这篇文章的主角。

介绍一下 WeaveFox

蚂蚁WeaveFox是由蚂蚁前端团队推出的一个AI前端智能研发平台。它基于蚂蚁自研的百灵多模态大模型构建，能够根据设计图直接生成前端源代码，支持Vue、React等多种前端框架。WeaveFox支持多种应用类型，包括控制台界面和移动应用，小程序等，旨在提高前端开发的效率和便捷性。

下面这些都摘抄自他们1122活动分享过的材料，附上我的评价，如下。

• 设计图转代码: 根据设计图直接生成前端源代码，减少手动编码工作。

• • 设计图这个是最佳方案，但说的小了

  • 只要是张图就可以。我理解自由开发者和中小公司，或者缺少设计环节的需求，都需要WeaveFox。

  • 极大的复用了设计资产。

• 多端支持: 支持控制台、移动端H5、小程序等多种应用类型的开发。

• • 借助IR层，使得多端转码更方便，更精准，带有语义，这个描述的比较准确。

  • 内部平台符合而来，外部模版还不多，应该很快就可以跟上来。

• 多技术栈兼容: 支持React、Vue、less、scss等多种前端技术栈。

• • 原理上，其实他们建立了IR层标准。

  • 说的小了，如果想做iOS，Android，鸿蒙也是可以支持的。

  • 典型的自己是前端，就按照自己熟悉的领域思考。

• 二次调整：支持用户对自动生成的代码进行调整和优化，满足更具体的需求。

• • 当前是支持下载代码功能的，目录结构都比较合理。

  • 后面我希望他们能够提供直接发布https://esm.sh/类似的，提供HTTP Import，这样可玩空间更大，使用也更方便。

  • 听说知道他们团队在做，WeaveFox 产品很注重对已有组件封装，设计系统组件库的对接。

• 高准确度还原：追求设计图的一比一还原，确保设计意图得到准确实现。

• • 确实是1比1还原的。

  • 绝大部分场景都很准确，不过多模态大模型也有幻觉，在没有对外开放预训练能力之前，偶尔还是会遇到。

我们再来看一下WeaveFox是什么

• 有一张图就能生成UI代码，有设计图最好，是前端技术栈目前最好。

• 多模态识别图片之后生成IR信息，支持多端，支持多技术栈（Vue、React等）兼容，便于出码和二开

• 可以做到高准确度1:1还原，也支持预训练能力。

我们也和类似产品做了个对比，具体如下。

从技术演讲角度看WeaveFox

WeaveFox是Image to Code，之前阿里曾经有一个前端智能化方向，imgcook叫Design to Code，简称D2C。以前在外面分享，经常分享的一个图，如下。

Design To Code

• 解析设计图，按图层来分析，拆解，并最终生成代码。

• 2018年到2022年，还没有LLM，那时候流行的是TensorFlow

• AI的理解是人工+智能。

客观的讲，确定这个方向是很伟大的事儿。可惜时运不济，那时候技术远远没有现在这么完善，各个大厂都有类似的方向，深圳code.fun团队也有实现。

举个例子，下面就是Figma里典型的Design To Code出码。

生成的代码很难读懂，如果图层复杂，连正确渲染都费劲。

结果2022年10月，ChatGPT横空出世，世界就变了。百度围绕Aims，只专注于Schema生成，出的ui不对，就是模型能力问题，很好的思路。还有就是Claude 3.5 artifacts，对卡片式出码极好。这些都属于业务深度定制的。

后面出现了v0.dev，我试了一下5步确实可以生成一个计算器。

代码除了和Nextjs耦合严重外，没啥毛病。这种多轮问询式的范式和ChatGPT类似，典型的生产式AI，所以很多新项目，非专业前端，大肆鼓吹。社区里，类似的轮子也有很多。如果你去查源码，无非Promopt上约定出码文件格式，其他都是用户输入来推理，难度并不大。

有了上面的铺垫，我们来看一下WeaveFox的Image to Code。四步搞定

首先上传1张图片。

然后选择生成代码的参数设置。

然后大模型生成中。

生成完成后，你就可以看代码了，只用了几十秒

相信大家通过4步生成代码，大家已经能够感受到它的魅力了。

总结一下

• Design To Code那时候只有TensorFlow，没有ChatGPT，能力有限，真人工+部分智能。

• 2022年10月后，ChatGPT发布，针对模版输出非常好。另外就是针对Aims类似的Schema生成，把ui生成能力转包给模型层，还有一个思路就是claude 3.5，定制卡片类的逻辑。这都属于业务深度定制型

• v0.dev是多轮问询性质的，很方便，但绑定Nextjs相关技术栈，后续迭代是一个问题。

• WeaveFox基于Image to Code，基于多模态大模型，四步完成出码，更先进。

实现原理

下面我们来看一下WeaveFox的原理。这里主要摘抄自蚂蚁今年的「前端.AI」1122 体验技术日里分析的内容。

我对多模态大模型不熟，我争取尽量把它讲明白。

如上图所示。

1、用户上传完图片后，它会先扫描一遍布局，然后再细化，这应该就是细粒度Query token的意思。

2、有了布局信息，图片和位置都有，在进一步做深度融合和多任务训练处理，这个时候就有多个图片，就可以并行处理了。

3、为了更准确，提前给大模型喂数据，做各种阶段的训练。核心在于你识别了图片，图片和组件是怎么匹配的，我怎么知道它语义含义是span，还是Antd的button。蚂蚁自身的UI绝大部分都是基于antd系列的，UI风格一致，且预料样本海量，所以效果会非常好。

下面是具体的交互时序图。这和d2c有点像。

这里面其实讲了很多细节。

1、化整为零，先扫布局，然后局部在处理。

2、局部做了高保真处理

剩下的就是组件识别和绑定。

1、识别图片和组件关系

2、处理列表和块循环

3、处理弹性布局

除了识别图片和组件关系外，和Design To Code是一模一样的。

总结一下，基于蚂蚁自己的多模态百灵大模型，先处理布局，然后局部高清化，讲图片和组件进行绑定，剩下的就是常规Design To Code处理方式原理类通了。这是我个人的理解，如果不对，还请指正。

举例

前面已经讲了WeaveFox的用法和原理，相信大家已经有所了解。下面我们直接上代码，让大家感受一下它出码的质量和效率。

这里准备2个例子，一个是我截了微信发现tab下的图，我想看看我要快速实现这样的组件需要多久。第二个例子就是之前演示的gdg现场分享的PC端的例子。

例子1

这个例子是手机随意截了个微信发现tab下的图，实现这个虽然不是很复杂，但细节蛮多的，比如各种间距，横线，状态，处理起来还是挺麻烦的，正常评估2-5小时，估计大家不太会有异议。我CSS比较弱，用WeaveFox不到30分钟就能搞定。

原图

WeaveFox生成1

WeaveFox生成2

代码地址：https://weavefox.alipay.com/langshu/ogchgx13glqg4grw

下载代码，修改一下Vite配置，主要是增加postcss-px-to-viewport。这是因为WeaveFox生成的图片是px单位的，我们在H5下面还是需要做视频的。

import {  defineConfig } from "vite";import react from "@vitejs/plugin-react";import postcsspxtoviewport from "postcss-px-to-viewport";// https://vite.dev/config/export default defineConfig({   plugins: [react()],  css: {     postcss: {       plugins: [        postcsspxtoviewport({           unitToConvert: "px", // 要转化的单位          viewportWidth: 540, // UI设计图的宽度          unitPrecision: 6, // 转换后的精度，即小数点位数          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw          selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false          replace: true, // 是否转换后直接更换属性值          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配          exclude: [],          landscape: false, // 是否处理横屏情况        }),      ],    },  },});

其中viewportWidth是我自己试出来的，后面官方应该会处理的。

它的index.tsx里生产的代码还是非常规矩的。

import React from 'react';import AppLayout from './components/AppLayout';import SocialFeedComponent from './components/SocialFeedComponent';import TimeDisplay from './components/TimeDisplay';import styles from './index.module.less';const MyComponent: React.FC = () => {   return (    
      { /*  */}            { /*  */}    
  );};export default MyComponent;

因为截图是整页，所以上面的状态栏，即TimeDisplay组件不需要，下面Tab即AppLayout不需要。

只留中间的SocialFeedComponent即可。

此时，预览页会出现这样的问题，小程序那栏丢到最下面去了。首先猜测是布局样式问题，仔细一看是dom结构问题。

它应该和上面的节点在一个容器里。改成下面这样就OK了。

如果大家仔细看，还有一处不完美，不是1:1的。

生成的代码

原图

其实这个问题非常好解决。

生成的代码块里有类似的样式，所以照猫画虎，直接调一下里面的内容就好了。这里就不一一讲解了。

以上内容，半个小时左右就能改完，且代码跟人工产出几乎对比分辨不出来，具有可读性。

例子2

由于我需要给谷歌Dev Fest做分享，我就拿他们的PPT做了一个简单的生成。代码地址：https://weavefox.alipay.com/langshu/qfdb6qz5uogxltmb。

我们可以看到第一个Div它的识别是这样的。

import React from 'react';import {  Button } from 'antd';import styles from './index.module.less';const EventPage: React.FC = () => {   return (    
      
        
                                                
        
                    
            DDevFest                                      Editable Location                      
        
      
    
  );};export default EventPage;

前面4个图片好理解，我们看看第五个图，它是怎么实现的。

左边一个图，右边div，右边的div里一个span，加上一个Button，加上一张图。虽然不是特别完美，也算是基本够用了，比如调整尺寸，也还是非常方便的。

以上内容，3分钟内生成的，且代码具有可读性。

如果我想把这个例子生成为Vue.js代码，其实特别简单，只需要切换一下技术栈的下拉选项，如果所示。

几乎瞬间就完成，真是太方便了，预览如下，同理，微信小程序也是一样。

对比一下

前面讲过WeaveFox是Image to Code，那么它和Design To Code到底有多少差异，这个事可以再细挖一下。我整理了一个对比图，如下。

接下来，针对这几项，我们会一一讲解。

输入差异

设计图明显要更复杂一些，比如早起的PS，后来Sketch，Figma，这就依赖有设计师。另外以前的Design To Code核心是遍历Schema，所以对设计图的图层的放置方式是非常重要的，如果设计师不按照一定规律的话，会导致识别不准。

使用设计图，图层信息丰富，矢量图，导出更精准。前提是你要有设计师，且设计师要为Design To Code做设计约束。一般前端和设计不在一个部门是难落地的。

使用图片，就有了极大的遍历，很多时候产品经常会说，我想要xx的竞品的功能，改改颜色就行。这种场景用WeaveFox就极好。另外，在设计资产丰富和UI统一的情况下，它也可以极大的复用，对设计师来说也是提效的。

智能化差异

有一个很有意思的论调，如下图。

除了AGI以外，其他的AI都是垃圾，这是网友的图，我对此表示深深认同。

这就是跨越时代的新技术带来的好处，很明显，WeaveFox 把握住了机会。

出码差异

Design To Code出码难点

• 设计图清晰

• 图标合并

• 还原空间关系

• 分行分列

• 提取循环节点

• 转换样式

• 构建骨架

• 多平台出码

• …

这里面最难的是，提取循环节点。曾经见过Code.fun的CEO，和他聊过这个话题，比如提取相似元素，相似投影，继而进行投影分组，节点规组。这应该算他们最核心的能力了，问具体一点的内容，他就会显得非常谨慎。

其实想想也知道，不规律的的图层结构，你要去给它归类，识别，自然是极其难的。

这些在多模态大模型技术里，完全不存在了。

对于大模型来说，它不关心你的层级关系，它识别出啥就是啥。这就在根本上杜绝了Design To Code的问题。

其实，还有一个思路，让大模型去调整设计图的图层关系，去强化已有的Design To Code，也许可行。

无论如何，图片输入是更简单的，成本最小，兼容性最强的方式。以前在淘宝做营销活动的时候，总有业务说想快速复制某个页面，当时我们做了一个以图搜图，就是找相似模块，快速拼出一个。现在有了WeaveFox，可以做到1比1的100%还原，是非常容易的。

目前weavefox还不具备字段绑定功能，后面把这个功能加上，采用淘宝营销活动那种API超市方式获得API字段，想想还是非常爽的。

效率

按照腾讯音乐公开的Design To Code实践数据，他们最多提高60%效率。

对于我的WeaveFox的2个例子，有的时候最复杂的那个也是到8倍以上。我猜测，对于专业前端提效3-5倍左右，对于非专业前端，我想10倍以上也问题不大。对此，我保持非常乐观和看好。

未来

就目前来看，WeaveFox还处于初期，还有很多产品化的路要走，这里我简单整理一下这一段时间我使用时，觉得可以提升的点。

1、在输入端进行标记或者某种方式，对预训练语料进行处理

2、开放IR协议标准和协议实现SDK，支持更多转码可能性

3、设计图转代码依然可行，在图片之外，还有更多信息，这对出码比率和校正处理也是非常重要的。

随着AI技术的不断进步，特别是大语言模型在代码理解和生成方面的持续突破（模态融合技术），我们有理由相信，未来AI编程工具不仅会改变软件开发的方式，也会为整个行业带来新的机遇和可能性。毫无疑问，WeaveFox已经找到了上车的钥匙，它的使用足够简单，出码可读性高，极大的提升了在已有项目和专业开发领域的前端开发效率，这是我非常喜欢这个产品的原因，也诚意的推荐大家去试试。

了解更多请前往：https://yuque.com/weavefox