用 Aider 做設計。

Aider 究竟是什麼

Aider 是一個開源（Apache-2.0）的 AI 結對程式設計工具，執行在你的終端裡。它讀取你已有的程式碼庫，為上下文對映整個倉庫，就地編輯檔案，並自動為每次改動配上一條合理的提交資訊 —— 於是你可以用早已熟悉的 git 工具來 diff、管理和撤銷 AI 的工作。它支援 100 多種程式語言，既能開新專案，也能在已有專案上繼續構建。

對設計工作而言，有兩個特性格外突出。Aider 是模型無關的：你自帶 key，把它接到幾乎任何 LLM —— Claude、GPT-4o、DeepSeek、Gemini 或本地模型 —— 所以你永遠不會被鎖死在某一家供應商上。而在 GPT-4o、Claude 這類支援視覺的模型上，它能讀取影像檔案，把一張參考截圖變成提示詞的一部分。

• 規範檔案: Aider 會讀取一個 CONVENTIONS.md 檔案，你用 /read CONVENTIONS.md（或 aider --read CONVENTIONS.md）載入它 —— 這是把你的設計規範、tokens 和評審清單編碼為只讀上下文的天然之處。
• git 原生的改動: 每次改動都會應用到你倉庫裡的檔案上並自動提交，於是每一輪設計迭代都能用熟悉的 git 工具來審閱和回退。
• 自帶你的模型: 用你自己的 API key 接入 OpenAI、Anthropic、DeepSeek、Gemini 或本地模型；Aider 不繫結單一廠商，也不繫結某個託管後端。

• 供應商：Aider（Aider-AI，開源）—— 模型無關
• 憑證：你自己的供應商 API key —— BYOK（OpenAI、Anthropic、DeepSeek、Gemini 或本地模型）
• 許可證：Apache-2.0，開源

為什麼一個模型無關、git 原生的工具適合做設計

Aider 在設計上的優勢，來自它與你的倉庫以及你所選模型協作的方式 —— 但與所有 agent 一樣，品味仍然得由你來提供。

• 模型無關，BYOK: 挑一個最適合你任務和預算的、設計表現最好的模型 —— Claude、GPT-4o、DeepSeek、Gemini —— 並隨意切換而不必改動你的工作流，全程用你自己的 key。
• git 原生的迭代: 自動提交讓每一輪設計都成為一段可回退、可審閱的 diff，於是你總是在一個乾淨的基線上迭代，而不是面對一堆未追蹤的散亂改動。
• 把規範放進 CONVENTIONS.md: 一個 CONVENTIONS.md（以只讀方式載入）把 agent 指向你的 tokens、元件和規則，於是它對照的是一套品牌，而不是某種預設觀感。

這個教訓和每個 agent 教給我們的一樣：Aider 預設並沒有品味。只有當你給它約束 —— 一套設計系統、一個審美 skill 和具體的參考 —— 它才會產出好設計。Open Design 恰恰把這些輸入打包了起來，這正是二者契合的原因（下文詳述）。

從零搭建用於設計的 Aider

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

# 1. 安裝 Aider（推薦的安裝器；Python 3.8–3.13）
python -m pip install aider-install
aider-install
# 或用 pipx：pipx install aider-chat

# 2. 在你的 git 專案裡啟動它，並自帶你的 key
cd your-project
aider --model sonnet --api-key anthropic=<your-key>
# 或：aider --api-key openai=<your-key>   （也支援 deepseek=、gemini=）

# 3. 把你的設計規範作為只讀上下文載入進來
aider --read CONVENTIONS.md

# 4. 新增一張參考圖（在支援視覺的模型上）
#    在對話裡：/add reference-desktop.png

• 把你的設計規則編碼下來: 把你的 tokens、基礎元件和規範放進 CONVENTIONS.md 並以只讀方式載入，於是產出貼合一套品牌，而不是退回某種千篇一律的觀感。
• 加上瀏覽器驗證: 跑一個開發伺服器，讓 Aider 在真實瀏覽器裡渲染，並跨斷點檢查它的產出，而不是隻確認構建通過。

截圖到 UI 的工作流

用 Aider 做設計，槓桿最高的迴圈就是把一張參考圖變成可用、響應式的 UI，並反覆迭代直到匹配 —— 用一個支援視覺的模型把產出與參考圖對比，每一輪都提交到 git。

1. 從你手頭最清晰的視覺參考出發 —— 並且包含多種狀態（桌面和移動端、懸停、空狀態、載入中），而不只是一張大圖。
2. 提示詞要具體；含糊的提示詞即便配上強模型也只會產出千篇一律的 UI。
3. 把你的設計系統和規範放進 CONVENTIONS.md，並告訴 Aider tokens 和標準基礎元件在哪裡。
4. 跑一個開發伺服器，在真實瀏覽器裡檢查渲染結果，並縮放到各個斷點。
5. 迭代的方式是讓 Aider 把它的實現與截圖對比 —— 而不只是確認它能構建通過。

在支援視覺的模型上，用 /add 新增一張圖（或用 /paste 從剪貼簿貼上），然後給出具體的約束：

aider --model gpt-4o --read CONVENTIONS.md
# 在對話裡：
> /add reference-desktop.png
> /add reference-mobile.png
> Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from CONVENTIONS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  I'll render it in the browser and tell you what to fix until it matches
  the references across breakpoints.

讓提示詞保持小而聚焦。因為 Aider 會為每次改動提交一次，你就能留住好的迭代，並用 git（或 /undo）回退糟糕的那些 —— 於是每一輪都建立在一個乾淨的基線上。

CONVENTIONS.md、影像與命令

有三項能力讓 Aider 在持續的設計工作中切實可用，而這三項都能幹淨地對映到一套開放的設計工作流上。

• CONVENTIONS.md 上下文: 用 /read CONVENTIONS.md 或 aider --read CONVENTIONS.md 載入編碼與設計規範，或在 .aider.conf.yml 裡設定 read: CONVENTIONS.md 讓它每次執行都載入。這是安放你 tokens、基礎元件和規則的長久之所。
• 影像與網頁: 在支援視覺的模型上，用 /add 新增一個影像檔案，或用 /paste 從剪貼簿貼上，給 Aider 一張真實的參考；/web <url> 會把一個頁面的文本抓進對話作為額外上下文。
• 對話內命令: 諸如 /add 把檔案納入上下文、/read 引入只讀參考、/undo 回退上一次提交之類的命令，讓它無需離開終端就能收集參考並跑完驗證迴圈。

這些都是可移植、倉庫原生的能力 —— 正是 Open Design 旨在去編排、而非每個專案重造一遍的那類東西。

做設計：Aider vs Codex vs Claude Code vs Cursor vs Gemini CLI

在設計工作上沒有唯一的贏家 —— 每個 agent 各有所長，有經驗的團隊會把它們疊著用。一份公允的總結：

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

陷阱，以及如何避開那股“AI 流水貨”味

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

• 加一個審美 skill: 一個精選的設計 skill 會迫使 agent 錨定一個真正的方向，而不是那種預設觀感。
• 在真實瀏覽器裡驗證: 跨斷點渲染並自檢，讓佈局不會在移動端悄悄崩掉 —— 在支援視覺的模型上，把截圖再喂回去。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖，是撬動產出質量的最大單一槓桿。
• 把規則編碼進 CONVENTIONS.md: 把“不要大圖卡片、最多兩種字型、品牌優先的層級”這類風格規則，放在 agent 每次執行都會讀到的地方。

請注意，每一項對策的核心都是給 agent 一份精選的設計上下文。而手工、逐專案地維護這份上下文，正是 Open Design 替你免去的苦差。

在 Open Design 裡用 Aider 做設計

Open Design 正是上面那套工作流一直在呼喚的那層開源設計層。它把 Aider 當作一等介面卡，並用一套精選的 skill 與設計系統庫、一條結構化的渲染管線和一個本地桌面 UI 把它包裹起來 —— 於是讓 Aider 變好的那份設計上下文從第一次執行起就已就位，而不是每次都手工拼湊。二者都是開源、本地優先的，這讓它們的搭配天然契合。

1. 安裝 Open Design 並選擇 Aider 作為你的 agent。
2. 用你自己的供應商 API key 認證（BYOK）—— OpenAI、Anthropic、DeepSeek 或 Gemini；憑證留在你的機器上，絕不經我們中轉。
3. 挑一套設計系統和一個 skill，然後以一致的品味生成幻燈片、原型和落地頁。
4. 每一份產物和 DESIGN.md 檔案都存活在你自己的 git 倉庫裡，而不是某個託管雲端。

同一個 Aider agent、同一把 key —— 外加一套圍繞它的、真實、可移植、開源的設計工作流。它本地優先且開源，所以你的工作和憑證沒有任何東西會離開你的機器。

常見問題

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

   能 —— 只要上下文裡有一個審美 skill、一套設計系統和真實的參考圖，Aider 就能產出生產級、響應式的 UI；在支援視覺的模型上，它會讀取截圖來把產出與參考對照驗證。缺了這份上下文，它就容易退回到一種千篇一律的觀感，而這正是 Open Design 填補的缺口。

2. 02 做設計時我能用哪些模型搭配 Aider？ +

   Aider 是模型無關的。你自帶 API key，接入幾乎任何 LLM —— Claude、GPT-4o、DeepSeek、Gemini 或本地模型。做基於影像的設計工作時，請用 GPT-4o 或 Claude 這類支援視覺的模型。Open Design 絕不會中轉你的憑證。

3. 03 Aider 究竟好在哪裡、特別適合做設計？ +

   兩點：它是模型無關的，所以你能挑出最擅長你這項任務設計的模型；它是 git 原生的，會提交每一次改動，於是每一輪設計迭代都可審閱、可回退。兩點都有幫助 —— 但品味仍然來自你提供的設計系統、skill 和參考。

4. 04 Aider 會編輯我的檔案並提交到 git 嗎？ +

   會。Aider 直接在你的倉庫裡編輯檔案，並自動為每次改動配上一條合理的提交資訊，於是你可以用早已熟悉的 git 工具來 diff、管理和撤銷 AI 的工作。

5. 05 我該如何把我的設計規範交給 Aider？ +

   建立一個寫有你 tokens、基礎元件和規則的 CONVENTIONS.md，然後用 /read CONVENTIONS.md 或 aider --read CONVENTIONS.md 以只讀方式載入它（或在 .aider.conf.yml 裡設定 read: CONVENTIONS.md 讓它每次執行都載入）。這樣 Aider 對照的就是你的品牌，而不是某種預設觀感。

6. 06 Open Design 和 Aider 有關聯嗎？ +

   沒有。Aider 是一個獨立的開源專案（Aider-AI）；Open Design 是另一個獨立的開源專案，把 Aider 作為一等介面卡來支援。二者並無關聯。

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

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