UI 設(shè)計稿直接生成代碼，做過設(shè)計或前端的人，大概都聽說過。

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

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

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

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

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

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

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

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

從“畫完交付”到“生成代碼”

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

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

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

三是覆蓋主流技術(shù)棧與鴻蒙 ArkUI。對于多端項目，尤其是正在嘗試鴻蒙生態(tài)的團隊，這一點非?，F(xiàn)實。

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

特別聊聊“鴻蒙代碼”這個痛點

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

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

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

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

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

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