在當(dāng)今高速發(fā)展的互聯(lián)網(wǎng)時(shí)代，提高軟件開(kāi)發(fā)效率, 降低研發(fā)成本是互聯(lián)網(wǎng)企業(yè)日益關(guān)注的問(wèn)題。為了解決這一問(wèn)題，許多團(tuán)隊(duì)都開(kāi)始研發(fā)或使用智能化工具 Design2Code（簡(jiǎn)稱(chēng)D2C）。

在本文中，我會(huì)和大家分享當(dāng)下比較成熟的 D2C 工具以及核心算法方案設(shè)計(jì)和實(shí)現(xiàn)過(guò)程。無(wú)論你是技術(shù)人員還是非技術(shù)人員，本文都提供有一些價(jià)值的信息，相信通過(guò)閱讀本文，能幫助大家更好地了解D2C工具，并在實(shí)際工作中發(fā)揮價(jià)值。

設(shè)計(jì)稿轉(zhuǎn)代碼實(shí)現(xiàn)思路分析

要想實(shí)現(xiàn)設(shè)計(jì)稿轉(zhuǎn)代碼, 我們必須要實(shí)現(xiàn)一層轉(zhuǎn)化, 讓轉(zhuǎn)化后的中間產(chǎn)物能被解析器轉(zhuǎn)化為前端代碼, 具體流程如下:

1. 提取圖層信息：我們首先要獲取設(shè)計(jì)稿中的圖層信息，以便拿到所有圖層的位置(position)、大小(size)、形狀(shape) 和 顏色(color) 等信息。這些信息將為后續(xù)的頁(yè)面布局提供數(shù)據(jù)基礎(chǔ), 由于設(shè)計(jì)稿分為psd, sketch, figma, 今過(guò)筆者的實(shí)踐目前社區(qū)提供了 psd.js 和 sketch2json 兩款開(kāi)源工具可以將設(shè)計(jì)稿轉(zhuǎn)化為 json 格式的數(shù)據(jù).
2. 信息萃取：對(duì)圖層信息進(jìn)行預(yù)處理, 清洗, 篩選和過(guò)濾無(wú)用信息和圖層，對(duì)圖層進(jìn)行樣式合成, 對(duì)圖片資源進(jìn)行導(dǎo)出等操作, 以提高后續(xù)布局的準(zhǔn)確性和代碼質(zhì)量.
3. 構(gòu)建布局樹(shù)：利用萃取后的數(shù)據(jù)，進(jìn)行精確的頁(yè)面布局, 使頁(yè)面盡可能地還原設(shè)計(jì)稿。(為了提高精確度需要借助算法計(jì)算和語(yǔ)義推算)

根據(jù)我的研究和理解, 整理了一張實(shí)現(xiàn)流程圖,供大家參考:

接來(lái)下就和大家分享幾個(gè)非常有意思且免費(fèi)的 D2C 工具。

阿里imgcook, 設(shè)計(jì)稿智能生成代碼

imgcook 專(zhuān)注以 Sketch、PSD、靜態(tài)圖片等形式的視覺(jué)稿作為輸入，通過(guò)智能化技術(shù)一鍵生成可維護(hù)的前端代碼，包含視圖代碼、數(shù)據(jù)字段綁定、組件代碼、部分業(yè)務(wù)邏輯代碼等。

imgcook 的主要功能是視覺(jué)稿一鍵還原和基于還原后的可視化編輯，Sketch/Photoshop 設(shè)計(jì)稿的還原從安裝插件開(kāi)始，在設(shè)計(jì)稿中通過(guò)插件導(dǎo)出視覺(jué)稿的 JSON 描述信息粘貼到 imgcook 可視化編輯器，在編輯器中可以進(jìn)行視圖編輯、邏輯編輯等，生成代碼后可將代碼導(dǎo)出到本地或您的工程文件。主流程如下箭頭所示:

除了視覺(jué)稿還原服務(wù)，imgcook 還提供了如 imgcook-cli、imgcook VS Code 插件等工程效率工具，也支持用戶(hù)自定義 DSL、自定義 Plugin 等。另外還在全鏈路探索 AI 賦予 imgcook 的能力，如圖片生成代碼、文本語(yǔ)義理解等。感興趣的朋友可以使用體驗(yàn)一下。

京東 Deco, 設(shè)計(jì)稿一鍵生成多端代碼

Deco 利用人工智能，結(jié)合各類(lèi)自動(dòng)化、工程化等手段，將 Sketch、PS、圖片類(lèi)的設(shè)計(jì)稿轉(zhuǎn)換生成還原度高、可維護(hù)強(qiáng)的代碼，致力于突破業(yè)務(wù)生產(chǎn)力瓶頸，為前端大規(guī)模、高效率生產(chǎn)提供賦能。

Deco 對(duì)視覺(jué)稿沒(méi)有嚴(yán)格的約束，工具對(duì)絕大多數(shù)場(chǎng)景都做了規(guī)則化的適配處理，但仍有少數(shù)場(chǎng)景無(wú)法完全覆蓋:

• 對(duì)于設(shè)計(jì)師而言，遵循以下設(shè)計(jì)規(guī)范，可讓 D2C 的視覺(jué)還原效果更佳。
• 對(duì)于前端工程師而言，使用以下視覺(jué)稿調(diào)整建議，可讓智能生成的代碼結(jié)構(gòu)更合理。

Deco 推薦的設(shè)計(jì)規(guī)范實(shí)踐:

• 頁(yè)面模塊建議放在畫(huà)板（Artboard）中。
• 圖層需要按樓層模塊進(jìn)行分組，并且盡量保證圖層組結(jié)構(gòu)清晰。
• 對(duì)于大的頁(yè)面模塊，第一層級(jí)的子圖層建議使用編組（Group），以保證樓層模塊劃分清晰。

在設(shè)計(jì)前臺(tái)一體化的體系中 Deco 承接設(shè)計(jì)交付的物料，結(jié)合插件標(biāo)注及AI算法的處理，轉(zhuǎn)化為標(biāo)準(zhǔn)化的樓層代碼，實(shí)現(xiàn)開(kāi)發(fā)流程的大幅度提效，快速獲得樓層和頁(yè)面，促進(jìn)商業(yè)生產(chǎn)。

Deco 通過(guò)標(biāo)準(zhǔn)化的設(shè)計(jì)物料輸入及樓層頁(yè)面輸出，幫助沉淀設(shè)計(jì)規(guī)范和統(tǒng)一開(kāi)發(fā)標(biāo)準(zhǔn)，推進(jìn)流程的標(biāo)準(zhǔn)化建設(shè)，降低人力成本和流程損耗，進(jìn)一步提高生產(chǎn)質(zhì)量。

Picasso, Sketch設(shè)計(jì)稿智能解析工具

Picasso 是58同城推出的一款 sketch 設(shè)計(jì)稿智能解析工具，可將 sketch 設(shè)計(jì)稿自動(dòng)解析成還原精準(zhǔn)，可用度高的前端代碼；從而提高前端開(kāi)發(fā)效率，助力業(yè)務(wù)快速發(fā)展。

Picasso 是一款UI自動(dòng)生成代碼插件，提供UI自動(dòng)生成代碼全流程解決方案。 其特點(diǎn)如下:

• 精準(zhǔn)還原: Picasso充分解析sketch設(shè)計(jì)規(guī)則，合理布局并且利用sketch插件進(jìn)行圖片處理，達(dá)到了精準(zhǔn)還原的解析效果。
• 簡(jiǎn)單易用: 安裝sketch插件，即可解析生成H5、小程序、RN代碼，簡(jiǎn)單易用；并提供了普通和運(yùn)營(yíng)兩種模式。
• 代碼可維護(hù)性高: 經(jīng)過(guò)圖層重構(gòu)、特征分組、結(jié)構(gòu)二次組合等流程，Picasso解析生成的代碼整體布局合理、結(jié)構(gòu)清晰、可維護(hù)性好。

其核心設(shè)計(jì)原理如下:

其中解析規(guī)則的模式和原理如下:

在結(jié)構(gòu)和樣式解析完成之后，接下來(lái)就是布局處理，原理如下圖：

如果大家想學(xué)習(xí)具體的實(shí)現(xiàn)代碼, 可以參考:

github地址：https://github.com/wuba/Picasso

Semi D2C, 連接設(shè)計(jì)師與開(kāi)發(fā)者

Semi 提供的D2C能力有如下兩個(gè)特點(diǎn):

• 支持一鍵識(shí)別設(shè)計(jì)稿內(nèi) Semi 組件，快捷預(yù)覽，轉(zhuǎn)譯為 JSX 和 CSS 代碼。
• 一鍵識(shí)別 Figma 頁(yè)面中圖層布局，像素級(jí)還原設(shè)計(jì)稿，無(wú)需從 0 開(kāi)發(fā)。

同時(shí)它還提供了很多強(qiáng)大的功能, 比如標(biāo)記圖層, 標(biāo)記表格等能力, 方便我們更精準(zhǔn)的控制出碼能力。

標(biāo)記圖層:

標(biāo)記內(nèi)容:

轉(zhuǎn)化后的代碼, 這里我以 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 (
    <Avatar className={styles.TD}>
        H5-Dooring, 讓頁(yè)面制作更簡(jiǎn)單
    </Avatar>
  )
}

const dom = document.querySelector("#root");
ReactDOM.render(<div style={{width: 86, height: 32}}><Component /></div>, dom);

如果大家感興趣可以體驗(yàn)一下。

微軟 AI Lab

作為 Azure 認(rèn)知服務(wù)的一部分，自定義視覺(jué)和計(jì)算機(jī)視覺(jué) API 用于對(duì)象檢測(cè)、OCR（包括手寫(xiě)識(shí)別）。使用 Azure 云平臺(tái)，返回的對(duì)象有助于識(shí)別布局。布局被傳遞給 Sketch2Code MVC Web應(yīng)用程序以生成HTML。

同時(shí)微軟還提供了很多實(shí)驗(yàn)項(xiàng)目, 如下:

感興趣的朋友可以體驗(yàn)一下。

Locofy, 將您的設(shè)計(jì)轉(zhuǎn)化為生產(chǎn)可用的移動(dòng)端和web端應(yīng)用

Locofy 是新加坡的一家代碼轉(zhuǎn)換服務(wù)商，專(zhuān)注于創(chuàng)建一個(gè)低代碼平臺(tái)，包含多種框架和設(shè)計(jì)工具，能夠?qū)⒂脩?hù)的設(shè)計(jì)轉(zhuǎn)換為代碼運(yùn)行，從而減輕工程師的工作任務(wù)，致力于為用戶(hù)提供相關(guān)的代碼管理解決方案。

它允許我們將 Figma 設(shè)計(jì)文件上的靜態(tài)圖層轉(zhuǎn)換為交互式功能按鈕、輸入字段、視頻、iFrame 等。

我們還能使用它輕松的設(shè)計(jì)相應(yīng)式的web應(yīng)用:

同時(shí)對(duì)于 web 中常用的交互和設(shè)計(jì)元素, 它都有全面的定義, 我們能輕松產(chǎn)出非常靈活且附帶交互的 web 應(yīng)用代碼. 如果大家感興趣, 可以體驗(yàn)一下.

最后

UI自動(dòng)化和低代碼&無(wú)代碼已經(jīng)成為當(dāng)前行業(yè)研究的趨勢(shì)，各大公司都在進(jìn)行相關(guān)方向的研究，目前也有非常成熟的開(kāi)源或者商用解決方案比如宜搭, H5-Dooring等, 后期我會(huì)持續(xù)分享更多前端智能化和可視化相關(guān)的最佳實(shí)踐。