D2C 是指 Design to Code，設(shè)計(jì)稿轉(zhuǎn)代碼，輸入是 sketch、figma、PSD 等設(shè)計(jì)稿，輸出是 vue、react、小程序等各平臺(tái)的前端代碼。

對(duì)前端工程師來說，如果能直接把設(shè)計(jì)稿轉(zhuǎn)成可用的代碼，是非常有意義的，那這樣一個(gè)工具是怎么實(shí)現(xiàn)的呢？

vue、react 等各平臺(tái)的前端代碼都可以通過一種樹形數(shù)據(jù)結(jié)構(gòu)來描述，比如 vdom。當(dāng)然這里不是用 vdom，而是需要設(shè)計(jì)一種中間數(shù)據(jù)結(jié)構(gòu)，叫做 DSL（領(lǐng)域特定語言），專門用于描述界面結(jié)構(gòu)的一種語言。

也就是說我們要把從設(shè)計(jì)稿中提取出的信息轉(zhuǎn)成中間的 DSL，然后再通過 DSL 打印成各種代碼。

那怎么從設(shè)計(jì)稿提取信息呢？

其實(shí) figma、sketch 等的設(shè)計(jì)稿都是矢量的，也就是由各種圖形組合而成，它們?cè)O(shè)計(jì)稿的存儲(chǔ)也是 json 格式的：

下面就是一個(gè) figma 設(shè)計(jì)稿的存儲(chǔ)結(jié)構(gòu)：

可以看到是一個(gè)節(jié)點(diǎn)的樹，通過 children 關(guān)聯(lián)子節(jié)點(diǎn)，每個(gè)節(jié)點(diǎn)有 type 和位置信息。

比如 TEXT 節(jié)點(diǎn)有 absoluteBoundingBox 的位置信息 x、y、width、height，有 fontSize、fontFamily 等文本樣式信息：

比如 RECTANGLE 節(jié)點(diǎn)有 fills 信息表示背景，如果是 image 類型的 fill 會(huì)有圖片的 hash 來關(guān)聯(lián)到圖片。

這些所有的節(jié)點(diǎn)都是可以對(duì)應(yīng)到 DOM 節(jié)點(diǎn)的，樣式也可以對(duì)應(yīng)到 CSS。

所以，只要把設(shè)計(jì)稿的樹形存儲(chǔ)結(jié)構(gòu)，轉(zhuǎn)為描述頁面的 DSL，然后打印成各平臺(tái)的代碼就可以了：

看起來好像挺簡單的？

這只是理想的情況下，實(shí)際上有很多問題沒處理。

比如布局，按照從設(shè)計(jì)稿提取的信息來布局，只能做成絕對(duì)布局，這樣的代碼是不好維護(hù)的，我們要轉(zhuǎn)成 flex 布局。

比如結(jié)構(gòu)，現(xiàn)在是直接把設(shè)計(jì)稿結(jié)構(gòu)轉(zhuǎn)換成了 DOM 結(jié)構(gòu)，實(shí)際上設(shè)計(jì)稿的層次結(jié)構(gòu)不一定合理，需要轉(zhuǎn)成適合網(wǎng)頁的結(jié)構(gòu)。

有了絕對(duì)的位置，轉(zhuǎn)換成 flex 布局可以使用投影法：

比如左邊這樣的布局，水平投影到右側(cè)，可以分成兩組，上面一組，下面一組，投影的間距可以設(shè)置為 margin-top、margin-bottom：

每一組分別豎直投影，可以算出每個(gè)元素的間距，分別設(shè)置為 margin-left、margin-right：

然后元素內(nèi)部也這樣做投影，分別設(shè)置 padding-left、padding-top 等。

這樣就可以把絕對(duì)定位的布局轉(zhuǎn)換為 flex + margin + padding 的布局，代碼可維護(hù)性會(huì)更高。

再就是分組，這個(gè)可以手工搞，提取完設(shè)計(jì)稿信息之后做一個(gè)編輯功能，可以自己調(diào)整分組：

但這要求使用者要了解前端需要什么樣的結(jié)構(gòu)，還是有一些要求的，能不能自動(dòng)調(diào)整分組呢？

這就需要 AI 算法的介入了，這里需要聚類算法。

此外，生成的前端代碼是要有 className 的，這個(gè) className 起的是否語義化也是可維護(hù)性的一個(gè)重要的方面。

這個(gè)問題也有兩種解決方式，一個(gè)是手工標(biāo)注，一個(gè)是 AI 算法生成。

手工標(biāo)注就是使用者在設(shè)計(jì)稿中添加一個(gè)名字的標(biāo)識(shí)，比如這樣：

再就是通過算法來識(shí)別不同類型的組件，加上語義化的名字了。

還有一個(gè)問題就是現(xiàn)在只能轉(zhuǎn)換成 text、image 這種基礎(chǔ)組件，很多時(shí)候我們是有組件庫的，比如可能會(huì)用 antd。

能不能直接把設(shè)計(jì)稿轉(zhuǎn)換成基于組件庫的代碼呢？

可以的，其實(shí)這就是個(gè)對(duì)應(yīng)關(guān)系的問題，如果我們能把不同的節(jié)點(diǎn)識(shí)別為不同的組件，從中提取不同的參數(shù)信息，之后不就可以生成對(duì)應(yīng)的組件代碼了么？

這種組件標(biāo)注同樣也有人工和 AI 自動(dòng)標(biāo)注兩種方式：

通過 AI 來識(shí)別出不同的組件，然后打上自動(dòng)打上標(biāo)記，或者通過編輯器來人工打標(biāo)記。

這個(gè)編輯器可以是通過 sketch 插件、figma 插件的形式在設(shè)計(jì)軟件里做，也可以是一個(gè)獨(dú)立的 web 平臺(tái)來做。

這個(gè)編輯器完全可以對(duì)接低代碼編輯器，也就是可以拖拽一些組件進(jìn)來，再生成 DSL，然后打印成代碼。

不過設(shè)計(jì)稿轉(zhuǎn)成的 DSL 不是全部由組件構(gòu)成，和低代碼的 DSL 還是有區(qū)別的。

這就是設(shè)計(jì)稿轉(zhuǎn)代碼的實(shí)現(xiàn)原理了，理想情況下，直接把設(shè)計(jì)稿結(jié)構(gòu)轉(zhuǎn)成 DSL 的結(jié)構(gòu)，生成 flex 布局和對(duì)應(yīng)的組件信息，然后打印成代碼就可以。

但很多情況下，設(shè)計(jì)稿多少存在一些問題，需要人工編輯或者 AI 自動(dòng)處理的方式來調(diào)整分組、className、標(biāo)注組件等，很難做的通用。

而且我們是直接從結(jié)構(gòu)化存儲(chǔ)的矢量設(shè)計(jì)稿開始處理的，如果是從圖片開始，那需要通過 AI 的方式先把其中的信息提取出來，再轉(zhuǎn)成 DSL，這樣多了一步用到 AI 的地方。

D2C 的原理還是挺清晰的，但是能夠做的多智能，上限取決于 AI 算法，當(dāng)然，下限可以通過做一個(gè)編輯器來人工干預(yù)來保證。

原理理清了，我們?cè)賮磉^一遍現(xiàn)有的各種 D2C 的產(chǎn)品：

Picasso

先看一下 58 的 picasso，他提供了一個(gè) sketch 設(shè)計(jì)稿轉(zhuǎn)代碼的 sketch 插件：

直接把設(shè)計(jì)稿信息轉(zhuǎn)成 DSL，然后打印成代碼了，沒有做編輯器，所以用起來比較簡單，

但是不能人工干預(yù)。

看下它的源碼分包，也是設(shè)計(jì)稿信息轉(zhuǎn)成 DSL，做分組和布局的處理，然后打印成代碼的流程：

它支持生成使用絕對(duì)布局的運(yùn)營版代碼，也可以生成使用 flex 布局的可維護(hù)性比較高的代碼。

我試了一下，還原度還可以：

設(shè)計(jì)稿是這樣：

Picasso 生成的 flex 布局的代碼是這樣：

結(jié)構(gòu)和樣式還原度還行。

再用 Picasso 生成運(yùn)營版代碼是這樣：

所有元素平鋪，布局使用絕對(duì)定位。

這樣的代碼還原度更可靠一些，但是代碼基本沒啥可維護(hù)性，做做活動(dòng)頁還可以。

總體看下來，Picasso 沒有使用 AI 算法，只是做了 sketch 設(shè)計(jì)稿數(shù)據(jù)到 DSL 的轉(zhuǎn)換，處理了下分組和布局轉(zhuǎn)換，同時(shí)支持絕對(duì)定位和 flex 布局，然后打印成各種代碼。

沒有支持編輯器、也沒有做 className 的處理，對(duì)組件標(biāo)注的支持也不好。

Deco

再來看下京東的 deco，它也是支持 sketch 設(shè)計(jì)稿轉(zhuǎn)各平臺(tái)代碼。

不過它提供了一個(gè) web 版的工作臺(tái)，可以選中畫板，點(diǎn)擊導(dǎo)出數(shù)據(jù)，之后瀏覽器會(huì)打開工作臺(tái)：

導(dǎo)出完成后會(huì)提示你到工作臺(tái)粘貼：

然后會(huì)在工作臺(tái)展示設(shè)計(jì)稿信息轉(zhuǎn)換之后的 DSL 和生成的頁面的預(yù)覽，可以修改 DSL 之后再生成代碼。

還原度也還行，生成的是 flex 布局的代碼。

當(dāng)然這只是它公開的部分，內(nèi)部版本據(jù)說支持了組件標(biāo)注、數(shù)據(jù)注入、事件綁定等邏輯層的東西，可以直接產(chǎn)出包含了包含了布局和邏輯的可用代碼。

整體看下來，Deco 做的比 Picasso 更完善，內(nèi)部版本實(shí)現(xiàn)了編輯器，支持 flex 布局計(jì)算，組件標(biāo)注、通過 AI 算法實(shí)現(xiàn)了通過聚類來自動(dòng)分組、通過推理引擎生成語義化的 className 等，編輯器甚至還支持了邏輯層的處理，可以生成完整的前端代碼。

CodeFun

Code Fun 是國內(nèi)專門做設(shè)計(jì)稿轉(zhuǎn)代碼的創(chuàng)業(yè)公司，因?yàn)槭峭ㄓ霉ぞ撸运鼈冎С值钠脚_(tái)更多， 提供了 Sketch、PSD、Figma 等的插件來上傳設(shè)計(jì)稿數(shù)據(jù)，支持生成的代碼也包含的更多，包括 vue、react、uni-app、taro、小程序等，不過現(xiàn)在只是移動(dòng)端，桌面端后續(xù)也會(huì)支持。

可以在 Figma 里上傳設(shè)計(jì)稿：

然后在編輯器里打開：

可以標(biāo)注組件、可以切換 flex 布局和絕對(duì)布局，可以手動(dòng)分組、編輯樣式，之后預(yù)覽或者下載代碼。

可以人工干預(yù)的地方比較多，當(dāng)然，他們也做了一些 AI 的智能處理。

整體看下來， code fun 支持的平臺(tái)更多，支持的人工干預(yù)手段更多，可以手動(dòng)編組、標(biāo)記組件、切換布局方式等，下限比較高。

Imgcook

Imgcook 是淘寶開源的設(shè)計(jì)稿轉(zhuǎn)代碼的工具，支持 figma、sketch、psd，甚至還支持圖片。

除了通過插件上傳數(shù)據(jù)外，也可以直接上傳設(shè)計(jì)稿文件。

通過插件上傳數(shù)據(jù)，還可以做一些分組和切圖的標(biāo)記：

然后在 web 的編輯器里打開，也可以直接導(dǎo)出代碼：

可以編輯樣式、屬性、綁定事件等，但是這還原度一言難盡：

總體來看，imgcook 支持的設(shè)計(jì)稿類型比較多，甚至支持從圖片來提取信息，也提供了編輯器功能可以做一些人工干預(yù)，功能還是比較全面的。

Locofy

Locofy 是國外的設(shè)計(jì)稿轉(zhuǎn)代碼的工具，支持 figma 設(shè)計(jì)稿轉(zhuǎn) react、react native、next.js、gatsby 等代代碼。

支持 next.js 和 gastby 這點(diǎn)就可以看出是國外的工具了。

它的編輯器是在 figma 插件里實(shí)現(xiàn)的，而不是獨(dú)立的 web 工作臺(tái)：

可以手動(dòng)標(biāo)注組件，然后設(shè)置屬性。

還有低代碼編輯器的功能，可以直接拖拽組件進(jìn)去：

手工標(biāo)注比較麻煩，locofy 也支持 AI 自動(dòng)標(biāo)注組件。生成的代碼也可以選擇使用不同的技術(shù)：

生成代碼之后會(huì)在 web 平臺(tái)預(yù)覽代碼，可能是因?yàn)檫@個(gè)在 figma 插件里做不大好吧：

之后可以導(dǎo)出代碼，或者一鍵部署。

總體看下來，locofy 對(duì)組件標(biāo)注的支持做的挺好的，也支持了低代碼的方式編輯，并且都是在 figma 里做的，這是和其他工具的一個(gè)很大的區(qū)別，其他工具都是在 figma 里上傳設(shè)計(jì)稿數(shù)據(jù)，然后在 web 的編輯器里處理，這樣能跨各種工具復(fù)用，而 locofy 可能就只想支持 figma 吧，所以在 figma 插件里做了很多功能。

知道了 D2C 的實(shí)現(xiàn)原理和已有的各種實(shí)現(xiàn)，那我們自己實(shí)現(xiàn)一個(gè)符合自己需求的 D2C 工具可行嗎？成本高么？

其實(shí)還是挺高的，做的足夠通用很難，但就算不需要特別通用，只支持某些業(yè)務(wù)場景，也大約需要一到兩個(gè)人一年的時(shí)間去全職搞這個(gè)。這對(duì)于小公司來說是很高的成本了，ROI 比較低。但是對(duì)中大規(guī)模的公司來說，能夠用在很多項(xiàng)目上，ROI 會(huì)相對(duì)較高，就值得投入人力長期去做了。

這也不是我個(gè)人的觀點(diǎn)，是轉(zhuǎn)轉(zhuǎn)的一篇文章里提到的：

總結(jié)

設(shè)計(jì)稿轉(zhuǎn)代碼的原理是從結(jié)構(gòu)化的矢量圖中提取信息，轉(zhuǎn)換成中間 DSL，然后再生成各平臺(tái)的代碼。

從設(shè)計(jì)稿轉(zhuǎn) DSL 的過程需要處理分組、做絕對(duì)布局到 flex 布局的轉(zhuǎn)換，生成語義化的 className，支持組件的標(biāo)注。

這個(gè)過程可以通過編輯器來實(shí)現(xiàn)人工干預(yù)，也可以通過 AI 來智能化處理。

下限是編輯器人工干預(yù)保證的，上限就要靠 AI 了。

然后我們看了一下各種 D2C 工具：

58 的 Picasso 沒有支持編輯器，組件標(biāo)注支持的也不好，但是支持生成絕對(duì)布局和 flex 布局的代碼，還原度也還行，并且是開源的

京東的 Deco 支持了編輯器，通過 AI 做了很多自動(dòng)化的處理，還支持了邏輯層的處理，但是目前公開的部分還比較簡單，也沒開源

淘寶的 imgcook 支持的設(shè)計(jì)稿類型比較多，還支持從圖片來提取信息，也支持了編輯器，在里面實(shí)現(xiàn)了低代碼的組件拖拽編輯，功能比較全面

專門做 D2C 工具的 CodeFun 做的比較通用，支持各種矢量設(shè)計(jì)稿（不支持圖片），也支持生成很多種代碼，編輯器功能也挺多，還原度不錯(cuò)，只不過是收費(fèi)的，沒開源

國外的 Locofy 只做 figma 轉(zhuǎn) react 系列技術(shù)棧，所以在 figma 插件里做了很多功能，比如組件標(biāo)注、低代碼編輯，之后在 web 預(yù)覽代碼，還可以一鍵部署

這些 D2C 工具其實(shí)都不夠通用，要支持自己的一些需求估計(jì)還得自研，但是自研一個(gè) D2C 的工具還是需要挺高的成本的，對(duì)于中大公司來說，如果業(yè)務(wù)場景比較合適，ROI 還行，還是值得長期去做的。