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

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

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

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

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

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

接來下就和大家分享幾個非常有意思且免費的 D2C 工具。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Picasso 是一款UI自動生成代碼插件，提供UI自動生成代碼全流程解決方案。 其特點如下:

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

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

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

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

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

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

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

Semi 提供的D2C能力有如下兩個特點:

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

同時它還提供了很多強大的功能, 比如標(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, 讓頁面制作更簡單
    </Avatar>
  )
}

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

如果大家感興趣可以體驗一下。

微軟 AI Lab

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

同時微軟還提供了很多實驗項目, 如下:

感興趣的朋友可以體驗一下。

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

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

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

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

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

最后

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