用 Qwen Code 做設計。

Qwen Code 究竟是什麼

Qwen Code 是阿里巴巴為終端釋出的開源（Apache-2.0）AI agent。它讀取你的倉庫、編輯檔案、執行 shell 命令、上網檢索——從自然語言任務出發去規劃和驗證工作，而不只是補全幾行程式碼。它由 Google 的 Gemini CLI 改造而來，在解析器層面和提示詞上做了調優，以釋放 Qwen3-Coder 模型在 agent 化編碼任務上的能力。

對設計工作來說，有兩個特性格外突出。它是一個強大的 agent 化編碼器，能拿著一份參考和一份清晰的需求去構建、執行並自我糾正出響應式 UI。而 Qwen3-Coder 模型自帶超大上下文視窗，大到足以一次性裝下你整套設計系統、元件庫和參考集，而不必把它們壓縮概括掉。

• 上下文檔案: Qwen Code 會讀取一個 QWEN.md 檔案作為持久的專案上下文——這正是編寫你的設計規範、tokens 和評審清單的天然位置。個人和專案級設定會層層疊加在其上。
• 內建工具 + MCP: 它開箱即帶檔案、shell 和 web 工具，並支援 MCP server（在 ~/.qwen/settings.json 的 mcpServers 下配置），以接入像即時 Figma 檔案這樣的外部上下文。
• 從 BYOK 起步: 你自帶 key——一個 DashScope（阿里雲百鍊）API key，或任意 OpenAI 相容端點，或 ModelScope——並在 settings.json 中配置。

• 廠商：Alibaba
• 憑證：DashScope / Qwen API key（BYOK），或 OpenAI 相容端點 / ModelScope
• 許可：Apache-2.0，開源（由 Gemini CLI 改造而來）

為什麼強編碼模型和超大上下文契合設計

Qwen Code 的設計優勢來自兩個特性——但和每個 agent 一樣，審美仍然得由你來提供。

• 強大的 agent 化編碼: Qwen3-Coder 模型針對 agent 化任務做了調優，因此這個 agent 會規劃、編輯、跑構建並自我糾正——把一份清晰的參考和需求變成響應式標記，而不是一錘子的瞎猜。
• 超大上下文視窗: Qwen3-Coder 的超大上下文意味著整套設計系統、tokens 和許多參考狀態能一次性裝下，於是 agent 會複用你真實的基礎原語，而不是憑空造出一次性的樣式。
• QWEN.md 裡的規範: 一份 QWEN.md（加上 Figma MCP server）把 agent 指向你的 tokens、元件和真實規格，於是它是對著一個品牌幹活，而不是套用一套預設外觀。

這個教訓和每個 agent 教給我們的一樣：Qwen Code 預設並不具備審美。當你給它約束時——一套設計系統、一個審美 skill 和具體的參考——它才能產出好設計。Open Design 恰恰把這些輸入打包好了，這正是兩者契合的原因（下文詳述）。

從零搭好用於設計工作的 Qwen Code

下面是從一臺乾淨的機器到一個能構建並驗證 UI 的 Qwen Code 的完整路徑。

# 1. 安裝 Qwen Code（Node 22+）
npm install -g @qwen-code/qwen-code@latest
# 或：brew install qwen-code

# 2. 在你的專案裡啟動它，首次執行時完成認證
cd your-project
qwen              # 執行 /auth，或在 ~/.qwen/settings.json 裡設定一個 key

# 3. 在 settings.json 裡配置一個 DashScope（OpenAI 相容）key
#    baseUrl: https://dashscope.aliyuncs.com/compatible-mode/v1
#    model:   qwen3-coder-plus   （設定 DASHSCOPE_API_KEY）

# 4. 新增一個 QWEN.md 並接好 Figma MCP server（可選）
#    在 ~/.qwen/settings.json 的 "mcpServers" 下新增 MCP

• 寫下你的設計規則: 把你的 tokens、基礎原語和規範放進 QWEN.md，並讓 Qwen Code 指向它們，這樣產出會貼合一個品牌，而不是退回到一套通用外觀。
• 加入瀏覽器驗證: 接好一個 Playwright 或瀏覽器 MCP，讓 Qwen Code 在真實瀏覽器裡渲染，並跨斷點檢查產出，而不只是確認構建通過。

參考到 UI 的工作流

用 Qwen Code 收益最高的設計閉環，是把一份參考變成可用的響應式 UI，並反覆迭代直到匹配——依靠 agent 去構建、渲染，並把產出對照參考做比較。

1. 從你手頭最清晰的視覺參考開始——並描述多個狀態（桌面與移動、懸停、空態、載入中），而不只是一張主視覺。
2. 提示詞要具體；含糊的提示詞即便用強模型也只會產出通用 UI。
3. 把你的設計系統和規範放在 QWEN.md 裡，並告訴 Qwen Code tokens 和標準基礎原語在哪裡。
4. 跑一個 dev server，讓 Qwen Code 在真實瀏覽器裡渲染，調整到各個斷點尺寸來檢查結果。
5. 通過讓 Qwen Code 把它的實現對照參考做比較來迭代——而不只是確認它能構建通過。

用 @ 引用一個檔案把它附到提示詞裡，然後給出具體約束：

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

把提示詞保持小而聚焦，提交好的迭代、回退壞的迭代（回退時告訴 Qwen Code），這樣每一輪都在一個乾淨的基礎上推進。

QWEN.md、MCP 和擴充套件

三個擴充套件點讓 Qwen Code 能勝任持續的設計工作，而這三者都能幹淨地對映到一套開放的設計工作流上。

• QWEN.md 上下文: 專案規則放在倉庫根目錄的 QWEN.md 裡（帶全域性層和專案層）。它是你設計規範的長久歸宿，每次執行都會被讀取。
• MCP server: 在 ~/.qwen/settings.json 的 mcpServers 下配置 MCP server——這是引入設計上下文和外部工具的可移植方式，其中最相關的是 Figma MCP server，它們能跨 agent 通用，而不只服務於 Qwen Code。
• skill 與內建工具: Qwen Code 的 skill 以及它內建的檔案、shell 和 web 工具，讓它無需離開終端就能收集參考並執行驗證閉環。

這些都是可移植、跨 agent 的能力——正是 Open Design 旨在編排的那類東西，而不是在每個專案裡重新造一遍。

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

設計工作沒有唯一贏家——每個 agent 各有所長，老練的團隊會把它們疊著用。一個公允的概括：

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

坑，以及如何避開那種「AI 味」外觀

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

• 加一個審美 skill: 一個精選的設計 skill 會逼著 agent 篤定一個真實的方向，而不是套用預設外觀。
• 在真實瀏覽器裡驗證: 讓 agent 跨斷點渲染並自檢，這樣佈局就不會在移動端悄悄崩掉。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖，是對產出質量最大的單一槓杆。
• 把規則寫進 QWEN.md: 把諸如「不要 hero 卡片、最多兩種字型、品牌優先的層級」這類風格規則，放在 agent 每次執行都會讀到的地方。

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

在 Open Design 中用 Qwen Code 做設計

Open Design 正是上面那套工作流一再呼喚的那個開源設計層。它把 Qwen Code 當作一等公民介面卡，並用一套精選的 skill 與設計系統庫、一條結構化的渲染管線，以及一個本地桌面 UI 把它包起來——於是讓 Qwen Code 好用的那份設計上下文，從第一次執行就在那裡，而不必每次手工拼湊。兩者都開源、都本地優先，這讓這對組合天然契合。

1. 安裝 Open Design，並選擇 Qwen Code 作為你的 agent。
2. 用你的 DashScope 或 Qwen API key 認證（BYOK）——憑證留在你自己的機器上，絕不經我們中轉。
3. 選一套設計系統和一個 skill，然後以一致的審美生成演示稿、原型和落地頁。
4. 每一份產物和 DESIGN.md 檔案都留在你自己的倉庫裡，而非託管雲端。

同一個 Qwen Code agent、同一個 key——外加圍繞它的一套真實、可移植、開源的設計工作流。它本地優先、Apache-2.0，所以你的工作和憑證都不會離開你的機器。

常見問題

1. 01 Qwen Code 真能做設計工作嗎？ +

   能——只要上下文裡有一個審美 skill、一套設計系統和真實的參考圖，Qwen Code 就能產出生產級的響應式 UI，並且它的 agent 化閉環會構建、渲染，並對照參考驗證產出。缺了這份上下文，它往往會退回一套通用外觀，而這正是 Open Design 填補的缺口。

2. 02 用 Qwen Code 做設計需要付費嗎？ +

   Qwen Code 免費且開源，但它是 BYOK——你自帶一個 DashScope（阿里雲百鍊）API key、一個 OpenAI 相容端點，或 ModelScope。阿里巴巴也提供一個固定費用的編碼套餐。無論哪種方式，Open Design 都絕不中轉你的憑證。

3. 03 Qwen Code 具體好在哪裡適合做設計？ +

   兩點：Qwen3-Coder 模型針對 agent 化編碼做了調優，於是 agent 會構建並自我糾正出響應式 UI；它們的超大上下文能一次性裝下整套設計系統和參考集。兩者都有幫助——但審美仍然來自你提供的設計系統、skill 和參考。

4. 04 Qwen Code 和 Gemini CLI 是一回事嗎？ +

   不是。Qwen Code 由 Google 的 Gemini CLI 改造而來——同源的開源血統——在解析器層面和提示詞上做了適配，以針對 Qwen3-Coder 模型調優。Open Design 兩者都支援，所以你能在不改設計工作流的前提下切換 agent。

5. 05 我怎麼把 Qwen Code 連到 Figma？ +

   在 ~/.qwen/settings.json 的 mcpServers 下新增 Figma MCP server。然後 Qwen Code 就能拉取真實的設計上下文——元件、變數、佈局資料——讓生成的程式碼貼合原始檔，而不是近似猜測。

6. 06 Open Design 和 Alibaba 或 Qwen 有關聯嗎？ +

   沒有。Qwen Code 是 Alibaba 的產品；Open Design 是一個獨立的開源專案，把它作為一等公民介面卡來支援。Qwen 是 Alibaba 的商標。

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

   安全——Open Design 本地優先、Apache-2.0。你的檔案、產物和 DESIGN.md 都留在你自己的倉庫裡，你的 DashScope 或 Qwen 憑證由你的 agent 直接使用，絕不經 Open Design 的伺服器路由。