生成式 AI 的不斷發(fā)展，正在讓設(shè)計(jì)與開(kāi)發(fā)界限逐漸模糊。今天，UI/UX 設(shè)計(jì)師的角色正在向「全鏈路」延伸。能否快速驗(yàn)證設(shè)計(jì)落地的可行性、與開(kāi)發(fā)者高效協(xié)作，甚至自主實(shí)現(xiàn)簡(jiǎn)單的前端邏輯，已成為衡量設(shè)計(jì)師競(jìng)爭(zhēng)力的新維度。AI 代碼工具的出現(xiàn)，為設(shè)計(jì)師提供了一個(gè)低門檻的「技術(shù)跳板」——而工具的界面體驗(yàn)、交互邏輯與學(xué)習(xí)成本，直接決定了設(shè)計(jì)師能否順利跨過(guò)這道技術(shù)鴻溝。在本文中，我們將從設(shè)計(jì)師的視角，深度體驗(yàn)Cursor、Trae_CN、CodeBuddy三款工具的表現(xiàn)。

往期測(cè)評(píng)：

與以往的測(cè)評(píng)相同，先放我們的主觀評(píng)分：

由于 Cursor，Trae_CN，CodeBuddy 都是編譯器，所使用模型基本來(lái)自各路大廠，因此本文不聚焦于代碼質(zhì)量，而是主要探討對(duì)設(shè)計(jì)師等代碼新手的使用體驗(yàn)問(wèn)題。

由于，CodeBuddy 是三個(gè)產(chǎn)品中使用體驗(yàn)最好的產(chǎn)品，接下來(lái)我們將從它開(kāi)始進(jìn)行介紹。

CodeBuddy

CodeBuddy 是騰訊推出的 AI 編程工具，從宣傳側(cè)重點(diǎn)和時(shí)機(jī)效果來(lái)說(shuō)，我們都覺(jué)得它在小程序的代碼生成方面有比較好的效果，其關(guān)鍵是獨(dú)特的可視化編程功能，可以讓我們直接在頁(yè)面上拖動(dòng)組件，調(diào)整大小，像是調(diào)整原型圖一樣的調(diào)整前端頁(yè)面。

目前，CodeBuddy 默認(rèn)內(nèi)置的大模型是 Hunyuan、Deepseek（r1/v3）、Ollama。但在 Craft 的代碼生成模式僅支持 Deepseek v3 模型。用戶可以通過(guò) Craft 拆解需求、生成代碼，Chat 模式理解工程、問(wèn)答技術(shù)。

在測(cè)試中，我們覺(jué)得 CodeBuddy 的使用還是存在門檻的，但對(duì)于有一定開(kāi)發(fā)背景或者對(duì)于開(kāi)發(fā)流程較為熟悉的人來(lái)說(shuō)還是比較適合的。下面我們將給大家展示下從 0 開(kāi)始搭建小程序的流程：

1) 輸入提示詞，本次我們使用的提示詞：“創(chuàng)建一個(gè) AIGC 信息發(fā)布小程序，可以抓取網(wǎng)絡(luò)上的 AIGC 咨詢信息并以瀑布流圖文展示，用戶也可以自己上傳內(nèi)容、極簡(jiǎn)黑白 UI 風(fēng)格?！?/p>

2) 大模型的生成大概用時(shí) 5 分鐘，在此期間，需要我們對(duì)于代碼進(jìn)行選擇，選擇接受或重新生成，一定程度上也增加了用戶參與感（這部分其實(shí)是需要用戶審核生成的代碼的，但能力有限，對(duì)于我們來(lái)說(shuō)也只能作為參與感的體驗(yàn)了）。

3) 在初次生成后。 我們發(fā)現(xiàn)缺少了詳情頁(yè)面，對(duì)話輸入增加詳情頁(yè)，以及支持用戶點(diǎn)贊、評(píng)論、收藏等功能。于是我們通過(guò)對(duì)話的方式繼續(xù)生成，此過(guò)程持續(xù)了約 4 分鐘。

4) 在后續(xù)的調(diào)試中，我們驚喜的發(fā)現(xiàn)。可以通過(guò)點(diǎn)擊“可視化”功能直接對(duì)對(duì)頁(yè)面中元素進(jìn)行位置、樣式的微調(diào)，以“低代碼”的形式完成修改，實(shí)現(xiàn)所見(jiàn)即所得。

5) 小程序做好后先自動(dòng)檢查代碼問(wèn)題，我們可以直接和 CodeBuddy 對(duì)話解決錯(cuò)誤，例如說(shuō)“幫我改成可以發(fā)布的狀態(tài)”就會(huì)自動(dòng)修復(fù)問(wèn)題，修復(fù)完成后就可以進(jìn)行審核上線的流程了。

Cursor

Cursor 是一個(gè)內(nèi)置 AI 工具的代碼編輯器。付費(fèi)情況下支持更好的模型和更多的對(duì)話次數(shù)。目前 Cursor 解決了國(guó)內(nèi)訪問(wèn)的網(wǎng)絡(luò)問(wèn)題，可以正常使用 chatgpt，可以作為國(guó)內(nèi)訪問(wèn) chatgpt 的一個(gè)替代手段。

付費(fèi)模式

值得注意的是，當(dāng)前的免費(fèi)版本使用額度大幅縮水，補(bǔ)全次數(shù)從之前的 2000 次補(bǔ)全大幅縮水到了現(xiàn)在的 200 次，對(duì)話次數(shù)維持了 50 次不變。

Cursor 的界面與 VSCode 基本一致，而使用流程與之前介紹的 CodeBuddy 也較為類似，發(fā)送需求，即可坐等 AI 完成項(xiàng)目。目前免費(fèi)支持的模型是 gpt 4.1

1. 對(duì)于零基礎(chǔ)的設(shè)計(jì)師來(lái)說(shuō)，編程的第一關(guān)就是環(huán)境配置。但是 Cursor 可以直接將配置的代碼發(fā)送出來(lái)，我們只要點(diǎn)擊“run”即可自動(dòng)安裝代碼所需的配置。
2. 第二個(gè)麻煩之處則是復(fù)雜的程序目錄，在之前僅使用 gpt 式對(duì)話 AI 助手編程時(shí)，我們需要手動(dòng)創(chuàng)建各種代碼文件并將其分類存放在目錄地址下。而在 Cursor 中，AI 可以直接幫我們創(chuàng)建好目錄，規(guī)劃好結(jié)構(gòu)。
3. 在調(diào)試程序的時(shí)候，Cursor 可以直接基于代碼進(jìn)行修改，不需要像之前一樣從 gpt 對(duì)話框中不斷復(fù)制粘貼。

可以看到界面整體與 VScode 類似，較好上手

此次輸入的任務(wù)是寫(xiě)一個(gè) AIGC 相關(guān)的新聞頁(yè)面，大致的使用流程與 CodeBuddy 一致，最終會(huì)在本地生成一個(gè)項(xiàng)目文件夾，并創(chuàng)建好相關(guān)文件。其中如果有未安裝的庫(kù)，也會(huì)提供一鍵安裝的方法。

唯一令我感到疑惑的是反復(fù)出現(xiàn)的禁用情況，Cursor 似乎對(duì)于頁(yè)面侵權(quán)等的判定非常嚴(yán)格，一旦我給出一張頁(yè)面的參考圖，馬上就會(huì)被判定為“可疑行為”，從而被禁用。

Trae_CN

Trae_CN 是字節(jié)針對(duì) Cursor 推出的同類型的基于 AI 大模型的代碼編輯軟件，可能是想要和 Cursor 搶占市場(chǎng)的需要吧，目前是免費(fèi)使用的，且不需要魔法上網(wǎng)。目前，從能力的使用來(lái)說(shuō)，和 Cursor 幾乎保持了相同的水平，Trae 的主要界面展示如下：

與 Cursor 相同，Trae_CN 也是采用了代碼框在左，對(duì)話框在右的模式；

目前，從我們這邊測(cè)試的版本來(lái)看，Trae_CN 與 Cursor 保持相同，會(huì)給出幾個(gè)默認(rèn)的模型的選擇。同時(shí)，Trae_CN 也支持用戶自定義需要使用的模型，帶給用戶更好的體驗(yàn)上限，如下圖所示：

目前的 Trae_CN 僅保留 build 模式，支持用戶通過(guò)自然語(yǔ)言對(duì)話的方式，從 0 開(kāi)始構(gòu)建一個(gè)完整的項(xiàng)目。

在構(gòu)建項(xiàng)目的過(guò)程中，大部分的任務(wù) Trae_CN 都會(huì)幫用戶寫(xiě)好，我們只需要根據(jù) AI 的建議點(diǎn)擊「全部接受」就好

最終效果的本地預(yù)覽樣式：

得承認(rèn)，目前 Trae_CN 的項(xiàng)目目前看起來(lái)距離 Cursor 還是具有一定的距離，但 Trae_CN 極低的學(xué)習(xí)成本還是很值得嘗試的。

在結(jié)束了整個(gè)測(cè)評(píng)后。我們發(fā)現(xiàn)當(dāng) AI 代碼工具試圖用算法解構(gòu)設(shè)計(jì)語(yǔ)言時(shí)，我們看到的不僅是技術(shù)對(duì)創(chuàng)作流程的顛覆，更是一場(chǎng)關(guān)于「設(shè)計(jì)話語(yǔ)權(quán)」的靜默革命。這些工具在降低技術(shù)門檻的同時(shí)，也在重塑設(shè)計(jì)師的職能邊界——從像素的操控者進(jìn)化為規(guī)則的制定者。

當(dāng)下的 AI 代碼生成仍處于「翻譯」階段：它能準(zhǔn)確轉(zhuǎn)譯樣式參數(shù)，卻難以捕捉情緒化的設(shè)計(jì)意圖；它能快速輸出標(biāo)準(zhǔn)組件，卻尚未學(xué)會(huì)在代碼中保留品牌基因的溫度?；蛟S，這種矛盾恰恰揭示了設(shè)計(jì)師不可替代的核心價(jià)值：在效率與創(chuàng)意、規(guī)范與靈感之間找到精妙的平衡點(diǎn)。