在如今快速发展的互联网时代，提高软件开发效率、降低研发成本是互联网公司越来越关注的问题，为了解决这个问题，不少团队开始开发或使用智能工具（简称D2C）。

在本文中，我将与大家分享目前比较成熟的D2C工具以及核心算法方案的设计和实现过程。无论你是技术人员还是非技术人员，本文都提供了一些有价值的信息。相信通过阅读本文，你可以更好地了解D2C工具，并在实际工作中发挥它们的价值。

设计稿转换代码实现思路分析

为了将设计稿转化为代码，必须实现一层转换，使得转换后的中间产物能够被解析器转化为前端代码，具体流程如下：

提取图层信息：我们首先要获取设计稿中的图层信息，才能获取所有图层的位置（）、大小（size）、形状（shape）和颜色（color）。这些信息会为后续的页面布局提供数据基础。由于设计稿分为psd、、figma，笔者实践目前社区提供了psd.js和两个开源工具可以将设计稿转化为json格式的数据。

信息提取：对无用信息及图层进行预处理、清洗、筛选过滤，图层的样式化，图片资源的导出等，提高后续排版的准确性和代码质量。

构建布局树：利用提取的数据进行精准的页面布局，让页面尽可能还原设计稿。（为了提高准确率，需要借助算法计算和语义推理）

根据我的研究和理解，我整理了一个流程图供大家参考：

接下来我会跟大家分享一些非常有趣而且免费的D2C工具。

阿里巴巴sketch智能对象，设计稿智能代码生成

注重以PSD、静态图等形式的可视化稿作为输入，利用智能技术一键生成可维护的前端代码，包括视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。

主要功能是一键还原视觉稿，以及还原后对视觉稿进行编辑。设计稿的还原从安装插件开始，在设计稿中通过插件导出视觉稿的JSON描述信息，粘贴到可视化编辑器中，在编辑器中可以编辑视图、逻辑等。生成代码后，可以将代码导出到本地电脑或者您的项目文件中。主要流程如下箭头所示：

除了可视化草稿还原服务之外，还提供了-cli、VS Code插件等工程效率工具，还支持用户自定义DSL、定制化等，另外还在探索AI在全链路赋予的能力，比如图片生成代码、文本语义理解等，感兴趣的朋友可以去体验一下。

京东Deco，设计稿一键生成多端代码

Deco利用人工智能，结合各种自动化、工程化手段，将PS、图片等设计稿转化为高还原、可维护的代码，致力于突破商业生产力瓶颈，赋能前端规模化、高效生产。

Deco 对于视觉稿并没有严格的限制，工具已经针对大部分场景做了常规适配，但仍有少数场景无法完全覆盖：

Deco推荐的设计做法：

在一体化设计前端系统中，Deco接管设计师交付的素材，结合插件标注、AI算法处理，转化为标准化的楼层代码，从而大幅提升开发流程效率，快速获取楼层和页面，促进商业化生产。

Deco通过标准化的设计素材输入和底图输出，帮助巩固设计规范、统一开发标准，促进流程标准化，减少人工成本和工序损耗sketch智能对象，进一步提高生产品质。

、设计稿智能分析工具

它是58同城推出的一款智能设计稿分析工具，能够自动将设计稿分析为精准、高可用的前端代码，从而提高前端开发效率，促进业务快速发展。

它是一款UI自动代码生成插件，提供UI自动代码生成的全流程解决方案，其特点如下：

核心设计原则如下：

解析规则的模式和原理如下：

结构和样式解析完成后，接下来就是布局处理，原理如下：

如果想了解具体的实现代码，可以参考：

地址：

半D2C，连接设计师和开发者

Semi提供的D2C能力有以下两个特点：

同时还提供了很多强大的功能，比如标记图层，标记表格等等，方便我们更加精准的控制代码输出。

标记图层：

标记内容：

这里我以react为例分享一下转换后的代码：

import React from "react";
import ReactDOM from "react-dom";
import { Avatar } from "@douyinfe/semi-ui";
import { Header } from "h5-dooring";
import "./normalize.css";
import styles from "./index.module.scss";

const Component = () => {
  return (
    
        H5-Dooring, 让页面制作更简单
    
  )
}

const dom = document.querySelector("#root");
ReactDOM.render(
, dom);

如果你有兴趣的话可以尝试一下。

微软人工智能实验室

作为 Azure 认知服务的一部分，自定义视觉和计算机视觉 API 用于对象检测、OCR（包括手写识别）。使用 Azure 云平台，返回的对象有助于识别布局。布局被传递给 MVC Web 应用程序以生成 HTML。

同时微软还提供了很多实验项目，具体如下：

有兴趣的朋友可以尝试一下。

将您的设计转化为可投入生产的移动和 Web 应用程序

是新加坡一家代码转换服务商，专注于打造包含多种框架和设计工具的低代码平台，能够将用户的设计转换成代码来运行，从而减少工程师的工作量，并致力于为用户提供相关的代码管理解决方案。

它允许我们将 Figma 设计文件上的静态图层转换为交互式功能按钮、输入字段、视频等。

我们还可以使用它轻松设计响应式Web应用程序：

同时它对于Web中常用的交互和设计元素有着全面的定义，我们可以轻松制作出非常灵活、交互性很强的Web应用代码，如果有兴趣可以尝试一下。

终于

UI自动化、低代码&无代码已经成为了目前业界的研究趋势，各大公司都在进行相关方向的研究，也有非常成熟的开源或商业解决方案如易搭、H5-等。未来我会继续分享更多前端智能化、可视化相关的最佳实践，欢迎大家交流讨论。

以上就是本次分享的全部内容，希望对大家有帮助^_^

如有侵权请联系删除！