用 Qoder CLI 做設計。

Qoder CLI 究竟是什麼

Qoder 是阿里巴巴推出的智慧體編碼平臺——一個 AI 開發環境，既有桌面應用也有 CLI，能理解真實的程式碼庫並端到端地完成開發任務。Qoder CLI 把這套引擎帶到了終端：它讀取你的倉庫、編輯檔案、執行 shell 命令，並從自然語言出發完成任務，而不只是補全程式碼行。它用 Qoder 賬戶登入。

對於設計工作，有兩個特性尤為突出。Qoder 會建立起對你倉庫的深度上下文——架構、設計模式，以及提煉進 repository wiki 的約定——因此它把產出錨定在你真實的基礎元件上。它還執行一套智慧體化、規範驅動的工作流：你勾勒出想要的東西，它便規劃、實現並驗證這項工作，包括跨多個步驟。

• Agent 與 Quest 模式: Agent 模式是帶人類介入檢查點的對話式結對程式設計；Quest 模式則把更長的多步工作委派給一個自主智慧體，由它規劃、實現並自我驗證——這正是交付一項規範驅動設計任務的天然落點。
• Repo wiki + MCP: Qoder 把你的程式碼庫提煉成一份記錄架構與約定的 repository wiki，並支援 MCP 伺服器以引入外部上下文，比如一個即時的 Figma 檔案。
• 模型檔位: Qoder CLI 提供 Lite、Efficient 和 Auto 三檔；Auto 讓它的排程器按任務挑選模型，這樣你就無需手動管理模型選擇。

• 廠商：Alibaba
• 憑證：Qoder 賬戶（通過瀏覽器登入，或用 Qoder 個人訪問令牌進行非互動式使用）
• 模型檔位：Lite、Efficient、Auto

為什麼一個智慧體化、懂倉庫的智慧體契合設計

Qoder CLI 在設計上的優勢來自兩個特性——但和每個智慧體一樣，品味仍然得由人來提供。

• 深度的倉庫理解: 因為 Qoder 會建立起對你整個程式碼庫的上下文並提煉成一份 repo wiki，智慧體會複用你已有的元件和 tokens，而不是為每個介面發明一次性的樣式。
• 規範驅動、自主的 quest: Quest 模式把一份書面規範變成一個經過規劃、實現並自我驗證的結果，於是一項設計任務能端到端地跑完，而不是停在初稿。
• 智慧體會讀取的約定: 專案規則（再加上 Figma MCP 伺服器）把智慧體指向你的 tokens、元件和真實規範，於是它對著一個品牌工作，而不是一種預設觀感。

這個教訓和每個智慧體教給我們的一樣：Qoder CLI 預設並不具備品味。當你給它約束——一個設計系統、一個審美 skill 和具體的參考——它才產出優質的設計。Open Design 恰恰把這些輸入打包好了，這也是為什麼兩者契合（下文細說）。

從零搭建用於設計工作的 Qoder CLI

這裡是從一臺乾淨的機器到一個能構建並驗證 UI 的 Qoder CLI 的完整路徑。

# 1. 安裝 Qoder CLI（Node 20+）
npm install -g @qoder-ai/qodercli
# （macOS/Linux 也可通過 Homebrew 安裝）

# 2. 驗證安裝
qodercli --version

# 3. 在你的專案裡啟動它，首次執行時登入
cd your-project
qodercli          # 然後 /login — 通過瀏覽器或 Qoder 訪問令牌登入

# 4. 為本次會話挑選一個模型檔位
#    Lite、Efficient 或 Auto（Auto 讓排程器按任務選擇）

• 把你的設計規則寫下來: 把你的 tokens、基礎元件和約定放在智慧體會讀取的地方，讓產出貼合一個品牌，而不是退回到一種通用觀感。Qoder 的 repo wiki 有助於讓這份上下文保持最新。
• 加上瀏覽器驗證: 接入一個 Playwright 或瀏覽器 MCP，讓 Qoder 在真實瀏覽器中渲染，並跨斷點檢查其產出，而不只是確認構建通過。

參考圖到 UI 的工作流

用 Qoder CLI 最具槓桿效應的設計閉環，是把一張參考變成可用、響應式的 UI，並不斷迭代直到它匹配為止——藉助智慧體的倉庫上下文和一個真實的驗證閉環，把產出對照回參考。

1. 從你手上最清晰的視覺參考出發——幷包含多種狀態（桌面與移動端、懸停、空態、載入態），而不只是一張主視覺。
2. 在 prompt 裡講清楚；模糊的 prompt 即便配上能幹的智慧體也會產出通用的 UI。
3. 把 Qoder 指向你的設計系統和約定，並告訴它 tokens 和規範基礎元件存放在哪裡。
4. 跑一個 dev 伺服器，讓 Qoder 在真實瀏覽器中渲染，調整到各斷點尺寸來檢查結果。
5. 讓 Qoder 把它的實現對照回參考來迭代——而不只是確認它能構建通過。

把任務寫成一份清晰的規範，讓一個 quest 把它貫穿到底，並給出具體約束：

qodercli
# 在 prompt 裡：
> Implement this design from reference-desktop.png and
  reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

保持 prompt 小而聚焦，提交好的迭代、回退壞的迭代（回退時告訴 Qoder），讓每一輪都建立在一個乾淨的基底之上。

規則、MCP 與 repo wiki

有三個擴充套件點讓 Qoder CLI 適合持續的設計工作，而這三者都能幹淨利落地對映到一套開放的設計工作流上。

• 專案規則: 把你的設計約定編碼為智慧體每次執行都會讀取的持久專案規則——這是 tokens、基礎元件和評審清單的歸處。
• MCP 伺服器: MCP 是引入設計上下文和外部工具的可移植方式，其中最相關的是 Figma MCP 伺服器，而且它跨智慧體可用，不只限於 Qoder。
• repo wiki: Qoder 的 repository wiki 會自動提煉架構與約定，於是智慧體能持續複用你真實的元件，而不必每個任務都重新學習一遍程式碼庫。

這些都是可移植、跨智慧體的能力——恰恰是 Open Design 生來要編排的那類東西，而不是每個專案都重新造一遍。

做設計時 Qoder CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI

做設計沒有單一贏家——每個智慧體各有所長，有經驗的團隊會把它們疊加使用。一個公允的小結：

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

坑，以及如何避開“AI 味”觀感

關於 AI 生成設計最常見的抱怨是它看起來千篇一律——柔和漸變、懸浮面板、過大的圓角、誇張的陰影，一種“一眼就知道是 AI 做的”的 Inter 配紫色既視感。其他被反映的問題還包括移動端佈局錯亂，以及指令文字洩漏進 UI 文案。這些都不是 Qoder CLI 獨有的；任何智慧體在沒有精選設計上下文的情況下執行，都會這樣。

• 加一個審美 skill: 一個精選的設計 skill 會迫使智慧體承諾一個真實的方向，而不是那種預設觀感。
• 在真實瀏覽器中驗證: 跨斷點渲染並自檢，這樣佈局就不會在移動端悄無聲息地崩掉。
• 提供 tokens 與參考: 真實的設計 tokens 和參考截圖，是撬動產出質量的最大單一槓桿。
• 編碼智慧體會讀取的規則: 把“不要主視覺卡片、最多兩種字型、品牌優先的層級”這類規則放進專案規則和 repo wiki，智慧體每次執行都會讀到它們。

注意，每一項緩解措施都關乎給智慧體一份精選的設計上下文。逐個專案手工維護這份上下文，正是 Open Design 替你省掉的苦活。

在 Open Design 中用 Qoder CLI 做設計

Open Design 正是上文那套工作流一再呼喚的開源設計層。它把 Qoder CLI 當作一等介面卡，並用一個精選的 skill 與設計系統庫、一條結構化的渲染管線，以及一個本地桌面 UI 把它包裹起來——於是讓 Qoder 出色的那份設計上下文從第一次執行起就在那裡，而不必每次手工拼湊。Open Design 是本地優先的，所以你的工作留在你自己的機器上。

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

同一個 Qoder CLI 智慧體、同一個賬戶——再加上一套圍繞它的、真實、可移植、開源的設計工作流。它本地優先且採用 Apache-2.0 許可，所以你的工作或憑證沒有任何東西會離開你的機器。

常見問題

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

   能——在上下文中配上一個審美 skill、一個設計系統和真實的參考圖，Qoder CLI 能產出生產級、響應式的 UI，而它深度的倉庫理解能幫它複用你真實的元件。沒有這份上下文，它往往會退回到一種通用觀感，而這正是 Open Design 填補的差距。

2. 02 我該如何認證 Qoder CLI？ +

   執行 qodercli 並用 /login 通過瀏覽器以你的 Qoder 賬戶登入，或為非互動式環境提供一個 Qoder 個人訪問令牌。Open Design 從不代理你的憑證——智慧體直接使用它們。

3. 03 究竟是什麼讓 Qoder CLI 適合做設計？ +

   兩點：它會建立起對你倉庫的深度上下文——架構、約定和一份 repo wiki——所以它複用你真實的基礎元件；它的規範驅動 quest 能端到端地跑完一項設計任務。兩者都有幫助，但品味仍然來自你提供的設計系統、skill 和參考。

4. 04 Lite、Efficient 和 Auto 模型檔位是什麼？ +

   Qoder CLI 讓你挑選一個模型檔位：Lite、Efficient 或 Auto。Auto 讓 Qoder 的排程器按任務選擇模型，這樣你就無需手動管理模型選擇。挑選契合任務的檔位；Auto 是個穩妥的預設值。

5. 05 我該如何把 Qoder CLI 連到 Figma？ +

   把 Figma MCP 伺服器加進 Qoder 的 MCP 配置裡。Qoder 隨後就能拉取真實的設計上下文——元件、變數、佈局資料——於是生成的程式碼貼合來源，而不是近似它。

6. 06 Open Design 與 Qoder 或 Alibaba 有關聯嗎？ +

   沒有。Qoder 是 Alibaba 的產品；Open Design 是一個獨立的開源專案，以一等介面卡的方式支援它。Qoder 是其各自所有者的商標。

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

   安全——Open Design 本地優先且採用 Apache-2.0 許可。你的檔案、產物和 DESIGN.md 都留在你自己的倉庫裡，你的 Qoder 憑證由你的智慧體直接使用，絕不會經過 Open Design 的伺服器中轉。