跳到主要内容
项目详情

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 的定位是把设计稿转换为代码,形成设计研发一体化流程。

设计稿生成代码基于 Design To Code 的定位,将设计稿转换为前端代码。
自适应布局通过 DOM 布局嵌套和弹性布局结构实现页面自适应。
组件识别分析设计稿中的组件位置和类型,自动替换并输出组件化代码。
智能语义划分设计稿区块楼层、标记循环列表并生成语义化 className。
多框架输出支持生成 Taro、React、Vue 等框架代码。

用户评论 (0)

还没有用户评论

成为第一个分享使用体验的人

查看更多

DECO 截图

官网首页截图

写评论

分享你的使用体验,至少 10 个字。评论可以发多条,打分在右侧卡片单独进行。

还需 10 个字 · 0 / 500