用 Trae CLI 做設計。

Trae CLI 究竟是什麼

Trae CLI 是字節跳動開源 trae-agent 專案中的命令列 agent。它會讀取你的倉庫，檢視、建立和編輯檔案，並在一個持久化的環境中執行 shell 命令——根據自然語言任務進行規劃和驗證，而不只是補全幾行程式碼。它採用 MIT 許可，圍繞透明、模組化的架構構建，因此易於審視和擴充套件。它與另一款獨立的 Trae IDE（字節跳動基於 VS Code 的 AI 編輯器）不同，儘管兩者出自同一廠商。

對設計工作來說，有兩個特性尤為突出。它模型無關——你選擇 LLM 提供商，所以永遠不會被某個模型的長處或侷限所束縛。它也完全開放、配置驅動，因此它的行為、工具和提供商都可以和你的專案一起固定在版本控制裡，而不是藏在某個託管服務背後。

• 執行模式與互動模式: Trae CLI 用 `trae-cli run "..."` 執行單個任務，或用 `trae-cli interactive` 保持一個持續會話——這正是對照你的設計規範來迭代 UI 的好地方。
• 內建工具: 它開箱即帶檔案編輯、bash/shell 執行和結構化推理工具，因此能構建、跑起開發伺服器並檢查執行時錯誤，全程不用離開終端。
• 自帶你的提供商: 你為信任的提供商提供一個 API 金鑰——OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure，或本地的 Ollama 模型——通過環境變數或配置檔案設定。

• 廠商：字節跳動（開源 trae-agent 專案）
• 憑證：一個 LLM 提供商 API 金鑰（BYOK）——例如 OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure，或本地的 Ollama 模型
• 許可：MIT，開源

為什麼開放、模型無關的 agent 適合做設計

Trae CLI 在設計上的優勢來自它的開放和提供商靈活性——但和每一個 agent 一樣，品味仍然得由人來提供。

• 天生模型無關: 因為提供商由你選擇，你可以把設計工作交給當下在佈局和前端程式碼上推理最好的模型，日後再換掉它也不必改動工作流。
• 開放且配置驅動: agent、它的工具及其提供商都固定在一個你可以提交的配置檔案裡，於是團隊在每臺機器上都得到相同的 agent 行為，而不是因開發者而異地漂移。
• 規範留在你的倉庫裡: 把 agent 指向你的 tokens、元件和真實規格——它們都儲存在你的專案裡——這樣它就是在針對一個品牌工作，而不是退回到千篇一律的外觀。

這條教訓和每個 agent 教給我們的一樣：Trae CLI 預設並不具備品味。當你給它約束——一個設計系統、一個審美 skill 以及具體的參考——它才會產出好的設計。Open Design 恰好把這些輸入打包好，並通過 ACP 餵給 Trae CLI，這正是兩者契合的原因（下文詳述）。

從零開始配置 Trae CLI 來做設計

這是從一臺乾淨的機器到一個能構建並驗證 UI 的 Trae CLI 的完整路徑。Trae CLI 用 uv 從原始碼安裝，然後配置上你想用的 LLM 提供商。

# 1. 從原始碼獲取 Trae CLI（trae-agent）——需要 uv
git clone https://github.com/bytedance/trae-agent.git
cd trae-agent
uv sync --all-extras
source .venv/bin/activate

# 2. 通過把它指向你的 LLM 提供商金鑰來完成認證
#    在環境變數裡設定（或寫進 trae_config.yaml 檔案）
export OPENAI_API_KEY=...        # 或 ANTHROPIC_API_KEY、GOOGLE_API_KEY 等

# 3. 在你的專案中執行一個任務
trae-cli run "Create a hello world page"
#    或保持一個會話：
trae-cli interactive

# 4. 檢視解析後的配置（金鑰會被打碼）
trae-cli show-config

• 把你的設計規則編碼進去: 把你的 tokens、原語和規範放在倉庫裡並把 Trae CLI 指向它們，這樣產出就會匹配一個品牌，而不是退回到千篇一律的外觀。
• 加入瀏覽器驗證: 讓 Trae CLI 跑起開發伺服器並在真實瀏覽器中渲染，這樣它就會跨斷點檢查自己的產出，而不只是確認構建通過。

截圖到 UI 的工作流

用 Trae CLI 做設計時，槓桿最高的迴圈是把一張參考圖變成可用的響應式 UI，並不斷迭代直到匹配。因為 Trae CLI 模型無關，把它指向一個其模型能很好處理參考圖的提供商，並依靠真實瀏覽器來檢查結果。

1. 從你手頭最清晰的視覺參考出發——並描述多種狀態（桌面端和移動端、懸停、空態、載入中），而不只是一張主視覺。
2. 提示詞要具體；含糊的提示即便配上強模型也會產出千篇一律的 UI。
3. 把你的設計系統和規範留在倉庫裡，並告訴 Trae CLI tokens 和標準原語在哪裡。
4. 跑起開發伺服器，讓 Trae CLI 在真實瀏覽器中渲染，調整到各個斷點來檢查結果。
5. 讓 Trae CLI 把它的實現拿回去和參考對比來迭代——而不只是確認它能構建。

執行一個互動式會話，給出具體的約束，而不是一句話的請求：

trae-cli interactive
# in the session:
> Implement the attached reference design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, render it in the browser, and iterate until it
  matches the references across breakpoints.

保持提示詞小而聚焦，提交好的迭代、回退壞的迭代（回退時告訴 Trae CLI），這樣每一輪都建立在乾淨的基礎之上。

配置、工具與提供商

三個擴充套件點讓 Trae CLI 適合長期的設計工作，而且三者都能幹淨地對映到一套開放的設計工作流上。

• 配置檔案: Trae CLI 讀取一個 trae_config.yaml，它固定了你的提供商、模型和各項設定——這是 agent 在專案上如何執行的持久、可版本控制的歸宿。
• 提供商選擇: 由於它支援眾多提供商（OpenAI、Anthropic、Google、OpenRouter、Doubao、Azure、Ollama），你可以把設計工作交給你信任的模型，並在不重接工作流的情況下換掉它。
• 內建工具: 它的檔案編輯、shell 和結構化推理工具讓它能收集上下文、構建、跑起開發伺服器並執行驗證迴圈，全程不用離開終端。

這些都是可移植的、agent 級別的能力——恰恰是 Open Design 被設計用來通過 ACP 編排的那類東西，而不必每個專案都重新搭一遍。

做設計時 Trae CLI 對比 Codex、Claude Code、Cursor、Gemini CLI

設計工作沒有唯一的贏家——每個 agent 各有不同的強項，有經驗的團隊會把它們疊著用。一個公允的總結：

社群反覆得出的結論是：品味來自人——沒有 skill、參考和約束時，它們全都會退回到千篇一律的審美。這才是真正要解決的問題——而它是設計工具形狀的，不是模型形狀的。

陷阱，以及如何避開「AI 廉價感」的外觀

對 AI 生成設計最常見的抱怨是它看起來千篇一律——柔和的漸變、懸浮的面板、過大的圓角、誇張的陰影，一種 Inter 字型加紫色的調調，「一看就是 AI 做的」。其他被反映的問題還包括移動端佈局錯亂，以及指令洩漏進 UI 文案。這些都不是 Trae CLI 獨有的；任何 agent 在缺乏精選的設計上下文下執行時都會這樣。

• 加一個審美 skill: 一個精選的設計 skill 會迫使 agent 選定一個真正的方向，而不是預設外觀。
• 在真實瀏覽器中驗證: 讓 Trae CLI 跨斷點渲染並自檢，這樣佈局就不會在移動端悄悄崩壞。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖是撬動產出質量的最大單一槓桿。
• 把規則編碼進你的倉庫: 把「不用主視覺卡片、最多兩種字型、品牌優先的層級」這類風格規則放在 agent 每次執行都會讀到的地方。

注意到了嗎，每一項緩解措施都在於給 agent 一份精選的設計上下文。逐個專案手工維護這份上下文，正是 Open Design 替你省掉的苦力活。

在 Open Design 中用 Trae CLI 做設計

Open Design 正是上面那套工作流一再呼喚的那個開源設計層。它把 Trae CLI 當作一等介面卡——通過其 trae-cli 二進位制檔案、用 Agent Client Protocol（ACP）來驅動它——並把它包進一套精選的 skill 與設計系統庫、一條結構化的渲染流水線和一個本地桌面 UI，於是讓 Trae CLI 出彩的那份設計上下文從第一次執行起就在那裡，不必每次手工拼湊。兩者都是開源、本地優先，這讓它們的搭配成了天然之選。

1. 安裝 Open Design 並選擇 Trae CLI 作為你的 agent。
2. 用你自己的 LLM 提供商金鑰（BYOK）認證——憑證留在你的機器上，絕不經我們代理。
3. 挑一個設計系統和一個 skill，然後以一致的品味生成演示稿、原型和落地頁。
4. 每一個產物和 DESIGN.md 檔案都存在你自己的倉庫裡，而不是某個託管雲上。

同一個 Trae CLI agent、同一個提供商金鑰——外加一套真正可移植、開源的設計工作流圍著它運轉。它本地優先、開源，所以關於你的工作或你的憑證，沒有任何東西會離開你的機器。

常見問題

1. 01 Trae CLI 真的能做設計工作嗎？ +

   能——配上一個審美 skill、一個設計系統和真實的參考上下文，Trae CLI 能產出生產級、響應式的 UI；而且因為它模型無關，你可以把工作交給在你的前端上推理最好的提供商。沒有這份上下文時，它往往會退回到千篇一律的外觀，這正是 Open Design 填補的鴻溝。

2. 02 用 Trae CLI 做設計需要付費嗎？ +

   Trae CLI 本身免費且開源（MIT）。你自帶 LLM 提供商金鑰，所以你唯一的成本是那家提供商收的費用——或者如果你通過 Ollama 跑本地模型，則分文不花。無論哪種方式，Open Design 都不會代理你的憑證。

3. 03 Trae CLI 具體好在哪裡、適合做設計？ +

   兩點：它模型無關，所以你可以選擇最適合前端工作的 LLM 提供商；它完全開放、配置驅動，所以它的行為對一個團隊來說透明且可復現。但品味仍然來自你提供的設計系統、skill 和參考。

4. 04 前端設計該用 Trae CLI 還是 Claude Code？ +

   兩者都很能幹。Claude Code 以具體、程式碼庫感知的設計決策著稱；Trae CLI 的優勢是開源且提供商靈活，所以你永遠不會被鎖定在某一個模型上。許多團隊兩個都用——Open Design 讓你在不改動設計工作流的情況下切換 agent。

5. 05 Open Design 執行 Trae CLI 需要什麼？ +

   Open Design 通過 Agent Client Protocol（ACP）驅動 Trae CLI 的 trae-cli 二進位制檔案，並使用你配置的 LLM 提供商金鑰。你選擇 Trae CLI 作為你的 agent，把它指向一個提供商，Open Design 就在它周圍提供那份精選的設計上下文。

6. 06 Open Design 和字節跳動或 Trae 有關聯嗎？ +

   沒有。Trae CLI（trae-agent）是字節跳動的產品；Open Design 是一個獨立的開源專案，把它作為一等介面卡來支援。Trae 是字節跳動的商標。

7. 07 我的檔案和憑證安全嗎？ +

   安全——Open Design 本地優先且開源。你的檔案、產物和 DESIGN.md 都留在你自己的倉庫裡，你的 LLM 提供商憑證由你的 agent 直接使用，絕不經 Open Design 的伺服器中轉。