蚂蚁团队自研的「智能开发神器」,这款工具让你秒变 “代码大师”!

科技   2024-12-19 11:30   山东  

现在,程序员在大厂里工作简直太幸福了,大厂里写代码真的是越来越高级了。只需要上传一张图片,就轻松写出前端界面的源代码。原本 3小 时的活,现在 1 小时搞定。

你可以畅想一下,在喝杯咖啡的时间里,让代码自动生成,是不是就有点小激动呢?

现在它真的来了,我们一起来看看蚂蚁的程序员是如何摸鱼的,不对,是如何干活的。

蚂蚁人的开发神器

我们一起先看看如下这张动图,通过动图,我们可以看出来,一张图就能搞定中后台页面,简直是前端开发者的“懒人神器”!

首先,我们把图片切成几块,挑选出你想要生成代码的部分,然后狠狠地点击“生成代码”按钮!

接下来,选择你喜欢的技术栈和框架,比如:React + AntD ,这个智能的懒人神器就会根据你选择的技术架构来生成代码。

然后,狠狠地点击“OK”,让代码生成的魔法开始发挥作用!

最后,放松等待几分钟,小茶时间结束后,你就能看到闪闪发光的代码和炫酷的效果预览啦!

通过这个演示,我们就可以看出,它根据你截图的图片,并根据你选择的技术架构,帮你生成了代码和预览界面。这个代码有没有生成到你的“心趴”上呢?

关键是,不止中后台,移动端也能一键生成,简直是“码农的魔法棒”!🪄挥一挥,页面搞定了!

上传我们需要制作的移动端界面的图片,它就会自动识别界面,然后智能的帮你生成移动端的代码和预览效果。动图如下:

不满意怎么办?还能支持二次调整,让你秒变前端大神!

如果页面很大怎么办?让俺复刻一个 B 站的首页,从自动切图分区到代码生成,只需要几分钟的时间,原本需要花个把小时开发。

WeaveFox

这个工具叫什么呢?没错,就是 WeaveFox。WeaveFox 是由蚂蚁前端团队自研的 AI 工具。是面向 AI 时代的前端智能研发平台,基于蚂蚁百灵多模态大模型打造,能够根据设计图直接生成前端源代码,为前端研发带来高质、高效、高产的研发体验。平台目前已支持控制台、移动端 H5、小程序、以及局部卡片等多种主流应用类型。

产品特性:

  • 支持多端,包括控制台、移动端、小程序等;
  • 支持多技术栈,包括 React,Vue,less,scss 等;
  • 支持二次调整;
  • 是前端领域大模型;
  • 准确还原,WeaveFox 追求设计稿的一比一还原,让你的设计充分得到展现。

从图到码:技术揭底

WeaveFox 基于蚂蚁自研的百灵多模态模型构建,是具备细粒度 UI 理解能力的前端领域大模型,为前端开发提供了更精准的代码生成和优化能力。
信息来自「前端.AI」1122 体验技术日,链接里有详细的ppt可以阅读, https://www.yuque.com/weavefox/blog/1122
输入设计图,前端领域大模型会进行整稿 / 局部块推理的自动切分识别,得到页面语法结构。
其中建立的页面语法结构标准对 UI 信息原子组件定义本身也是合理完备的。
最后基于页面语法结构的布局树作为上下文配合模型矩阵完成高可读性和可维护性的业务代码生成:

结语

据说这款产品明年就会正式开放,如果你对这个产品感兴趣,可以加入产品交流群哦。

非著名程序员
关注我,一个带领程序员开阔眼界,提升认知,突破圈层,实现个体崛起的公众号。
 最新文章