本教程来源阿里淘系技术部，前端智能生成代码平台 imgcook

以下为官网：

https://www.imgcook.com/

一下为使用文档：

https://www.imgcook.com/docs

下面只是我实际使用过程中的步骤，官网的教程步骤实际上是面向设计师的，所以对于开发来讲，我们可以忽略使用sktche或者ps生成文件的步骤，直接通过我们从UI那里拿到的源文件生成代码。

打开链接https://www.imgcook.com/editor#/?fileparse=sketch 或者 https://imgcook.taobao.org/editor#/

很显然，我们可以看出这里有四种类型的文件源供我们选择，这里我们最好根据ui提供的sketch文件或psd文件，因为这样导出的文件不会有偏差，如果我们选择“c端图文图片”或者“PC中后台图片”，也就是UI给的png图，那么导出的细节有时候是有偏差的（亲测，官网也说必须是高精度jpg或者png），为了确保生成的代码一次到位，做出另ui折服的实现效果，最好找UI要sketch或psd源文件！！！

一般前端都是模块化方式开发，强烈推荐 一个模块一个模块 进行还原生成代码

第一次点击保存，是需要我们创建项目的，就像是在word里面第一次保存你新建的文件一样的道理。（这个时候你如果一直失败，请看文末解答1）

终于到了最最让人热血澎湃的步骤了，点击“代码”，生成代码，这里最让人感动哭的功能就是如下图所示，点击后可以选择DSL（不管是原生页面，还是小程序、react都可以生成对应的代码，这个功能真的感动哭了）

上面的步骤完了，别急着复制粘贴代码，我们可以点击“导出”，直接下载到本地（还不如复制粘贴来的快）

1.点生成代码需要先进行保存，点保存一直有error提示，问题原因是我们首次进入，没有团队，没有创建项目，没有登录，解决办法是，我们可以先进行登录，与github账号进行绑定，然后新建一个团队，新建一个项目。

2.左侧列表虽然有插件库选项，但是我们源文件最终只能生成文本标签，不能自动生成input等功能组件