57、D2C 前端智能化

[CodingMeUp]

imgcook

D2C 核心流程只有 3 步，图层解析、布局分析、DSL 转换生成代码。

1. 图层解析，Design to JSON，提取 Sketch、Figma、PSD、图片等类型设计稿中的元素信息，转换为没有层级结构的、绝对定位的 JSON 描述，主要包括：
   ○ 节点类型，Div、Image、Text
   ○ 样式信息，opacity、color、background、fontSize、border 等

2. 布局分析，JSON to JSON，将没有层级结构的、绝对定位的 JSON 描述经过布局分析转换成有层级结构、相对定位的 JSON 描述，主要包括：
   ○ 父子节点包含关系，DOM层级结构
   ○ 兄弟节点间距，padding、margin 等
   ○ 布局样式，display、position 等

3. DSL 转换，JSON to Code，将具有符合代码结构和语义的 JSON 描述转换成前端代码，主要包括：
   ○ DSL 类型，React、Vue、Android、小程序等
   ○ CSS 类型，less、css、scss 等
   ○ 样式引入方式，内联样式、CSS 类名等
   ○ 样式单位，px、rem、vw、rpx