嗨大家好！我是阿真！

TRAE Work 剛上線了 Design 模式，群友就火速召喚我去體驗(yàn)了，我已測(cè)試了大部分功能，先來(lái)向大家匯報(bào)了。

之前朋友問(wèn) TRAE 的各個(gè)分支，這里放一張圖幫助大家理解

今天要分享的 TRAE Work Design 模式，上手操作簡(jiǎn)單，修改也容易，可以使用自己的設(shè)計(jì)系統(tǒng)，效果不說(shuō)一步到位，至少給到一個(gè)完整且邏輯清晰的 Demo 不成問(wèn)題。直接生成圖片配圖也方便。

用 AI 做項(xiàng)目，經(jīng)常會(huì)遇到一些卡點(diǎn)。比如需求在一個(gè)工具里，視覺稿在另一個(gè)工具里，原型又在第三個(gè)工具里，到代碼又要回到開發(fā)環(huán)境。換一次工具，要重新解釋背景、重新對(duì)齊風(fēng)格，最后還要靠人去把需求、設(shè)計(jì)和開發(fā)重新進(jìn)行串聯(lián)。

TRAE Work Design 模式的目標(biāo)，是把這條鏈路盡量放回同一個(gè)平臺(tái)里。在 TRAE Work 里從 Work 切到 Design，再切到 Code，鏈路清晰。

也就是說(shuō)，我們可以先在 Work 梳理需求，再到 Design 溝通和修改設(shè)計(jì)稿，最后讓 Code 代碼實(shí)現(xiàn)。整個(gè)過(guò)程都可以用非常簡(jiǎn)單直觀的語(yǔ)言，和它去溝通修改。

我嘗試讓它制作了一套蛋糕店的官方網(wǎng)頁(yè)和 APP 原型，感興趣的話，我們一起來(lái)看看。

一句話成稿

我們打開 TRAE Work 后，頂部最明顯的是三個(gè)模式入口：Work、Code、Design。這里可以把它理解成一條連續(xù)生產(chǎn)線：Work 負(fù)責(zé)需求和任務(wù)上下文，Design 負(fù)責(zé)把需求變成設(shè)計(jì)稿和原型，Code 負(fù)責(zé)繼續(xù)落到代碼實(shí)現(xiàn)。

Design 模式上線后，TRAE Work 的專業(yè)場(chǎng)景進(jìn)一步擴(kuò)大，把需求分析、設(shè)計(jì)稿、原型和代碼也都放進(jìn)了同一套上下文里。我們不用學(xué)多套不同的復(fù)雜工具，就能先把想法推進(jìn)到一個(gè)可討論的頁(yè)面。

左側(cè)欄里有幾個(gè)常用入口：【新建任務(wù)】用于從需求開始生成設(shè)計(jì)；【技能】可以用于調(diào)用已有能力，Buff 疊加；【設(shè)計(jì)系統(tǒng)】用于管理設(shè)計(jì)規(guī)范。

主頁(yè)下方有三個(gè)預(yù)設(shè)，它會(huì)給出參考示例，可以做設(shè)計(jì)還原，可以從概念直接生成視覺稿，也可以基于設(shè)計(jì)規(guī)范輸出頁(yè)面。對(duì)經(jīng)常需要快速驗(yàn)證想法的人來(lái)說(shuō)，這一步很重要，因?yàn)樗梢钥焖侔选拔夷X子里的想法大概是這樣”變成了“我們先看這一版”。

設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)會(huì)決定 AI 后面生成設(shè)計(jì)時(shí)參考的規(guī)范。如果不參考的話，直接【自由探索】也可以。

點(diǎn)擊任意內(nèi)置的設(shè)計(jì)系統(tǒng)，可以查看到主題、組件、圖形和設(shè)計(jì)規(guī)范的詳情。也可以通過(guò)右上角【添加設(shè)計(jì)系統(tǒng)】來(lái)自定義自己和企業(yè)的設(shè)計(jì)系統(tǒng)。

設(shè)計(jì)系統(tǒng)的添加方式有多種。直接解析 Figma 文件、導(dǎo)入已有的 TRAE Work Design 設(shè)計(jì)系統(tǒng)文件，或者通過(guò)描述視覺風(fēng)格創(chuàng)建設(shè)計(jì)系統(tǒng)都可以。

或者做完一套視覺稿以后，直接讓它把這套視覺，生成設(shè)計(jì)系統(tǒng)。

已有相關(guān)的視覺規(guī)范 Skill 也可以這樣存，下次調(diào)用方便。

指定設(shè)計(jì)系統(tǒng)后，TRAE Work Design 會(huì)遵循固定規(guī)則生成，不再每次換風(fēng)格、憑感覺信馬由韁。

對(duì)團(tuán)隊(duì)來(lái)說(shuō)，這一步很關(guān)鍵。AI 生成設(shè)計(jì)很多工具都可以做，但生成之后還要能保持品牌一致、組件一致、規(guī)范一致，能做到這點(diǎn)的目前就很少了。設(shè)計(jì)系統(tǒng)的意義，就是把團(tuán)隊(duì)已經(jīng)沉淀過(guò)的審美和規(guī)則，變成 AI 可以調(diào)用的生產(chǎn)資料，即使人事變動(dòng)，審美和規(guī)則也不會(huì)被個(gè)人帶偏。

實(shí)時(shí)預(yù)覽，畫布即原型

比如，我想要為自己的 Skill 做一個(gè)快捷面板用于快速搜索和復(fù)制本地的 Skill，在生成視覺稿的時(shí)候選擇【抖音】這個(gè)設(shè)計(jì)系統(tǒng)：

生成的視覺稿，會(huì)帶上所選視覺系統(tǒng)的特征，比如這里的圖標(biāo)和配色等細(xì)節(jié)，就有抖音那個(gè)氣質(zhì)了。

我還嘗試做了一個(gè)蛋糕店的網(wǎng)頁(yè)和 UI 設(shè)計(jì)，下面是它生成的 UI 視覺稿。為了方便查看這里拼圖了。

部分網(wǎng)頁(yè)設(shè)計(jì)稿

除了這些，其他任何項(xiàng)目也都可以保持一致的視覺系統(tǒng)，比如前端設(shè)計(jì)或者 PPT 設(shè)計(jì)等等也都可以。

同樣是從入口開始，先整理好需求文檔提示詞。就像之前示例的提示詞那樣，說(shuō)明白需求就好。

• 1

我要做“精品蛋糕店在線預(yù)訂 App：蜜嶼蛋糕”，功能和設(shè)計(jì)要求如下：支持生日蛋糕、節(jié)日限定、婚禮甜品臺(tái)、企業(yè)團(tuán)購(gòu)、門店自提、同城配送和自定義蛋糕，頁(yè)面需要包含精選蛋糕、商品分類、商品詳情、預(yù)約下單、定制蛋糕、會(huì)員優(yōu)惠和訂單狀態(tài)，移動(dòng)端要有首頁(yè)、分類、定制、訂單、我的幾個(gè)核心入口；整體要有精品烘焙店的高級(jí)感和甜蜜感，商品圖片要大且精致，加入蛋糕攝影、奶油紋理、切面細(xì)節(jié)和節(jié)日送禮元素，預(yù)約日歷要清晰展示可選時(shí)間和剩余名額，先給我一個(gè) HTML 原型看看效果。

也可以改成更詳細(xì)的，可以直接在 Work 模式讓 AI 優(yōu)化后，自己再微調(diào)修改。

第一輪任務(wù)完成后，點(diǎn)擊任務(wù)下方【產(chǎn)物匯總】的文件，就能在右側(cè)以畫布形式瀏覽所有設(shè)計(jì)結(jié)果了。頁(yè)面會(huì)像設(shè)計(jì)稿一樣鋪開，你可以看單頁(yè)，也可以看整組頁(yè)面之間的關(guān)系。這個(gè)體驗(yàn)比單張圖更接近真實(shí)原型，因?yàn)樗屛覀兛吹降牟皇菃蝹€(gè)的孤立界面，是一組完整的、可以繼續(xù)推進(jìn)的產(chǎn)品結(jié)構(gòu)。

縮放看整體，拖動(dòng)畫布看具體頁(yè)面，上方幾個(gè)按鈕可以預(yù)覽、整理畫布、顯示或隱藏連線。效果滿意了可以導(dǎo)出圖片素材和設(shè)計(jì)文件。圖片它會(huì)自行生成，如果有自己想要放的圖片，也可以在畫布頂端最后一個(gè)按鈕選擇自己導(dǎo)入圖片。

多設(shè)備預(yù)覽：

優(yōu)化，可迭代式修改

生成以后，可以繼續(xù)修改和優(yōu)化。

修改方式有三種。

首先，我們可以直接在左邊對(duì)話框要求它如何修改。這個(gè)適合要大范圍修改的場(chǎng)景，比如整體換風(fēng)格、調(diào)整色調(diào)、統(tǒng)一圖標(biāo)、優(yōu)化字體層級(jí)，都適合用這種方式。如果信息具有時(shí)效性，也可以直接提出問(wèn)題，它會(huì)自動(dòng)檢索并修改整個(gè)項(xiàng)目文件里所有相關(guān)的細(xì)節(jié)。

其次，可以懸停、點(diǎn)選或框選某個(gè)元素，把修改意見直接落到具體位置。這個(gè)體驗(yàn)有點(diǎn)像在文檔里寫批注，鼠標(biāo)移動(dòng)或點(diǎn)選視覺稿指定位置然后【添加到對(duì)話】，輸入修改要求即可。

比如，不喜歡 Emoji 或者簡(jiǎn)約線形圖標(biāo)，可以更細(xì)節(jié)地直接描述你想要的效果，它會(huì)用更好的方式呈現(xiàn)。

淺色圖片上疊加淺色文字影響識(shí)別性，可以增加半透明遮罩。

還有一種方式，那就是在右側(cè)編輯面板里直接調(diào)細(xì)節(jié)。比如文字、位置、布局、圓角等。它不像完整 Figma 那么重，但足夠完成很多初步修正。

真正進(jìn)入工作流的設(shè)計(jì)工具，要能承接多輪的、反復(fù)的修改。

導(dǎo)出，接回生產(chǎn)鏈路

Design 模式最后一步，是把產(chǎn)物帶走。滿意的設(shè)計(jì)方案可以導(dǎo)出為代碼、圖片、Figma，也可以導(dǎo)出到 Code 模式，后續(xù)在 Code 模式中繼續(xù)推進(jìn)下一步。

上方點(diǎn)擊直達(dá)：

本地驗(yàn)證里也能看到類似項(xiàng)目落點(diǎn)：Design 任務(wù)會(huì)生成 .design 文件、頁(yè)面文件、片段文件和圖片資產(chǎn)。它的定位已經(jīng)超過(guò)靈感草圖，更接近一個(gè)可以繼續(xù)拆解、遷移和開發(fā)的項(xiàng)目包。

如果放到不同角色里看，它的價(jià)值也不完全一樣。

對(duì)個(gè)人開發(fā)者來(lái)說(shuō)，可以先把網(wǎng)頁(yè)或 App 頁(yè)面跑出來(lái)，再進(jìn)入 Code 模式繼續(xù)開發(fā)。對(duì)設(shè)計(jì)師和企業(yè)設(shè)計(jì)師，只要固定了設(shè)計(jì)系統(tǒng)，它很適合做多方案探索。對(duì)創(chuàng)業(yè)者來(lái)說(shuō)，它可以快速生成官網(wǎng)、演示材料和產(chǎn)品原型，在非常快的時(shí)間內(nèi)把討論對(duì)象從想法推進(jìn)到可視化的頁(yè)面。

當(dāng)然，AI 生成的結(jié)果依然需要人工把關(guān)。品牌細(xì)節(jié)、信息準(zhǔn)確性、交互合理性、商業(yè)表達(dá)，以及人文關(guān)懷細(xì)節(jié)，都不能完全交給 AI 自動(dòng)判斷。它更適合幫我們縮短從空白到初稿的距離，而不是替代最終判斷。

小結(jié)

這次 TRAE Work Design 模式真正值得關(guān)注的點(diǎn)，是它把 AI 設(shè)計(jì)放進(jìn)了一個(gè)連續(xù)工作流里：需求從對(duì)話進(jìn)入，設(shè)計(jì)在畫布里生成，修改通過(guò)上下文繼續(xù)，產(chǎn)物還能接到 Figma 和代碼。過(guò)去 AI 更像一個(gè)靈感助手，現(xiàn)在它更像 AI 時(shí)代的產(chǎn)品工作臺(tái)。

當(dāng)設(shè)計(jì)系統(tǒng)、可視化編輯、原型關(guān)系和 Code 模式打通，未來(lái) AI 設(shè)計(jì)的分水嶺可能會(huì)是，看誰(shuí)把一個(gè)想法更穩(wěn)定地推進(jìn)到可討論、可修改、可交付。

好了，今天的分享就到這里啦。大家如果也有嘗試 TRAE Work Design 模式，歡迎在評(píng)論區(qū)交流和分享。覺得這期內(nèi)容有幫助的話，歡迎點(diǎn)贊、推薦、轉(zhuǎn)發(fā)猛猛三連，這對(duì)阿真真的很重要～～！

下期見~