一、背景

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

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

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

二、效果展示

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

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

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

案例2：移動(dòng)端_PDA上架到容器

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

PDA_Flutter實(shí)現(xiàn)效果

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

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

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

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

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

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

工程化思維：

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

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

四、實(shí)現(xiàn)路徑

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

優(yōu)劣勢(shì)對(duì)比

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

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

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

D2C設(shè)計(jì)流程圖

針對(duì)已有組件：

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

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

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

案例：PDADesign組件映射表?

針對(duì)無(wú)組件場(chǎng)景：

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

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

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

?

五、結(jié)語(yǔ)

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

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

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

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

審核編輯 黃宇