devbox
喵喵爱编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

CodeFun-UI 设计稿智能生成前端源代码_根据原型图自动生成前端代码

作者：喵喵爱编程 | 2024-07-14 01:43:19

赞

踩

根据原型图自动生成前端代码
  1. <div id="article_content" class="article_content clearfix">
  2.         <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-163de54645.css">
  3.                 <div id="content_views" class="htmledit_views">
  4.                     <div id="js_content"> 
  5.  <h1><a name="t0"></a>大厂技术&nbsp;&nbsp;高级前端&nbsp;&nbsp;<a href="https://so.csdn.net/so/search?q=Node&amp;spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.7020&quot;,&quot;dest&quot;:&quot;https://so.csdn.net/so/search?q=Node&amp;spm=1001.2101.3001.7020&quot;}" data-tit="Node" data-pretit="node">Node</a>进阶<br></h1>
  6.  <p style="text-align:center;">点击上方&nbsp;程序员成长指北，关注公众号<br></p>
  7.  <p style="text-align:center;">回复1，加入高级Node交流群</p>
  8.  <h2><a name="t1"></a>前言 <br></h2>
  9.  <p>前端近年来一直在尝试如何提高开发人员的效率，从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线 IDE，大家都在为未来的新的且高效率的方式做着努力。</p>
  10.  <p>前端行业即将要进入到下一个阶段，因为对于如何搭建组件库、脚手架已经有大量的文章/教程，已经快到了人人可以手撕一个组件库的阶段了，并且随着前端开发人员的技术的普遍提高，枯燥机械式地写代码（样式/布局）已经无法满足开发人员日益增长的追逐技术的心了，因此需要智能化布局来解放这些枯燥的工作。</p>
  11.  <p>落后就要挨打，我就打算趁着周末打算探索一下前端智能化。（本人也是新手，纯是感兴趣~，因此不用担心看不懂）</p>
  12.  <img src="https://img-blog.csdnimg.cn/img_convert/d74e8fa80728a29207939a23d7c90962.png" alt="d74e8fa80728a29207939a23d7c90962.png">
  13.  <h2><a name="t2"></a>发展历程 </h2>
  14.  <p>其实要说从设计稿转化为 html 的项目，最早可以溯源为 <strong>PS(Photoshop)</strong> 的导出 html 功能，PS(Photoshop) 可谓是一个老牌的设计产品，从1988年首次发布新版本，到现在仍然在更新。</p>
  15.  <p>我们来体验一下这个功能。</p>
  16.  <p>首先打开 PS， 导入一张网上随便下载的图片，将 图片 拖进 PS。然后按照以下步骤进行操作。</p>
  17.  <img src="https://img-blog.csdnimg.cn/img_convert/edb861923b236c845f3bbf9ae7c256ae.png" alt="edb861923b236c845f3bbf9ae7c256ae.png">
  18.  <p>1.按 command/ctrl + R 打开标尺</p>
  19.  <p>2.拖出辅助线，拖出分割块</p>
  20.  <p>3.选择切片工具（裁剪工具那一个图标按右键）</p>
  21.  <p>4.选择顶部的基于参考线切片</p>
  22.  <p>5.文件 - 导出 - 储存为 web 所用格式</p>
  23.  <p>就能看到导出了以下几个文件。（我这里切的比较粗糙如果是精细地将一张图片进行切片，应该是非常符合web 的所用格式的，毕竟很久以前，设计师就是这么给我们切片的）</p>
  24.  <img src="https://img-blog.csdnimg.cn/img_convert/cb227d7adc4668beac64aa5c3fe382b7.png" alt="cb227d7adc4668beac64aa5c3fe382b7.png">
  25.  <p>然后我们打开 html 查看里面的元素。</p>
  26.  <img src="https://img-blog.csdnimg.cn/img_convert/337b6bcac8746199fddf5597bb6f89af.png" alt="337b6bcac8746199fddf5597bb6f89af.png">
  27.  <figcaption>
  28.   <br>
  29.  </figcaption>
  30.  <p>发现它主要以 table 的方式来布局，但是这样的形式，在日益繁多的设备上是无法使用的（可能在当时的PC上还能有不错的应用场景。）</p>
  31.  <p>前端当时正处于萌芽阶段，前端智能化的概念还没有被提出，没有 Vue、React，没有工程化，也没有低代码，一切都是刚刚起步，前端智能化也没有被提及。</p>
  32.  <p>直到2017年，一篇 &nbsp;pix2code: Generating Code from a Graphical User Interface Screenshot<sup>[1]</sup> 的论文引起了业界的关注，该论文实现了从一张 UI 截图识别生成了 UI 结构，并且将 UI 结构描述转化成了 HTML 代码。</p>
  33.  <p>随后，基于 pix2code 开发的 Screenshot2Code<sup>[2]</sup> &nbsp;项目速度进入到 Github 排行榜第一，该工具能够将 UI 截图转成 HTML 代码，该项目作者号称 3 年后人工智能会彻底改变前端开发。</p>
  34.  <img src="https://img-blog.csdnimg.cn/img_convert/923327ea53e02ca1428cb35b5a2de2dd.png" alt="923327ea53e02ca1428cb35b5a2de2dd.png">
  35.  <figcaption>
  36.   <br>
  37.  </figcaption>
  38.  <p>2018 年，微软 AI Lab 开源了草图转代码工具 Sketch2Code<sup>[3]</sup>，一些人认为生成代码效果不理想不适用于生产环境，但也有人认为代码自动生成还处于初级阶段，未来发展值得想象。</p>
  39.  <p>工作流：</p>
  40.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/0f2e94e4df8ddc1cb6af72752226f133.png" alt="0f2e94e4df8ddc1cb6af72752226f133.png"></p>
  41.  <p>效果实现：</p>
  42.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/869c3b2e0e2887eb1afd8669ceae9617.gif" alt="869c3b2e0e2887eb1afd8669ceae9617.gif"></p>
  43.  <p>一直到2019年， D2 前端论坛（Designer &amp; Developer Frontend Technology Forum, 简称D2）发布了 imgcook ，前端智能化这个词正式确立了。</p>
  44.  <p>随后58集团、CodeFun等 都相继发布了智能化的产品，但是这个行业是年轻的，也是具有挑战的，这些产品的都还在初期，虽然没办法全方面的得到开发者的青睐，但是都已经有一些不错的落地场景了。</p>
  45.  <h2><a name="t3"></a>项目体验 </h2>
  46.  <p>设计稿：<strong>demo.sketch</strong></p>
  47.  <p><strong>代码与sketch下载地址：https://github.com/nan980914/ui2code-demo</strong></p>
  48.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/b3adfdfdde9bc073fd3d540c4a26ac29.png" alt="b3adfdfdde9bc073fd3d540c4a26ac29.png"></p>
  49.  <p>这次将分别体验58的 Picasso、imgcook、CodeFun 3款工具的「sketch设计稿转代码」。</p>
  50.  <p>我们将以平常写代码中比较重视的几个部分来对这三款软件进行分析：</p>
  51.  <ol><li><p>是否可以还原设计稿</p></li><li><p>布局识别的准确性</p></li><li><p>代码（css）可维护性（代码量，定宽定高，flex）</p></li><li><p>List自动识别，分组</p></li><li><p>列表循环识别</p></li></ol>
  52.  <p>其中第一点是最基本的，因为如果一个D2C（Design To Code）工具，抛开一些布局之外，连基本的设计稿都无法1:1 还原的话，对我们开发的工作量来说太巨大了，这就好比某个同事已经写了一个半成品项目了，这个时候他突然有事请假了，需要我们去帮忙结尾，这个时候我们需要去看别人的代码，再去修改。每每这个时候心里都会念叨，还不如自己重新写一个项目。</p>
  53.  <img src="https://img-blog.csdnimg.cn/img_convert/6a93f549d6e88adb951a23f24be2a6b8.png" alt="6a93f549d6e88adb951a23f24be2a6b8.png">
  54.  <p>对于第二点来说，布局的准确性，明明是一个左右布局，你给我识别成了上下布局，那基本上那一块的代码都都重新进行修改。相比第一点来说，稍微还好一些，至少不是去收拾一个半成品，只是去改别人写好的项目中bug一样，至少还是能用的。</p>
  55.  <img src="https://img-blog.csdnimg.cn/img_convert/27d2f2302ac928987094ba901753ca56.png" alt="27d2f2302ac928987094ba901753ca56.png">
  56.  <p>第三点的话，我认为还是很重要的，CSS 代码的可维护性，我们都知道设计图上对于模块的大小都是width 和 height 的标注的，但是我们真正在写代码的时候，都是不会去定宽和定高的，都是由内部元素去将模块给撑开高度，这样的话，对于移动端的短适配性会比较好。</p>
  57.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/4dc74d674a6fb8737e529ee3f41318d1.png" alt="4dc74d674a6fb8737e529ee3f41318d1.png"></p>
  58.  <p>对于第四点和第五点，算是写代码的复用小能手，对于一个 list 我们一般不会去在 html 写死成多个 块，而是会用循环舒服，减少重复代码，也是为了能够和后端进行适配。</p>
  59.  <h3><a name="t4"></a>58 Picasso(https://github.com/wuba/Picasso)</h3>
  60.  <p>操作流程：</p>
  61.  <p>Picasso的Github仓库<sup>[4]</sup>上下载其sketch插件毕加索，在sketch中选中我们的画板后生成Web代码。</p>
  62.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/8d4875f55cbd350df0ac1e473b35a6db.png" alt="8d4875f55cbd350df0ac1e473b35a6db.png"></p>
  63.  <p>然后就导出了这样一个文件，让我们打开index.html来看看效果。</p>
  64.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/2c8c3acf414c71a96cceabe6d09f77d7.png" alt="2c8c3acf414c71a96cceabe6d09f77d7.png"></p>
  65.  <h4>1.是否还原设计稿：</h4>
  66.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/6546fcc7e3187fada0066627ebc6d07c.png" alt="6546fcc7e3187fada0066627ebc6d07c.png"></p>
  67.  <p>怎么说呢，可以看到58Picasso这个还原效果其实除了订单的实付价格那里不知道怎么被挤下去了，和底部footer的样式错乱以外看起来还可以，那我们来看看代码到底怎么样。</p>
  68.  <h4>2.布局识别的准确性：</h4>
  69.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/3dc4b6cb8500a98aca8d43962bb73914.png" alt="3dc4b6cb8500a98aca8d43962bb73914.png"></p>
  70.  <p>我们期待的是两个左右结构的块，却被识别成了这个样子...</p>
  71.  <p>虽然以上采用了 flex 布局，但是并没有等分布局，并且也被定宽了，我们希望的是：</p>
  72.  <img src="https://img-blog.csdnimg.cn/img_convert/04f7a6ef8204e3743bc648cffdf8e9ee.png" alt="04f7a6ef8204e3743bc648cffdf8e9ee.png">
  73.  <h4>3. 代码可维护性：</h4>
  74.  <p>index.css生成1289行。</p>
  75.  <img src="https://img-blog.csdnimg.cn/img_convert/5134aeb8f91f2748102856c25bed2ecc.png" alt="5134aeb8f91f2748102856c25bed2ecc.png">
  76.  <p>分析了一下它会生成如此多代码的原因。</p>
  77.  <h5>1.累赘的类名</h5>
  78.  <p>它给每一个div元素都设置了一个英文单词，并且与当前的模块的语义化严重不符。</p>
  79.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/119244c7fa6474124ccb5a9d2a351743.png" alt="119244c7fa6474124ccb5a9d2a351743.png"></p>
  80.  <h5>2.定宽定高</h5>
  81.  <p>由于它给每个div都是定宽定高的，因此也产生了许多不必要的代码。</p>
  82.  <img src="https://img-blog.csdnimg.cn/img_convert/d9b25cf055d2b3f1a928058ddea2ae65.png" alt="d9b25cf055d2b3f1a928058ddea2ae65.png">
  83.  <h5>3.同类型无法合并</h5>
  84.  <p>由于没有办法归类相同的元素，因此代码也变得更多了。</p>
  85.  <img src="https://img-blog.csdnimg.cn/img_convert/8a61d902d5f8e7137185fe2154774222.png" alt="8a61d902d5f8e7137185fe2154774222.png">
  86.  <h4>4. List自动识别，分组</h4>
  87.  <p>分析这个设计稿我们可以看出来，下面三个订单的块其实是非常相似的结构，我们希望生成的代码能把相似的结构识别出来并分在同一个组内而不是平铺。</p>
  88.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/78091eff598d7a20a9ea30c2675f1e76.png" alt="78091eff598d7a20a9ea30c2675f1e76.png"></p>
  89.  <p>连 list 都没有识别好，那就没有第五步了，总结起来这样的代码，仿佛就是同事甩的锅一样，难以维护，有这时间看代码和修复代码，自己已经写好一个完美版本了。</p>
  90.  <h4>5.总结</h4>
  91.  <p>所以 Picasso 距离工业化代码还是有一定差距的，不过 Picasso 的代码是开源的，里面的布局方案是通过图层解析出DSL，然后再通过一定的算法生成的代码。</p>
  92.  <h3><a name="t5"></a>imgcook(https://www.imgcook.com/)</h3>
  93.  <p>流程：</p>
  94.  <p>imgcook的官网<sup>[5]</sup>上下载其sketch插件，在 sketch 中打开插件的面板选择导出代码导出到我们的项目，然后就可以去官网我们的项目里查看。</p>
  95.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/9d38e56a91205e241ecc9af9020233d3.png" alt="9d38e56a91205e241ecc9af9020233d3.png"></p>
  96.  <h4>1.是否还原设计稿：</h4>
  97.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/5fec073ff829a622749a0f1ea8cad137.png" alt="5fec073ff829a622749a0f1ea8cad137.png"></p>
  98.  <p>由图可以看到，imgcook 貌似都没有把设计稿还原。</p>
  99.  <img src="https://img-blog.csdnimg.cn/img_convert/b9b27ee624a8c27042363ef423f2e3a0.png" alt="b9b27ee624a8c27042363ef423f2e3a0.png">
  100.  <p>订单管理那块的层级好像被上面给挡住了，另外Button都被描边了，显得特别粗。</p>
  101.  <h4>2.布局识别的准确性：</h4>
  102.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/12e197095eaf89215f1a132a18508784.png" alt="12e197095eaf89215f1a132a18508784.png"></p>
  103.  <p>仔细看其布局，其实识别的比上面 58 Picasso 的准确很多，比较符合我们日常写代码的习惯，但是依旧被定了宽度。</p>
  104.  <img src="https://img-blog.csdnimg.cn/img_convert/7c7fbd345d26d5a3d32d1d0df0e19849.png" alt="7c7fbd345d26d5a3d32d1d0df0e19849.png">
  105.  <h4>3. 代码可维护性：</h4>
  106.  <p>CSS 生成1870行...冗余代码非常多。</p>
  107.  <p>其实这部分还是和 58 Picasso 一样的问题的。累赘的类名，定宽定高，并且同类型没有合并（暂时没有找到如何合并），还有些是通过 absolute 来布局的。</p>
  108.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/ec9475d57c1d9f6f90877ec1dbd93815.png" alt="ec9475d57c1d9f6f90877ec1dbd93815.png"></p>
  109.  <h4>4. List自动识别，分组</h4>
  110.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/d63acade7d173dd04d66d14856d15b09.png" alt="d63acade7d173dd04d66d14856d15b09.png"></p>
  111.  <p>这里也和58 Picasso 有点类似，貌似效果还是不太理想。也是没有很好地将 list 进行识别。<br></p>
  112.  <p>imgcook 也算是一个做了比较久的产品了，可见D2C的难度还是非常大的，对于算法的要求很高。</p>
  113.  <img src="https://img-blog.csdnimg.cn/img_convert/7a8c06f43be1b37a4a9a3719b37fa2a3.png" alt="7a8c06f43be1b37a4a9a3719b37fa2a3.png">
  114.  <h4>5.总结</h4>
  115.  <p>Imgcook 比 58 Picasso 改进了许多，加入了 AI 来训练模型，准确度和可用性都比Picasso 好很多。并且模型训练框架 pipcook<sup>[6]</sup> 也开源在 github 上面。</p>
  116.  <h3><a name="t6"></a>CodeFun(https://code.fun/)</h3>
  117.  <p>流程：</p>
  118.  <p>CodeFun的官网<sup>[7]</sup>上下载其sketch插件，在sketch中打开插件的面板选择上传此设计稿，然后就可以去官网我们的项目里查看。</p>
  119.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/f36d7f94d93db67841ff1d78862fa732.png" alt="f36d7f94d93db67841ff1d78862fa732.png"></p>
  120.  <h4>1.是否还原设计稿：</h4>
  121.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/d7e7dc400b502ca988cc8ebbcf38f7e3.png" alt="d7e7dc400b502ca988cc8ebbcf38f7e3.png"></p>
  122.  <p>很惊喜，CodeFun 这个还原的比上面两者都要好，和设计稿看起来几乎100%。</p>
  123.  <img src="https://img-blog.csdnimg.cn/img_convert/7a84bf53bcba25ad607f8165f71d9b25.png" alt="7a84bf53bcba25ad607f8165f71d9b25.png">
  124.  <h4>2. 布局识别的准确性：</h4>
  125.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/35ba67849bd47bfdf8fe291d4af00bb7.png" alt="35ba67849bd47bfdf8fe291d4af00bb7.png"></p>
  126.  <p>完美的识别出了我们期待的布局，<strong>但是这里要提一下的是，CodeFun 不仅识别除了均分的 <code>flex</code> 布局，而且相比 imgcook 没有定宽，而是使用了<code>flex-grow:1</code></strong></p>
  127.  <img src="https://img-blog.csdnimg.cn/img_convert/d634e931752ccd3f1d284664d1876701.png" alt="d634e931752ccd3f1d284664d1876701.png">
  128.  <p>效果如图：</p>
  129.  <img src="https://img-blog.csdnimg.cn/img_convert/41d002c5d81b4265e1dc9977a62df833.png" alt="41d002c5d81b4265e1dc9977a62df833.png">
  130.  <p>看代码可以看到，部分公共的样式都被翻译到了<code>equal-division-item</code>这个class里面，几个box都共享上了，唯独<code>flex-grow:1</code>被单独弄成了<code>group_16 17 18</code>，造成了一些冗余的css代码，这么复杂的识别都做到了，这里是不是个bug呢？</p>
  131.  <h4>3. 代码可维护性</h4>
  132.  <p>css 代码生成 597 + 81 = 678 行（主代码+公共代码），比<code>Picasso</code>的<strong>1289</strong>行和<code>imgcook</code>的<strong>1870</strong>行分别减少了47%和<strong>64%</strong>。</p>
  133.  <p>虽然类名还是有些不语义化，但是已经是去除了写死的宽高，同类型进行了合并抽取出了公共代码。</p>
  134.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/ac818a592d0cddd7be9eca91c63044bd.png" alt="ac818a592d0cddd7be9eca91c63044bd.png"></p>
  135.  <h4>4. List自动识别，分组</h4>
  136.  <p>CodeFun 能自动识别出下面三个结构相似的订单模块，并进行分组，将三个块外面包了一个wrapper，符合我们开发人员日常写代码的习惯。</p>
  137.  <p style="text-align:center;"><img src="https://img-blog.csdnimg.cn/img_convert/8f4003303caff7eb8aafa1b2b34493bc.png" alt="8f4003303caff7eb8aafa1b2b34493bc.png"></p>
  138.  <h4>5. 列表循环识别</h4>
  139.  <p>因为已经识别出了下面三个结构相似的模块，于是vue代码会自动以<strong>v-for列表循环</strong>的方式展现。</p>
  140.  <img src="https://img-blog.csdnimg.cn/img_convert/9c96484f4eac251c5fbed4b392667745.png" alt="9c96484f4eac251c5fbed4b392667745.png">
  141.  <p>如果想要抽离数据，可以通过上方的数据绑定自定义字段名（一般我们会绑定为后端传过来的字段名）。</p>
  142.  <img src="https://img-blog.csdnimg.cn/img_convert/cac954b17253da35e21df4684f343eb0.png" alt="cac954b17253da35e21df4684f343eb0.png">
  143.  <p>绑定后的效果如下，其实到这一步，生成出的代码已经完全可用了。撒花
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/喵喵爱编程/article/detail/822580?site
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。