一、背景

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

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

傳統鏈路VSD2C鏈路

二、效果展示

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

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

WMS6.0_Vue2.0實現效果

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

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

PDA_Flutter實現效果

三、設計思維轉變

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

傳統設計思維 ? 工程化思維

傳統設計思維：

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

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

工程化思維：

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

特點：先有組織容器再有容器內容，組織容器具備布局規則等動態屬性，更符合頁面實現的框架。

四、實現路徑

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

優劣勢對比

穩定的D2C鏈接方法：

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

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

D2C設計流程圖

針對已有組件：

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

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

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

案例：PDADesign組件映射表?

針對無組件場景：

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

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

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

?

五、結語

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

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

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

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

審核編輯 黃宇