imgcook是一款由设计稿一键智能生成代码的大厨,可以通过智能化手段把各种图像一键生成可维护的ui视图代码,帮助用户提高开发的效率,支持小程序、React、H5、WeexRax等。
软件特色
智能化
全链路采用计算机视觉、深度学习等智能化手段依次去除对设计稿的约束,智能生成代码。
精度还原
一键智能还原与丰富的操作面板
实时保证代码和视觉的高度还原
DSL多样
自定义编写代码模板
支持小程序、React、H5、WeexRax等,外部暂时不支持自定义代码模板。
高可维护性
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插件。
插件手动安装指定目录
MacOS:/Library/ApplicationSupport/Adobe/CEP/extensions/
Windowsx64:C:/ProgramFiles(x86)/CommonFiles/Adobe/CEP/extensions/
Windowsx32:C:/ProgramFiles/CommonFiles/Adobe/CEP/extensions/
2.签署问题
安装完imgcook插件后,打开PhotoShop可在Window(窗口)->Extensions(扩展文件)找到imgcook插件,首次呼起插件会提示插件未经正确授权错误,可通过以下操作解决。
Mac
打开Terminal终端,针对不同AdobePhotoShopCC版本可在终端执行以下命令:
CC2015:defaultswritecom.adobe.CSXS.6PlayerDebugMode1
CC2015.5:defaultswritecom.adobe.CSXS.7PlayerDebugMode1
CC2017:defaultswritecom.adobe.CSXS.7PlayerDebugMode1
CC2018:defaultswritecom.adobe.CSXS.8PlayerDebugMode1
Windows
打开注册表(运行regedit)
找到HKEY_CURRENT_USERSoftwareAdobe
针对不同CC版本找到对应的CSXS项,比如CSXS.7
鼠标右键新建字符串值
选中刚新建的字符串值注册表-鼠标右键-修改-数值名称:PlayerDebugMode数值数据:1
CC2015:HKEY_CURRENT_USERSoftwareAdobeCSXS.6
CC2015.5:HKEY_CURRENT_USERSoftwareAdobeCSXS.7
CC2017:HKEY_CURRENT_USERSoftwareAdobeCSXS.7
CC2018:HKEY_CURRENT_USERSoftwareAdobeCSXS.8
执行完上述流程后,重启PS重新打开Window(窗口)->Extensions(扩展文件)->imgcook可看到一个小终端界面。
使用方法
1.打开下载包里的imgcook试验田.psd文件,找到PS界面layers(图层)窗口(如果没有,可以通过勾选Window(窗口)->layers(图层))打开
2.选中一个模块最外层的图层节点,点击插件终端界面里的导出数据。
3.等待插件处理完毕显示导出成功后即可点击去粘贴前往imgcook平台进行粘贴。