IT评测·应用市场-qidao123.com

标题: 终于找到了AIGC时代连专业前端都能提效的工具 [打印本页]

---

作者: 悠扬随风    时间: 2025-1-24 00:07
标题: 终于找到了AIGC时代连专业前端都能提效的工具
现在各种 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下面还是须要做视频的。

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

复制代码

此中viewportWidth是我自己试出来的，背面官方应该会处理的。
  它的index.tsx里生产的代码还是非通例矩的。

1. import React from 'react';
2. import AppLayout from './components/AppLayout';
3. import SocialFeedComponent from './components/SocialFeedComponent';
4. import TimeDisplay from './components/TimeDisplay';
6. import styles from './index.module.less';
8. const MyComponent: React.FC = () => {
9.   return (
10.     <div className={styles.mainSection}>
11.       {/* <TimeDisplay /> */}
12.       <SocialFeedComponent />
13.       {/* <AppLayout /> */}
14.     </div>
16.   );
17. };
19. export default MyComponent;

复制代码

因为截图是整页，所以上面的状态栏，即TimeDisplay组件不须要，下面Tab即AppLayout不须要。
  只留中心的SocialFeedComponent即可。
  此时，预览页会出现这样的问题，小步伐那栏丢到最下面去了。首先猜测是布局样式问题，仔细一看是dom布局问题。
  

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

  如果大家仔细看，还有一处不完善，不是1:1的。
  生成的代码
  

  原图
  

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

  生成的代码块里有雷同的样式，所以照猫画虎，直接调一下内里的内容就好了。这里就不逐一解说了。
  以上内容，半个小时左右就能改完，且代码跟人工产出几乎对比分辨不出来，具有可读性。
  

预估时间	实际时间	准确度	代码可读性
4小时	0.5小时	100%	100%

  例子2

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

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

1. import React from 'react';
2. import { Button } from 'antd';
4. import styles from './index.module.less';
6. const EventPage: React.FC = () => {
8.   return (
9.     <div className={styles.eventContainer}>
10.       <div className={styles.sectionHeader}>
11.         <div className={styles.imageGallery}>
12.           <img
13.             alt=""
14.             src="https://weavefox.alipay.com/assets/62788b96-0b21-4989-8d1d-6359873d2fd7.png"
15.             className={styles.imageItem}
16.           />
17.           <img
18.             alt=""
19.             src="https://weavefox.alipay.com/assets/259e2620-289d-4a91-b3ac-d68ae1f62a5a.png"
20.             className={styles.personalAvatar}
21.           />
22.           <img
23.             alt=""
24.             src="https://weavefox.alipay.com/assets/c2720093-1fba-471a-ba22-530c7c7e1b41.png"
25.             className={styles.thirdUserImage}
26.           />
27.           <img
28.             alt=""
29.             src="https://weavefox.alipay.com/assets/bd272b22-cfbe-4b3f-9e4e-09dbca6850c1.png"
30.             className={styles.fourthUserImage}
31.           />
32.         </div>
34.         <div className={styles.additionalInfo}>
35.           <img
36.             alt=""
37.             src="https://weavefox.alipay.com/assets/a7976398-5c82-4d1a-aa0b-d0072909edfc.png"
38.             className={styles.infoImage}
39.           />
40.           <div className={styles.eventDescription}>
41.             <span className={styles.eventTitle}>DDevFest</span>
43.             <img
44.               alt=""
45.               src="https://weavefox.alipay.com/assets/fd54bb8d-57d3-4ac5-8f4f-b0d1020b4b76.png"
46.               className={styles.descriptionImage}
47.             />
48.             <Button
49.               shape="round"
50.               size="large"
51.               onClick={onEditableLocationClick}
52.               className={styles.actionButton}
53.             >
54.               Editable Location
55.             </Button>
57.           </div>
59.         </div>
61.       </div>
63.     </div>
65.   );
66. };
68. export default EventPage;

复制代码

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

  左边一个图，右边div，右边的div里一个span，加上一个Button，加上一张图。固然不是特别完善，也算是根本够用了，比如调解尺寸，也还是非常方便的。
  以上内容，3分钟内生成的，且代码具有可读性。
  

预估时间	实际时间	准确度	代码可读性
2小时	0.05小时	90%	100%

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

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

  对比一下

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

  接下来，针对这几项，我们会逐一解说。
  输入差异

  设计图显着要更复杂一些，比如早起的PS，厥后Sketch，Figma，这就依靠有设计师。另外以前的Design To Code核心是遍历Schema，所以对设计图的图层的放置方式是非常重要的，如果设计师不按照肯定规律的话，会导致识别不准。
  利用设计图，图层信息丰富，矢量图，导出更精准。条件是你要有设计师，且设计师要为Design To Code做设计约束。一般前端和设计不在一个部分是难落地的。
  利用图片，就有了极大的遍历，很多时间产品常常会说，我想要xx的竞品的功能，改改颜色就行。这种场景用WeaveFox就极好。另外，在设计资产丰富和UI同一的情况下，它也可以极大的复用，对设计师来说也是提效的。
  智能化差异

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

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

对比维度	TensorFlow	多模态大模型
核心定位	• 深度学习框架 • 重要用于开发和训练呆板学习模型	• 同时处理多种数据（文本、图像、语音、视频等） • 作为通用大模型平台，支持多模态理解与生成
技术架构	• 以盘算图 (Graph) 为基础 • 提供高级别 API（如 Keras）和底层 API（图运算）	• 基于大规模 Transformer 或相似架构 • 具备多模态信息融合与对齐机制，能够跨模态理解和生成
重要功能	• 自界说建模：可机动构建神经网络 • 高性能加速训练：分布式训练、硬件加速 (GPU/TPU)	• 跨模态交互：文本-图像、文本-语音等 • 零/少样本学习：可快速适配多类任务
实用场景	• 盘算机视觉、自然语言处理、语音识别等多类任务 • 通用性强，但须要用户自行设计网络	• 多模态搜索、内容生成（文本生成、图像生成等） • 同一模型处理多样的输入输出
学习/推理机制	• 需用户自行编写训练流程、损失函数、网络布局等 • 偏向强有监督或弱监督训练	• 具备大规模预训练能力，可以在下游任务中微调或零样本推理 • 借助对比学习、对齐方法进行多模态融合
依靠生态	• TensorFlow Serving/Hub 等用于模型部署 • 强大的社区和工具链支持	• 依靠大规模预训练集群及推理集群 • 仍在快速发展阶段，相关部署和生态尚不及 TensorFlow 成熟
典范应用	• 自界说网络训练、学术研究、工业级深度学习应用 • 支持从小模型到大规模分布式训练	• ChatGPT、DALL·E、Stable Diffusion 等跨模态/大模型应用 • 复杂场景下多模态融合与生成

  这就是跨越时代的新技术带来的好处，很显着，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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)

Powered by Discuz! X3.4