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

1. 打开注册表（运行 regedit）

1. 找到  HKEY_CURRENT_USER\Software\Adobe

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

1. 鼠标右键新建字符串值

1. 选中刚新建的字符串值注册表-鼠标右键-修改-数值名称：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 工具即可，如需自定义加工，请参考自定义插件。