聞樂 發自 凹非寺
量子位 | 公眾號 QbitAI

TRAE Work上新了一個Design模式，專門搞設計的。

之前TRAE Work已經有Work模式聊需求、Code模式寫代碼，現在補上了Design——

需求→設計→代碼，全鏈路在一個平臺里跑通了。

這次的設計模式也不只是「AI幫你畫張圖」那么簡單，咱先稍微捋一下它能干的事兒：

你手頭有Figma文件的話，丟進去，它能直接幫你把設計系統扒出來，品牌色、字體、組件這些全都能識別提取；

生成設計稿之后，想要改哪里，鼠標框選就能直接操作；

方案調整到位之后，還能一鍵導到Figma精修，或者直接跳到Code模式寫代碼落地。

而且最舒服的是，前面Work模式聊的需求它全都能復用，切到Design模式直接干活（拿來吧你.jpg）。

好好好，咱直接實測走起，看看到底能不能打！！

AI設計終于懂品牌了

在上手之前先吐個槽啊。

這一年多AI設計工具出了不少，v0、Bolt、Galileo一圈輪下來，感受都差不多：出圖是真好看，用起來是真頭疼——

AI壓根不認識你的設計系統。

你讓它出個官網首頁，它自己挑配色、自己選字號、自己決定按鈕長啥樣，效果出來倒是挺精美的，但把自己的品牌規范拿出來一看，哪哪都不對……好圖根本沒法直接用。

這也就導致目前大部分AI設計工具，頂多只能出份初稿Demo用來演示溝通，很難深度落地到正式的專業設計流程中。

改圖就更折磨了，早期大多數工具只能通過重繪整張圖迭代效果，如今雖然普遍上線選區編輯功能，但精準度還是很難把控，設計師們和AI的溝通成本仍然居高不下（doge）。

所以我對TRAE Work Design模式最好奇的就倆事：出圖能不能合規？改圖能不能精準？

那就先來試試我最期待的Design Library，支持解析Figma、導入設計規范、風格探索三種添加方式。

我先把一份準備好的Figma文件丟了進去。

TRAE Work嚼了三十來分鐘之后，把里面的主題色板、字體層級、按鈕卡片輸入框這些組件樣式全扒了出來，自動生成了一套Design Library。

視頻地址：https://mp.weixin.qq.com/s/HzyktaWgXkDaURHg1fJjew

雖然感覺這個分析創建過程有一丟丟慢，但由于給的文件是Google官方的Material Design Android UI Kit，超級復雜的那種，而且識別效果確實還不錯，算是慢工出細活吧～

然后我試了一個比較細的玩法，Library里每個組件旁邊都有個「添加到對話」按鈕，可以把某個具體組件丟進對話當參考。

我把Kit里的Guide組件扔了進去：

用這個風格作為頁面頭部，幫我設計一個音樂App首頁，下面放今日推薦歌單橫滑卡片、最近播放列表、底部Tab導航欄。

設計稿出來之后我只想說，這是真“規矩”。

手頭沒有Figma文件的小白同學也不用急，Design模式有個自由探索功能，內置了幾套品牌設計系統。

或者你可以跟TRAE Work聊聊你想要什么感覺，它會追問幾個細節幫你定方向，然后從零生成一套設計系統，后面出的圖就會全部自動統一風格。

有系統的導入，沒系統的幫你建，AI出圖終于不是開盲盒了！！

初稿有了，接下來就是改圖

Design模式給了三種編輯方式，可以對話調整、框選編輯、面板直接調數值

對話比較適合改大方向，比如：

把背景換成淺藍色、把今日推薦的卡片尺寸放大，改成兩列大圖布局。

鼠標圈改微調就跟飛書文檔留評論差不多，懸停到某個元素上，圈出來，在對話框里寫修改意見。

這次我圈選了一行文字，讓TRAE幫我在文字外加一個橢圓形邊框，字體顏色改為深綠色。

甚至你還能修改一整塊區域，比如咱把剛才調成兩列的「今日推薦」模塊再改成一行。

面板操作就是微微微調了，要什么參數直接滑就行。

這Design用著是真絲滑～

一個平臺跑通需求→設計→代碼

出圖合規了、改圖順手了，咱接下來要考慮的就是它能不能簡化工作流

以前做設計，可能要有需求在文檔里寫、設計在Figma里搞、代碼在IDE里敲，三項工作三個工具。

而且就算單個環節已經有AI幫忙，但每切一次工具就免不了有丟上下文的風險。

于是TRAE Work：既然切工具會丟上下文，那就別切了——

Work、Design、Code三種模式在同一個平臺里把全流程包攬了。

首先，我在Work模式里說我要做個咖啡品牌官網。

在TRAE的引導下我補充了一些信息，它最后交付了一份PRD需求文檔和一份UI設計規范。

這部分是Work模式的常規操作，咱就不多展開了～

然后切到Design模式

重點來了，切過去之后我啥都沒重復，直接把剛才的文檔甩過去，說了句「幫我設計官網首頁」。

出來的頁面還挺對路，hero區用了大面積留白和山脈意象、「從山到杯」的品牌理念出現在了首屏文案里、產品展示區分了咖啡豆和掛耳包兩個品類，門店信息模塊也有了。

頁面導航設置也非常清晰。

整體調性確實是簡約那個味道，效果be like：

視頻地址：https://mp.weixin.qq.com/s/HzyktaWgXkDaURHg1fJjew

我又拿前面試過的三種方式快速調了幾處，兩三分鐘搞定。

最后就跳到了Code模式，一鍵導過去實現代碼落地。

視頻地址：https://mp.weixin.qq.com/s/HzyktaWgXkDaURHg1fJjew

Work聊需求→Design出稿→Code導代碼，全程沒切平臺，跑下來大概在一小時以內。

而以前這套流程，產品經理、設計師、前端來來回回拉扯三天都算快的。

好吧，效率差距確實有點大……

搞簡約已經有一套了，接著我又讓TRAE自由發揮了一把，需求是：

618大促H5，要有沖擊力，頂部大圖輪播、限時倒計時、商品瀑布流、底部浮動購買按鈕，配色熱鬧搶眼。

幾分鐘下來功能模塊全到位了，輪播、倒計時、瀑布流、浮動按鈕，布局合理，組件邏輯也對，拿來當初稿迭代綽綽有余。

但視覺沖擊力差點意思，大促那種熱鬧搶眼的氛圍感，AI處理得偏保守，視覺炸裂感暫時還差點火候（doge）。

也正常，視覺氛圍這種東西太吃創意經驗了，純靠AI拉滿確實有難度，咱有經驗的設計師以后可以用TRAE打底然后手動加料～

AI設計工具開始擁抱工作流

其實過去一年AI設計賽道卷得挺熱鬧，v0、Bolt、Galileo你方唱罷我登場，對話出圖已經是標配了。

Demo效果確實驚艷，但拉到真實生產里，大家都有同一批硬傷：不認設計系統、工具孤島化、編輯能力弱。

說實話，當AI出圖能力越來越強之后，瓶頸已經不在「誰生成得更快更好看」了，真正卡住用戶的是怎么讓輸出合規可用、怎么精確修改、怎么跟前后環節無縫銜接。

TRAE Work Design這時候把設計系統理解工作流整合同時擺上了臺面，Work/Design/Code三模式管上下文貫通，讓設計這一環在整條鏈路里的切換成本趨近于零。

當然了，不止TRAE Work在往這個方向走，Lovable、v0也在試著打通設計到代碼的鏈路，只是切入點各有不同。

所以，可以看到一個越來越清晰的趨勢是：當生成能力不再是瓶頸，工具之間的“縫隙”才是最大的效率黑洞。

誰先把這個縫兒縫上，誰就能在下一階段拿到優勢。

就目前體驗來看，TRAE Work這套一體化全鏈路的解決方案，也確實會改變從業者的工作模式：

設計師的重心從排版出圖往創意決策上移、設計團隊的資產通過Library變得可復用可遷移……

甚至個人設計師的開發門檻也在一步步降低。

至于最大的受害者是誰？或許是Alt+Tab鍵吧——

畢竟以前要來回切N趟界面，現在出場機會都變少了（doge）。

體驗地址：https://work.trae.cn/