DECO 是一款面向设计研发流程的 Design To Code 工具,名称由 Design 和 Code 合并而来,核心用途是从设计稿生成代码。它通过工程化处理设计稿中的布局、组件和页面语义,将设计内容转换为代码,并支持 Taro、React、Vue 等多种框架。与只关注页面视觉还原的转换方式相比,DECO 还处理 DOM 布局嵌套、弹性布局结构、组件类型、页面区块楼层以及循环列表等内容,输出更接近组件化和语义化开发的代码。
核心功能
从设计稿生成代码
DECO 的产品定位是 Design To Code,即从设计稿生成代码。设计稿经过分析后,可以转换为前端页面代码,减少从视觉稿到实现代码之间的手工转换工作。官网将这一能力概括为“全新的设计研发一体化体验”。
工程化布局与页面自适应
工具会通过工程化处理构建 DOM 布局嵌套和弹性布局结构。这样生成的页面代码以自适应为目标,官网将该能力描述为“高可用率”,并强调页面能够实现自适应。正文没有进一步说明具体支持的浏览器、设备尺寸或布局配置方式。
组件识别与组件化代码
DECO 采用人工智能手段对设计稿进行分析,定位设计稿中的组件位置并识别组件类型。识别后会自动进行替换,并输出组件化的代码。该能力覆盖从设计稿中的视觉元素定位,到组件类型判断和代码输出的过程,但官网没有列出具体可识别的组件清单。
智能语义分析
工具能够智能分析设计稿语义,合理划分设计稿中的区块楼层,并对循环列表进行标记。同时,它会生成语义化的 className,使输出代码中的页面区块和循环内容具备更明确的语义标识。官网没有提供 className 命名规则或可自定义配置的说明。
多样 DSL 与框架输出
DECO 支持生成 Taro、React、Vue 等框架代码,可以根据业务场景选择相应的代码形式。官网将这项能力描述为“多样 DSL”,并强调能够无缝对接业务场景。正文没有说明不同框架的具体输出差异,也没有列出更完整的框架或 DSL 类型。
使用方式
官网正文将 DECO 描述为从设计稿生成代码的工具,并明确说明输出支持 Taro、React、Vue 等框架代码。现有内容没有介绍客户端、浏览器插件、命令行或 API,也没有说明是否需要注册、是否需要自备模型 Key,以及设计稿的具体导入方式和生成代码的导出方式。
适用人群与场景
前端开发人员可以使用 DECO 将设计稿转换为 Taro、React 或 Vue 代码,并根据业务场景选择输出形式。需要处理页面布局的研发团队可以利用其 DOM 布局嵌套和弹性布局结构生成自适应页面。重视组件化开发的团队可以使用组件识别能力输出组件化代码;需要整理页面结构的开发者则可以使用智能语义分析、区块楼层划分和循环列表标记能力。对于设计与研发协作场景,DECO 的定位是把设计稿转换为代码,形成设计研发一体化流程。