imgcook设计稿生成代码插件

Sketch/PSD/静态图片生成代码插件

imgcook 是专注以各种图像（Sketch/PSD/静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的 UI 视图代码，期望此 imgcook (图像大厨) 成为一位 P5 的重构工程师，能切实提高前端的开发效率，并助力前端、设计师、测试的高效协作，我们期望做到：

100% 还原【设计师再也不用还原走查了】

100% 兼容【测试再也不用适配样式了】

一键上线【前端再也不用切图写样式了】

愿景：对设计稿少约束的前提下，高度还原设计稿，释放 UI 开发生产力，让你关注更具挑战性的事情！

Sketch 插件使用流程

1. 下载并安装 Sketch 插件

在网站首页下载 Sketch 版插件，解压文件后会得到 imgcook.sketchplugin 插件以及试验田试玩文件，双击安装 Sketch 插件，点击“OK”即可。需要注意的是以往 Sketch 官方升级会有一些不兼容旧版本设计稿的情况出现，相应部分 API 也会发生变化，imgcook 一般只支持最新版本的 Sketch，请确保你的 Sketch 版本是最新的。

阿里内部用户登录后可直接使用 alicdn 图片空间。

2. 导出数据

打开要还原的 Sketch 设计稿，如果无设计稿，可以在网站首页下载试用文件。
2.2 一般前端都是模块化方式开发，强烈推荐 一个模块一个模块 进行还原生成代码，所以期望要还原的模块在一个分组内即可，对分组名没有要求。更多设计稿注意点请看这里。

前端判断如果实现代码中有多图层需要合并成一个图片的，在分组名后添加 '合并' 即可。比如这里的 “GOOD” 、 “！”、“—”、“专属美味”，虽然设计上是多个目录的图层，但前端实现上可以直接合成一张图片。

选中某分组 -> sketch 的 Plugins -> imgcook -> 导出数据；或者选中某分组 + 快捷键 ⇧⌘C

ps: 内部用户请使用域账号登录，好处是生成的图片可直接上 alicdn

然后出现弹窗，点击“去粘贴” -> 自动打开浏览器 -> command + V 粘贴即可。

PS 插件使用流程

推荐 PS 版本：Adobe PhotoShop CC 2017 及以上，CS 系列不支持

1. 下载并安装 PS 插件

在网站首页下载 PS 版插件，解压文件后会得到对应操作系统的插件安装器文件以及试验田试玩 PSD 文件。安装器安装流程如下：

Mac 用户：双击 imgcook.photoshop_version.pkg 文件，按步骤提示进行安装，安装完毕后可重启 PhotoShop，在 Window（窗口）->Extensions（扩展文件）找到 imgcook 插件。如果遇到软件不可信问题，可前往 系统偏好设置 -> 安全性与隐私 -> 仍要打开。

Windows 用户：双击 imgcook.photoshop_version.exe 文件 ，按步骤提示进行安装，大概耗时几分钟，安装完毕后可重启 PhotoShop，在 Window（窗口）->Extensions（扩展文件）找到 imgcook 插件。

如果上述安装器安装流程出现异常（比如 Windows 安装过程卡住时间很久），可尝试手动安装。

解压 imgcook.photoshop.zip 文件，根据各自的系统将解压后的目录文件放置到以下指定目录里，重启 PhotoShop 即可在 Window（窗口）->Extensions（扩展文件）找到 imgcook 插件。

插件手动安装指定目录

Mac OS: /Library/Application Support/Adobe/CEP/extensions/
Windows x64: C:/Program Files (x86)/Common Files/Adobe/CEP/extensions/
Windows x32: C:/Program Files/Common Files/Adobe/CEP/extensions/

2. 签署问题

安装完 imgcook 插件后，打开 PhotoShop 可在 Window（窗口）->Extensions（扩展文件）找到 imgcook 插件，首次呼起插件会提示 插件未经正确授权 错误，可通过以下操作解决。

Mac

打开 Terminal 终端，针对不同 Adobe PhotoShop CC 版本可在终端执行以下命令：

CC 2015: defaults write com.adobe.CSXS.6 PlayerDebugMode 1

CC 2015.5: defaults write com.adobe.CSXS.7 PlayerDebugMode 1

CC 2017: defaults write com.adobe.CSXS.7 PlayerDebugMode 1

CC 2018: defaults write com.adobe.CSXS.8 PlayerDebugMode 1

Windows

打开注册表（运行 regedit）

找到 HKEY_CURRENT_USER\Software\Adobe

针对不同 CC 版本找到对应的 CSXS 项，比如 CSXS.7

鼠标右键新建字符串值

选中刚新建的字符串值注册表-鼠标右键-修改-数值名称：PlayerDebugMode 数值数据：1

CC 2015：HKEY_CURRENT_USER\Software\Adobe\CSXS.6
CC 2015.5：HKEY_CURRENT_USER\Software\Adobe\CSXS.7
CC 2017：HKEY_CURRENT_USER\Software\Adobe\CSXS.7
CC 2018：HKEY_CURRENT_USER\Software\Adobe\CSXS.8

执行完上述流程后，重启 PS 重新打开 Window（窗口）->Extensions（扩展文件）-> imgcook 可看到一个小终端界面。

3. 插件使用

3.1 打开下载包里的 imgcook试验田.psd 文件，找到 PS 界面 layers(图层) 窗口（如果没有，可以通过勾选 Window（窗口） -> layers（图层））打开
3.2 选中一个模块最外层的图层节点，点击插件终端界面里的导出数据。

3.3 等待插件处理完毕显示导出成功后即可点击 去粘贴 前往 imgcook 平台进行粘贴。

4. 其他问题

Windows 导出出现 undefined 问题：切换到插件安装目录，执行 npm install 后重启 PS

平台使用流程

1. 插件导出后会自动打开浏览器

2. command + V 粘贴

等待平台处理数据最后可看到导出的模块还原成功。

3.绑定数据(可选)

在编辑平台->快速设置->快捷绑定中，可以快速进行数据绑定。

3.1 绑定动态数据

平台默认会猜测一个字段，比如这里的商品图片，猜测成了 data.item_pic 字段，不满足需要直接改即可。数据默认是 data 对象，如需修改可针对生成后代码的修改。

支持模板拼接，例如: 距离${data.item_distance}m

3.2 不需要绑定动态数据

比如这里的静态图标（定位和五角星）

如果确定不需要绑定，则点前面的“禁用绑定”图标即可。

4. 获取代码

方式一：代码面板复制

保存模块数据后，点击右上角代码 -> 复制按钮，可以一个个文件复制。如果觉得一个个文件复制麻烦，或者对文件有加工的诉求，推荐使用方式二 imgcook-cli。

注意：代码中的该域名（ https://ai-sample.oss-cn-hangzhou.aliyuncs.com/ ）下的图片，只能在特定域名下使用，如果将此图片链接 copy 到本地, 发现图片无法打开是正常的，阿里内部用户建议登录 sketch 插件再导出，外部用户建议使用“导出”功能，可将图片引用变为相对地址。

点击“导出” 整个模块的源文件包，解压后如下：

方式二：imgcook-cli

此方式可以将整个模块代码文件下载到任意目录，并且可以二次加工模块代码（如：css的单位转化、上传图片到自己的图片空间、目录结构转化），直接使用 imgcook-cli 工具即可，如需自定义加工，请参考自定义插件。