imgcook

imgcook，作为一位以各类图像为灵感的星级大厨，其中文名为“图片大厨”，运用智能化手段将各种图像一键转化为可维护的 UI 视图代码，能够精准还原多样图像，极大地释放了 UI 开发的生产力，使您得以专注于更具挑战性的事务。如果您对图像处理有需求，便不妨立即下载体验吧！

安装说明

1. 下载并安装 PS 插件

请在网站首页下载 PS 版插件，下载文件中将包含与您操作系统相对应的插件安装程序及试用的 PSD 文件。安装程序的操作流程如下：

Mac 用户：双击 imgcook.photoshop_version.g 文件，按照提示步骤完成安装，安装完毕后可重启 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_USERSoftwareAdobe

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

右键新建字符串值

选中新建的字符串值，右键点击注册表，选择修改 - 数值名称：PlayerDebugMode，数值数据：1

CC 2015：HKEY_CURRENT_USERSoftwareAdobeCSXS.6

CC 2015.5：HKEY_CURRENT_USERSoftwareAdobeCSXS.7

CC 2017：HKEY_CURRENT_USERSoftwareAdobeCSXS.7

CC 2018：HKEY_CURRENT_USERSoftwareAdobeCSXS.8

完成上述步骤后，重启 PhotoShop，并再次打开 Window(窗口)->Extensions(扩展文件)-> imgcook，您将看到一个小终端界面。

软件特点

智能化

全链路采用计算机视觉与深度学习等智能化手段，逐步去除对设计稿的限制，智能生成高质量代码。

精度还原

一键智能还原，配以丰富的操作面板

imgcook官方版能够实时确保代码与视觉的高度一致。

DSL多样

支持自定义编写代码模板

兼容小程序、Re、H5、Weex Rax 等，外部暂不支持自定义代码模板。

高可维护性

合理的 DOM 嵌套、相对布局及文本自适应

ClassName 语义化，循环可自动识别

主要问题

淘宝 imgcook 主要解决的难题在于：在使用图像生成代码的过程中，我们不仅关注于 UI 的还原度，更关注生成代码的合理性与可维护性。

若生成的代码属于不可读且难以维护的快餐式代码，开发者在之后的二次开发中将面临巨大挑战，而这种挑战往往比初始开发更为艰巨，特别是在生产环境中使用时，这一问题更是无法避免。

因此，imgcook 的定位便是为了解决 UI 还原与生成可维护代码的问题。

在可维护性方面，imgcook 会对还原后的 UI 在代码层面生成当前广泛使用的 Flexbox 布局以及相对定位布局，并在一些自定义命名（如样式命名）上，imgcook 也会依据开发者的习惯生成更为人性化的命名。