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

往期測評：

與以往的測評相同，先放我們的主觀評分：

由于 Cursor，Trae_CN，CodeBuddy 都是編譯器，所使用模型基本來自各路大廠，因此本文不聚焦于代碼質量，而是主要探討對設計師等代碼新手的使用體驗問題。

由于，CodeBuddy 是三個產品中使用體驗最好的產品，接下來我們將從它開始進行介紹。

CodeBuddy

CodeBuddy 是騰訊推出的 AI 編程工具，從宣傳側重點和時機效果來說，我們都覺得它在小程序的代碼生成方面有比較好的效果，其關鍵是獨特的可視化編程功能，可以讓我們直接在頁面上拖動組件，調整大小，像是調整原型圖一樣的調整前端頁面。

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

在測試中，我們覺得 CodeBuddy 的使用還是存在門檻的，但對于有一定開發背景或者對于開發流程較為熟悉的人來說還是比較適合的。下面我們將給大家展示下從 0 開始搭建小程序的流程：

1) 輸入提示詞，本次我們使用的提示詞：“創建一個 AIGC 信息發布小程序，可以抓取網絡上的 AIGC 咨詢信息并以瀑布流圖文展示，用戶也可以自己上傳內容、極簡黑白 UI 風格。”

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

3) 在初次生成后。 我們發現缺少了詳情頁面，對話輸入增加詳情頁，以及支持用戶點贊、評論、收藏等功能。于是我們通過對話的方式繼續生成，此過程持續了約 4 分鐘。

4) 在后續的調試中，我們驚喜的發現。可以通過點擊“可視化”功能直接對對頁面中元素進行位置、樣式的微調，以“低代碼”的形式完成修改，實現所見即所得。

5) 小程序做好后先自動檢查代碼問題，我們可以直接和 CodeBuddy 對話解決錯誤，例如說“幫我改成可以發布的狀態”就會自動修復問題，修復完成后就可以進行審核上線的流程了。

Cursor

Cursor 是一個內置 AI 工具的代碼編輯器。付費情況下支持更好的模型和更多的對話次數。目前 Cursor 解決了國內訪問的網絡問題，可以正常使用 chatgpt，可以作為國內訪問 chatgpt 的一個替代手段。

付費模式

值得注意的是，當前的免費版本使用額度大幅縮水，補全次數從之前的 2000 次補全大幅縮水到了現在的 200 次，對話次數維持了 50 次不變。

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

1. 對于零基礎的設計師來說，編程的第一關就是環境配置。但是 Cursor 可以直接將配置的代碼發送出來，我們只要點擊“run”即可自動安裝代碼所需的配置。
2. 第二個麻煩之處則是復雜的程序目錄，在之前僅使用 gpt 式對話 AI 助手編程時，我們需要手動創建各種代碼文件并將其分類存放在目錄地址下。而在 Cursor 中，AI 可以直接幫我們創建好目錄，規劃好結構。
3. 在調試程序的時候，Cursor 可以直接基于代碼進行修改，不需要像之前一樣從 gpt 對話框中不斷復制粘貼。

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

此次輸入的任務是寫一個 AIGC 相關的新聞頁面，大致的使用流程與 CodeBuddy 一致，最終會在本地生成一個項目文件夾，并創建好相關文件。其中如果有未安裝的庫，也會提供一鍵安裝的方法。

唯一令我感到疑惑的是反復出現的禁用情況，Cursor 似乎對于頁面侵權等的判定非常嚴格，一旦我給出一張頁面的參考圖，馬上就會被判定為“可疑行為”，從而被禁用。

Trae_CN

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

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

目前，從我們這邊測試的版本來看，Trae_CN 與 Cursor 保持相同，會給出幾個默認的模型的選擇。同時，Trae_CN 也支持用戶自定義需要使用的模型，帶給用戶更好的體驗上限，如下圖所示：

目前的 Trae_CN 僅保留 build 模式，支持用戶通過自然語言對話的方式，從 0 開始構建一個完整的項目。

在構建項目的過程中，大部分的任務 Trae_CN 都會幫用戶寫好，我們只需要根據 AI 的建議點擊「全部接受」就好

最終效果的本地預覽樣式：

得承認，目前 Trae_CN 的項目目前看起來距離 Cursor 還是具有一定的距離，但 Trae_CN 極低的學習成本還是很值得嘗試的。

在結束了整個測評后。我們發現當 AI 代碼工具試圖用算法解構設計語言時，我們看到的不僅是技術對創作流程的顛覆，更是一場關于「設計話語權」的靜默革命。這些工具在降低技術門檻的同時，也在重塑設計師的職能邊界——從像素的操控者進化為規則的制定者。

當下的 AI 代碼生成仍處于「翻譯」階段：它能準確轉譯樣式參數，卻難以捕捉情緒化的設計意圖；它能快速輸出標準組件，卻尚未學會在代碼中保留品牌基因的溫度。或許，這種矛盾恰恰揭示了設計師不可替代的核心價值：在效率與創意、規范與靈感之間找到精妙的平衡點。