聊一聊如何通过UI智能生成代码提高团队成产力设计稿生成代码一直是前端追求的方向之一，最近团队项目活动类型H5需求很多，需

前言

设计稿生成代码一直是前端追求的方向之一，最近团队项目活动类型H5需求很多，需要维护很多App的活动，尤其一到节假日的时候需求尤其的多。

下面分享总结一下我发现了什么问题，解决问题的思路，是如何解决的，最终提高团队生产力。

在开发中遇到了一些问题如下

这些问题由于种种原因在项目开发中很常见。调样式、布局、处理图片，花费了开发周期中的大量时间。从这个现象出发，调研了一些设计稿生成代码的方案.

最开始，是想从视觉（图片等）生成代码，这条线，找到了pix2code这套解决方案。但是，成本很高，最终的效果是不确定的，为什么说不确定呢，下面pix2code章节会说明。

本来我一直关注一个博主，一个不火的博主@设计稿智能生成代码，他们团队imgcook这款产品，抱着试一试的想法，走上了设计稿生成代码这条线。加上一些团队定制化的东西，成为了团队生产力的得力武库。详情见后面imgcook详细章节。

这个项目是一个研究项目，演示了深度神经网络从视觉输入生成代码的应用。pix2code原型仅需要一个输入图像，并且显示出77%的准确性，创始人表示pix2code有潜力结束对手动变成GUI的需求。

通俗一点说人家这个算是个半成品的神经网络算法，你要通过不断的定向训练来生成最终算法。官网给出的基础训练需要1500次，就是需要让他不断的识别设计稿并纠正识别的正确性。

考虑到已经有很多网站可以在线使用，而且每天都有新网站创建，因此从理论上讲，网络可以提供无限量的培训数据

当然，我个人认为1500次是远远不够的，后面很可能需要定制化一些东西，比如团队特有的一些框架、代码风格，设计稿风格等等。我们需要解决的是团队层面的问题而不只只是个人。

学习成本

官网一直强调“实验性”，“toy example”等等，最终的效果是不确定，风险很高的，虽然我相信会有训练的非常好的算法会出现，但是对于我们团队来说风险太大了，在我们现在团队层面是不推荐的。希望以后谁训练完了我去膜拜一下。以后我可能也会私下里偷偷去“玩一玩”。如果有所成果，我会再来分享。

首先我们来一些简介。

imgcook产品是阿里巴巴前端委员会智能化小组的服务化的内外落地产品，专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入，通过智能化技术一键生成可维护的前端代码，包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。（广告费到时候可以私聊我哈哈）

我这边采用的是设计稿Sketch、PSD生成sechema这条线。而且提供了DSL、Plugn等团队定制化功能。

先话不多说，我是怎么做的呢？

首先我们需要下载Sketch（我这边用Sketch来做演示）

然后我们要在imgcook官网下载Sketch，然后安装到Sketch。

向UI索取项目UI的Sketch源文件。然后我们来本地打开。

我们来打开看一下效果。

在Sketch的这个操作界面中呢，首先可以看到右侧多了一栏插件。

首先先讲解一下最大的三个按钮，导出数据、合并、成组。

导出数据 - 根据设计稿结构生成结构化json，结构化json用于生成sechema源码，页面调整完毕后即可点击这个按钮导出数据。
合并 - 用于合并图层。为什么要合并图层呢，如果你详细看一下UI源文件的话，设计稿中很多的效果都是由N多图片拼凑起来的，我们在项目中用到的切图往往是UI合并导出的完整图，所以说，这个功能还是很有必要的。这边你记得这个功能即可，不做操作也是可以的。
成组 - 把一些图层识别为一个组，代码中体现为一个公共父盒子模型。

其次讲一下下面有个添加协议的下拉框，点开后可以看到一些协议规则在里面。