暴躁的码农 - 淘宝设计生成代码工具
type: channel
link: https://zacms.com/index.php/tag/淘宝设计生成代码工具/
items: imgcook由设计稿一键智能生成代码

imgcook由设计稿一键智能生成代码
type: item
date: 2020-04-10T08:41:00+08:00
description: 最近看到一个6得起飞的项目：imgcook, 直接上链接：https://imgcook.taobao.org/这个东西是干什么的呢，就是通过设计图直接生成代码，生成的代码包括vue，react，h5,小程序等等模式的。例如现在要你仿一个网站，小程序或者app，你会怎么做呢？截图，然后一行行敲？试试这个吧，截图，上传，生成代码。加上自己的接口也业务，搞定。如果你有专业的设计，sketch合作ps里面安装个插件，能更完美的生成。直接上演示：手机打开淘宝，截个图，大致是这样子的， 经测试，太过复杂的，需要用到插件然后点击首页：图片生成代码(内测版)然后上传图片，等待一会儿，等图形界面加载出来即可，时间有点长。左边是层级结构，中间是预览，右边是编辑此时已经可以看到他自动把页面上的响应快自动切好了。接下来，为了方便演示，选择h5开发规范(静态)，右上角保存下，保存的时候需要新建一个项目。然后导出。 然后解压，浏览器运行下index.html,看看代码可以看到虽然目前对中文支持不是太好，但是总体层级结构和代码已经基本没什么大问题，代码也还算是规范。 这还是他自动生成，如果你有专业的设计人员，用设计统计，按照他官方的规范进行设计，生成的代码更理想。至于设计工具上的插件体验，后面再体验，总体来说这个产品目前对于那种比较需要开发速度的 专题页，活动页或者一些小的仿站等确实可以节约不少切图的时间，而且代码可以生成多端，我将持续关注这个产品的发展，令人期待