如何使用 imgcook ?
imgcook 目前对外的体验版里,开放了针对 Sketch 设计稿和 PSD 设计稿的还原插件,以 Sketch 为例,整体的导出流程如下:
1. 插件导出模块
在使用 Sketch 插件进行还原的时候,可选中一个模块外层的容器节点(画板、Group 或者 Symbol)来进行导出。
2. 粘贴还原
模块导出完毕后,可前往 imgcook 平台进行粘贴还原。
3. 保存查阅代码
检查模块还原 UI 以及左侧的布局结构无误后,可进行保存->查阅代码,目前对外的体验版中 imgcook 提供了几种可选择的 DSL 进行代码生成,对于每个 DSL,可在右侧的 playground 里查看具体运行的效果。
什么场景下使用 imgcook ?
imgcook 的诞生源于业务,也最终服务于业务。
场景使用层面上,imgcook 倾向于以页面中的模块级别维度来进行使用;对于模块本身,imgcook 也会倾向于一些轻交互逻辑的模块来进行使用。
技术层面上,imgcook 对于支持 Flexbox 布局类型的 DSL 都会有一个比较好的支持。
面向未来
面向未来,imgcook 还在深耕更多的 UI 识别能力,诸如 Input/Table/Select 等前端基础控件识别、业界流行的 Antd/Fusion 等前端组件库识别,甚至可以为垂直业务定制独特的业务组件的识别能力,我们希望 imgcook 能真正给前端带来更多的提效能力。
建议反馈
imgcook 目前还处于体验版,会存在一些不确定性的还原 badcase 以及代码生成不合理的 badcase,请向我们反馈,我们会第一时间进行问题收集、跟进处理。
本文转载自淘系技术公众号。
原文链接:https://mp.weixin.qq.com/s/yTz6SCaDUTkSTiXlw3QKng
评论