一、背景

當前在傳統(tǒng)設(shè)計環(huán)節(jié)，設(shè)計師與研發(fā)之間存在大量的關(guān)于樣式等視覺層的理解偏差，從而會出現(xiàn)大量的重復(fù)且無效的細節(jié)像素調(diào)整工作，由于項目時間緊、細節(jié)多設(shè)計走查環(huán)節(jié)會給各方角色諸多額外負擔，在AI涌現(xiàn)后設(shè)計師嘗試使用AI_Code直接還原設(shè)計稿件，并且從傳統(tǒng)交付靜態(tài)界面設(shè)計圖片轉(zhuǎn)為交付可運行的實現(xiàn)方案，但在多數(shù)團隊的認知里，AI_Code仍停留在“氛圍編程”階段：能寫出代碼，但不符合框架規(guī)范，改動越多問題越多。通過不斷摸索總結(jié)出一套穩(wěn)定可用的 Design to Code (D2C) 解法：設(shè)計師借助 AI - IDE工具以及設(shè)計工具，通過MCP打通設(shè)計數(shù)據(jù)與研發(fā)數(shù)據(jù)，實現(xiàn)將設(shè)計稿直接轉(zhuǎn)譯為符合開發(fā)規(guī)范、可上線的前端代碼，極大縮短交付周期。

D2C核心效果：設(shè)計師第一次擁有了對實現(xiàn)效果的“直接控制權(quán)”工程師從繁瑣的像素級樣式修改中解放出來團隊整體迭代速度大幅提升

傳統(tǒng)鏈路VSD2C鏈路

二、效果展示

案例1：PC端_WMS6.0工藝配置

通過D2C流程從【組件生成】→【頁面生成】，完成PC端工藝流程配置功能代碼輸出，實現(xiàn)了卡片拖拽、卡片狀態(tài)自動變更、放置位置判斷等核心功能；實現(xiàn)項目完整交付在測試環(huán)境中可直接運行，研發(fā)無需對前端代碼進行修改，D2C代碼輸出總耗時0.5人/日，項目整體效率提升26%

WMS6.0_Vue2.0實現(xiàn)效果

案例2：移動端_PDA上架到容器

通過D2C流程鏈接設(shè)計數(shù)據(jù)與研發(fā)數(shù)據(jù)，【直接調(diào)用研發(fā)組件庫代碼】，按照代碼倉庫標準代碼輸出規(guī)范的前端頁面，實現(xiàn)多頁面跳轉(zhuǎn)，邏輯判斷，查詢等核心功能，達到像素級還原并符合團隊規(guī)范。D2C代碼輸出總耗時0.5人/日，項目整體效率提升50%

PDA_Flutter實現(xiàn)效果

三、設(shè)計思維轉(zhuǎn)變

D2C 并非“讓設(shè)計師寫代碼”，而是促使設(shè)計師提升工程化思維：使設(shè)計師從傳統(tǒng)的設(shè)計界面轉(zhuǎn)向當前的設(shè)計容器，從而更好的讓AI能夠讀懂設(shè)計數(shù)據(jù)實現(xiàn)D2C流程

傳統(tǒng)設(shè)計思維 ? 工程化思維

傳統(tǒng)設(shè)計思維：

步驟：1.設(shè)計全部視覺元素 ? 2.在頁面進行元素相對位置的排布 ? 3.完成設(shè)計內(nèi)容的產(chǎn)出

特點：元素之間僅包含相對關(guān)系沒有結(jié)構(gòu)層的動態(tài)屬性，與頁面實現(xiàn)的框架不一致

工程化思維：

步驟：1.設(shè)計組織分層關(guān)系 ? 2.設(shè)計分層容器布局規(guī)則 ? 3.設(shè)計容器所需設(shè)計元素 ? 4.完成設(shè)計內(nèi)容的產(chǎn)出

特點：先有組織容器再有容器內(nèi)容，組織容器具備布局規(guī)則等動態(tài)屬性，更符合頁面實現(xiàn)的框架。

四、實現(xiàn)路徑

D2C的核心方法：D2C的核心法則是在保證幻覺與Token限制的條件下，通過穩(wěn)定與可靠的方法，盡量多的將設(shè)計數(shù)據(jù)與研發(fā)數(shù)據(jù)進行鏈接，讓AI充分理解兩端數(shù)據(jù)并完成翻譯

優(yōu)劣勢對比

穩(wěn)定的D2C鏈接方法：

通過Figma MCP獲取全部設(shè)計數(shù)據(jù)，包括顏色、圓角、間距、圖層名稱、文本信息、圖片資源、代碼數(shù)據(jù)、頁面截圖；將設(shè)計數(shù)據(jù)傳遞給AI-IDE工具，通過rules和Prompt控制設(shè)計數(shù)據(jù)解析標準，規(guī)定AI按照解析結(jié)果與代碼數(shù)據(jù)對應(yīng)，實現(xiàn)代碼輸出優(yōu)勢：即有設(shè)計元屬性，又包含截圖以及基礎(chǔ)代碼信息，AI可以更好的關(guān)聯(lián)研發(fā)數(shù)據(jù)實現(xiàn)完美還原

并且針對不同頁面構(gòu)成，總結(jié)并執(zhí)行不同的D2C步驟，用于還原設(shè)計內(nèi)容，由于D2C的核心是鏈接，所以重點在于如何制造穩(wěn)定鏈接，我們可以通過Code Connect或者讓AI通過圖層命名檢索的方式實現(xiàn)穩(wěn)定鏈接

D2C設(shè)計流程圖

針對已有組件：

邏輯：通過調(diào)整設(shè)計組件名稱與變體與研發(fā)組件名稱和屬性建立映射鏈接

步驟：提供界面截圖 ? 工程師維護組件映射表 ? 設(shè)計師調(diào)整設(shè)計組件與研發(fā)組件結(jié)構(gòu)一致 ? 還原頁面內(nèi)容

重點：工程師維護的組件映射表需包含組件名稱及組件屬性，設(shè)計師需保持設(shè)計組件與研發(fā)組件的結(jié)構(gòu)相同

案例：PDADesign組件映射表?

針對無組件場景：

邏輯：按照設(shè)計組件的名稱與結(jié)構(gòu)按照研發(fā)代碼編寫規(guī)則輸出組件建立映射鏈接

步驟：設(shè)計師需采用工程化思維繪制組件 ? AI閱讀代碼倉庫組件書寫規(guī)范 ? 按照規(guī)范將設(shè)計組件輸出為研發(fā)組件 ? 通過MCP獲取設(shè)計組件并關(guān)聯(lián)已經(jīng)轉(zhuǎn)為代碼的研發(fā)組件

重點：與工程師對齊結(jié)構(gòu)規(guī)范，若倉庫中有Token數(shù)據(jù)再設(shè)計組件繪制時也需要保持一致

?

五、結(jié)語

D2C 是一次 團隊角色和流程的升級，更是一場認知的躍遷：設(shè)計師不再只是交付界面，而是交付“可運行的實現(xiàn)方案”AI 成為設(shè)計師和工程師之間的“實時翻譯器”最終實現(xiàn)：更快迭代、更少摩擦、更強共創(chuàng)。

在這條由 AI 驅(qū)動的設(shè)計到代碼之路上，設(shè)計師不再是單純的界面構(gòu)建者，而是系統(tǒng)規(guī)則的定義者、智能邏輯的編織者。他們與 AI 一起，共同塑造一個能“理解意圖、自動生成、持續(xù)學(xué)習(xí)”的設(shè)計生態(tài)。

當設(shè)計稿不再停留于視覺表達，而成為可以被機器直接理解的語言，設(shè)計師便跨越了傳統(tǒng)的邊界——從視覺思考者，走向了系統(tǒng)架構(gòu)的參與者；從界面呈現(xiàn)者，走向了智能生產(chǎn)力的創(chuàng)造者。

AI 不會取代設(shè)計師，但會放大他們的思考維度，讓人類的創(chuàng)造力從重復(fù)勞動中解放出來，去關(guān)注更本質(zhì)的價值：如何讓設(shè)計更智能、更高效、更具生命力。 在未來，D2C 不僅是“設(shè)計到代碼”的捷徑，更是“人機共創(chuàng)”的起點—— 讓每一位設(shè)計師，都能成為 AI 時代的工程合作者，讓設(shè)計真正成為推動產(chǎn)品智能演化的核心力量。

審核編輯 黃宇