UI 設(shè)計(jì)稿生成代碼：墨刀 D2C 帶來(lái)的產(chǎn)研協(xié)作變化

UI 設(shè)計(jì)稿直接生成代碼，做過(guò)設(shè)計(jì)或前端的人，大概都聽(tīng)說(shuō)過(guò)。

早在幾年前，設(shè)計(jì)工具就已經(jīng)能導(dǎo)出樣式參數(shù)、標(biāo)注間距，甚至直接給到一段 CSS 代碼。但在實(shí)際開(kāi)發(fā)中，這些導(dǎo)出的參數(shù)更多是當(dāng)作開(kāi)發(fā)的輔助參考。畢竟，設(shè)計(jì)稿依然是靜態(tài)圖，邏輯代碼依然要開(kāi)發(fā)一個(gè)字符一個(gè)字符地敲，這兩者之間的鴻溝，過(guò)去并沒(méi)有真正填平。

真正的變化，其實(shí)是最近兩年才開(kāi)始集中顯現(xiàn)的。產(chǎn)品迭代周期持續(xù)壓縮，需求變更為常態(tài)；再加上新平臺(tái)、新框架層出不窮，尤其是鴻蒙 HarmonyOS 這類(lèi)新生態(tài)的崛起，讓UI還原的成本被進(jìn)一步放大。行業(yè)里關(guān)于 D2C（Design to Code設(shè)計(jì)稿轉(zhuǎn)代碼） 的討論熱度回升，其實(shí)是因?yàn)閭鹘y(tǒng)產(chǎn)研協(xié)作模式已難以應(yīng)對(duì)當(dāng)前的效率挑戰(zhàn)。

最近看到國(guó)內(nèi)智能原型設(shè)計(jì)與產(chǎn)研協(xié)作平臺(tái)——墨刀推出了 D2C 功能，號(hào)稱(chēng)能把設(shè)計(jì)稿直接生成可運(yùn)行前端代碼。團(tuán)隊(duì)試著去拆解了一下，發(fā)現(xiàn)這不再是以前那種“效率幻想”，而是被反復(fù)拉到桌面上討論的現(xiàn)實(shí)解決方案。

UI 設(shè)計(jì)稿生成代碼的演進(jìn)之路

從行業(yè)演進(jìn)的角度看，UI轉(zhuǎn)代碼這件事，其實(shí)是在不斷“進(jìn)化”的。在不同階段，它解決的問(wèn)題并不一樣：

最早是參數(shù)化階段，解決的是“看不清”的問(wèn)題。設(shè)計(jì)工具解決的是“量化設(shè)計(jì)”：字號(hào)、顏色、圓角、間距都可以被精確讀取，開(kāi)發(fā)不再靠目測(cè)，但還得手寫(xiě)。

后來(lái)到了樣式生成階段，開(kāi)始有工具嘗試直接導(dǎo)出 CSS 甚至簡(jiǎn)單的 DOM 結(jié)構(gòu)。但也僅此而已了，生成的代碼結(jié)構(gòu)混亂、缺乏語(yǔ)義化，可讀性與復(fù)用率低，導(dǎo)致“一次生成，長(zhǎng)期維護(hù)成本高昂”，離真實(shí)工程還有不小的距離。

而現(xiàn)在，行業(yè)正在進(jìn)入結(jié)構(gòu)級(jí)生成階段。這也是墨刀 D2C 這類(lèi)工具在做的事：它不只是盯著像素看，而是試圖去“理解”設(shè)計(jì)稿。它能自動(dòng)拆解頁(yè)面結(jié)構(gòu)、識(shí)別組件層級(jí)、理清布局關(guān)系，最終生成可運(yùn)行、可維護(hù)的工程級(jí)代碼。本質(zhì)上，它改變的是設(shè)計(jì)稿在整個(gè)流程里的“角色”。

從“畫(huà)完交付”到“生成代碼”

和早期那些暴力導(dǎo)出代碼的方案不同，墨刀 D2C 的切入點(diǎn)并不是幫開(kāi)發(fā)少寫(xiě)幾行樣式，而是試圖理解設(shè)計(jì)稿本身的結(jié)構(gòu)含義。在實(shí)際使用中，它做了幾件比較關(guān)鍵的事情：

一是自動(dòng)拆解設(shè)計(jì)稿結(jié)構(gòu)。頁(yè)面不再被當(dāng)作一張扁平的圖片，而是被識(shí)別為布局、容器、組件的有機(jī)組合。這一步至關(guān)重要，因?yàn)樗苯記Q定了生成的代碼是亂碼還是人能看懂的邏輯。

二是直接生成可運(yùn)行代碼。不是零散的代碼片段，而是可以在工程中運(yùn)行、預(yù)覽的完整結(jié)構(gòu)。

三是覆蓋主流技術(shù)棧與鴻蒙 ArkUI。對(duì)于多端項(xiàng)目，尤其是正在嘗試?guó)櫭缮鷳B(tài)的團(tuán)隊(duì)，這一點(diǎn)非常現(xiàn)實(shí)。

這類(lèi)能力的價(jià)值，是把設(shè)計(jì)與開(kāi)發(fā)之間最容易反復(fù)溝通、反復(fù)返工的那段“扯皮時(shí)間”，提前對(duì)齊了。

特別聊聊“鴻蒙代碼”這個(gè)痛點(diǎn)

如果說(shuō) Web 或 App 開(kāi)發(fā)中，UI 還原只是個(gè)“老慢難”的問(wèn)題，那在鴻蒙 ArkUI 場(chǎng)景下，這個(gè)問(wèn)題會(huì)被放大。很多開(kāi)發(fā)者的直觀感受是：ArkUI 的布局方式和傳統(tǒng)前端差異不小，組件結(jié)構(gòu)、狀態(tài)管理、樣式寫(xiě)法都有新的學(xué)習(xí)成本。設(shè)計(jì)稿稍微復(fù)雜一點(diǎn)，還原成本就會(huì)蹭蹭往上漲。設(shè)計(jì)師不懂ArkUI的組件限制，開(kāi)發(fā)又不理解設(shè)計(jì)的視覺(jué)意圖，兩邊很容易僵住。

墨刀 D2C 在這里，實(shí)際上充當(dāng)了一個(gè)“翻譯官”的角色。它把設(shè)計(jì)稿中的布局關(guān)系，準(zhǔn)確映射成了 ArkUI 的標(biāo)準(zhǔn)結(jié)構(gòu)。設(shè)計(jì)師畫(huà)好符合鴻蒙規(guī)范的界面，系統(tǒng)就能生成符合 ArkTS 語(yǔ)法的代碼。這個(gè)過(guò)程，直接讓設(shè)計(jì)稿成了“可以直接運(yùn)行”的中間成果。

對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，不需要再去糾結(jié) ArkUI 里的容器嵌套該怎么寫(xiě)，直接拿著生成的代碼微調(diào)邏輯就行。在目前鴻蒙生態(tài)急需快速鋪量的背景下，這種降低門(mén)檻的“翻譯”能力，切入點(diǎn)確實(shí)很精準(zhǔn)。

設(shè)計(jì)與開(kāi)發(fā)的協(xié)作正在改變

回過(guò)頭看，從最早的手寫(xiě)標(biāo)注，到現(xiàn)在的 UI 設(shè)計(jì)稿生成可運(yùn)行代碼，工具進(jìn)化的本質(zhì)，是讓設(shè)計(jì)和開(kāi)發(fā)的語(yǔ)言開(kāi)始互通。你會(huì)發(fā)現(xiàn)，D2C 帶來(lái)的最大改變，其實(shí)是設(shè)計(jì)交付物形態(tài)的演變。未來(lái)的產(chǎn)研交付，設(shè)計(jì)師給出去的可能不再是一堆靜態(tài)的 PNG，而是一份某種程度上的可運(yùn)行代碼。

放在整個(gè)協(xié)作流程里看，墨刀 D2C 這次的動(dòng)作，更像是在提前適配下一階段的交付方式。至少在一些真實(shí)項(xiàng)目里，這條從設(shè)計(jì)到代碼的自動(dòng)化鏈路，已經(jīng)開(kāi)始站得住腳了。