一、背景

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

D2C核心效果：設計師第一次擁有了對實現(xià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流程鏈接設計數據與研發(fā)數據，【直接調用研發(fā)組件庫代碼】，按照代碼倉庫標準代碼輸出規(guī)范的前端頁面，實現(xiàn)多頁面跳轉，邏輯判斷，查詢等核心功能，達到像素級還原并符合團隊規(guī)范。D2C代碼輸出總耗時0.5人/日，項目整體效率提升50%

PDA_Flutter實現(xiàn)效果

三、設計思維轉變

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

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

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

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

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

工程化思維：

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

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

四、實現(xiàn)路徑

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

優(yōu)劣勢對比

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

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

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

D2C設計流程圖

針對已有組件：

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

步驟：提供界面截圖 ? 工程師維護組件映射表 ? 設計師調整設計組件與研發(fā)組件結構一致 ? 還原頁面內容

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

案例：PDADesign組件映射表?

針對無組件場景：

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

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

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

?

五、結語

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

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

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

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

審核編輯 黃宇