什么神仙操作?能让设计稿智能生成代码准确率100%!

avatar
阿里巴巴 前端委员会智能化小组 @阿里巴巴

文 / 阿里淘系 F(x) Team - 苏川

设计稿居然可以智能生成代码?imgcook 来助力!

imgcook.com 是个设计稿智能生成代码平台,可以帮您自动生成高质量的前端代码。

2020年 双11 90.4% 前端模块是由 imgcook 自动生成的!欢迎来体验~


设计师给的设计稿图层太混乱怎么办?

你知道 imgcook 插件有“合并”和 “成组”这两种骚操作么?

什么?不知道?让我来给你演示一通!

什么是“成组”?

就是在 Sketch 插件中通过“成组”可以指定生成代码的嵌套结构

下面是我想要的嵌套结构


👇👇👇

将要放在一起的图层 选中、编组、成组


👇👇👇

生成的DOM树 100% 符合您的预期


什么是“合并”?

就是在 Sketch 插件中通过“合并”可以将多个图层合并成一张图片

这个功能你肯定用得到!

比如将多个图层组成的 ICON 合并成一张图片


👇👇👇

将要放在一起的图层 选中、合并图片


比如将多个图层组成的 氛围 合并成一张图片

👇👇👇

将要放在一起的图层 选中、合并图片


👇👇👇

将要放在一起的图层 选中、合并图片


组合拳“合并” + “成组”

imgcook 支持自动合并和成组

不用人工“合并” + “成组” 操作

也能自动生成可维护性较高的代码哦~

如果你的设计稿特别混乱,可以用这俩操作试试。

👇👇👇

“合并” + “成组” 一起用


👇👇👇

可以生成 100% 准确的代码


👇👇👇

查看生成的代码


你,学废了吗?

😇 😇 😇

学废了就来用 imgcook.com 帮您自动生成代码吧~~ 让您告别简单重复又繁杂的工作~

最终技能

我们一直在努力提升生成代码可维护性。

如果您有建议,欢迎来我们的用户群反馈。




除文章外还有更多的团队内容等你解锁🔓