- 软件介绍
- 软件截图
imgcook是一款由设计稿一键智能生成代码的大厨,可以通过智能化手段把各种图像一键生成可维护的ui视图代码,帮助用户提高开发的效率,支持小程序、React、H5、Weex Rax等。
软件特色
智能化
全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束,智能生成代码。
精度还原
一键智能还原与丰富的操作面板
实时保证代码和视觉的高度还原
DSL多样
自定义编写代码模板
支持小程序、React、H5、Weex Rax 等,外部暂时不支持自定义代码模板。
高可维护性
DOM 嵌套合理、相对定位布局、文本自适应
ClassName语义化、循环可自动识别
安装方法
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 可看到一个小终端界面。
使用方法
1.打开下载包里的 imgcook试验田.psd 文件,找到 PS 界面 layers(图层) 窗口(如果没有,可以通过勾选 Window(窗口) - layers(图层))打开
2.选中一个模块最外层的图层节点,点击插件终端界面里的 导出数据。
3.等待插件处理完毕显示导出成功后即可点击 去粘贴 前往 imgcook 平台进行粘贴。
imgcook软件特色
智能化
全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束,智能生成代码。
精度还原
一键智能还原与丰富的操作面板
实时保证代码和视觉的高度还原
DSL多样
自定义编写代码模板
支持小程序、React、H5、Weex Rax 等,外部暂时不支持自定义代码模板。
高可维护性
DOM 嵌套合理、相对定位布局、文本自适应
ClassName语义化、循环可自动识别
imgcook安装方法
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 可看到一个小终端界面。
imgcook使用方法
1.打开下载包里的 imgcook试验田.psd 文件,找到 PS 界面 layers(图层) 窗口(如果没有,可以通过勾选 Window(窗口) -> layers(图层))打开
2.选中一个模块最外层的图层节点,点击插件终端界面里的 导出数据。
3.等待插件处理完毕显示导出成功后即可点击 去粘贴 前往 imgcook 平台进行粘贴。