手把手教你 D2C,走向前端智能化(二)

阅读数:7 2019 年 12 月 23 日 17:56

手把手教你D2C,走向前端智能化(二)

如何使用 imgcook ?

imgcook 目前对外的体验版里,开放了针对 Sketch 设计稿和 PSD 设计稿的还原插件,以 Sketch 为例,整体的导出流程如下:

1. 插件导出模块

在使用 Sketch 插件进行还原的时候,可选中一个模块外层的容器节点(画板、Group 或者 Symbol)来进行导出。

手把手教你D2C,走向前端智能化(二)

2. 粘贴还原

模块导出完毕后,可前往 imgcook 平台进行粘贴还原。

手把手教你D2C,走向前端智能化(二)

3. 保存查阅代码

检查模块还原 UI 以及左侧的布局结构无误后,可进行保存 -> 查阅代码,目前对外的体验版中 imgcook 提供了几种可选择的 DSL 进行代码生成,对于每个 DSL,可在右侧的 playground 里查看具体运行的效果。

手把手教你D2C,走向前端智能化(二)

什么场景下使用 imgcook ?

imgcook 的诞生源于业务,也最终服务于业务。

  • 场景使用层面上,imgcook 倾向于以页面中的模块级别维度来进行使用;对于模块本身,imgcook 也会倾向于一些轻交互逻辑的模块来进行使用。
  • 技术层面上,imgcook 对于支持 Flexbox 布局类型的 DSL 都会有一个比较好的支持。
    手把手教你D2C,走向前端智能化(二)

面向未来

面向未来,imgcook 还在深耕更多的 UI 识别能力,诸如 Input/Table/Select 等前端基础控件识别、业界流行的 Antd/Fusion 等前端组件库识别,甚至可以为垂直业务定制独特的业务组件的识别能力,我们希望 imgcook 能真正给前端带来更多的提效能力。

建议反馈

imgcook 目前还处于体验版,会存在一些不确定性的还原 badcase 以及代码生成不合理的 badcase,请向我们反馈,我们会第一时间进行问题收集、跟进处理。

本文转载自淘系技术公众号。

原文链接: https://mp.weixin.qq.com/s/yTz6SCaDUTkSTiXlw3QKng

评论

发布