文：仈千、苏川

天蝎平台是由 CBU 技术部前端团队面向无线前台场景低代码搭建研发，集前端插件和应用工程配置、创建、开发、调试及发布的全链路一体化的低代码搭建平台。

天蝎平台接入了设计稿生成代码平台 imgcook 提供的 Sketch 插件、布局代码生成 API 能力，自动根据设计稿产出适用于业务组件的 UI 部分低代码 Schema 片段，用于平台后续开发和发布。?

目前累计生产日常和大促营销业务组件 1300+，研发提效 40%+。

使用情况

• CBU 天蝎平台使用设计稿生成代码接口调用次数：4935次（至2021.4.20）
• 时间：2020.06 -至今
• 使用对象：前端开发
• 此场景提效：40%+

使用场景

?

在天蝎平台-天枢站点，展示类营销卡片场景?动根据设计稿产出适用于业务组件的 UI 部分低代码 schema 片段， 再经过设计器的数据和逻辑绑定高效完成业务组件的在线开发。?

使用 imgcook D2C 生成代码的场景是偏展示型前台营销业务组件，后置链路用于搭建平台进行页面组装。

落地效果

目前累计生产日常和大促营销业务组件 1300+。?

技术方案

通过 imgcook skecth 导出 JSON 描述协议，再转化为低代码通用 schema 描述结构，交由低代码平台进行画布渲染，业务开发者通过转化好的设计器画布进行样式结构调整、数据源绑定、逻辑事件绑定等，最终进行多端转码组件注册，投放到各搭建平台进行使用。

研发步骤

第 1 步：新建组件

在天蝎平台的天枢站点下新建组件

第 2 步：使用 imgcook Sketch 插件解析导出数据

从 imgcook Sketch 插件 导出原始数据?

第 3 步：将导出数据粘贴到天蝎设计器

粘贴到 天蝎设计器 的 「Sketch 数据」 输入框面板?

第 4 步：生成组件代码发布

针对渲染好的模块进行 UI 微调，逻辑编排和事件绑定，完成后进行组件转码发布到搭建平台。

接入的 imgcook 能力

1、imgcook Sketch 插件能力

无成本，直接 imgcook首页 下载 imgcook sketch 插件使用即可。

2、imgcook 布局生成能力

天蝎是低代码可视化平台，借助 imgcook 提供的布局生成 API 能力将 Skecth 导出的数据转化为低代码规范 Schema 片段，然后设计器再进行深加工。?

接入团队

CBU 体验技术团队

• 前端：仈千、镇平、度城