用 Kilo Code 做設計。

Kilo Code 究竟是什麼

Kilo Code 是由 Kilo Code, Inc. 打造的開源 AI 編碼 agent。它以 VS Code 擴充套件、JetBrains 系列 IDE 中的外掛以及命令列介面的形式執行——讀取你的程式碼倉庫、編輯檔案、執行命令，並從自然語言任務出發去規劃和驗證工作，而不只是補全幾行程式碼。它最鮮明的特點是模型無關：由你選擇驅動它的模型，並自帶你的供應商金鑰。

對設計工作而言，有兩點格外突出。因為它模型無關，你可以讓它接入最能讀懂參考截圖、最會推斷佈局的強力視覺模型。又因為它開源且支援 BYOK，你可以精確檢視傳送了哪些上下文，並把憑證與成本牢牢掌握在自己手中。

• Agent 模式: Kilo 自帶幾種專門模式——Architect 負責規劃、Code 負責構建、Debug 負責修復、Ask 負責答疑——還可自定義模式，於是你可以先規劃設計，再在各自專注的環節裡實現它。
• 自定義規則 + MCP: 它會讀取專案級的自定義規則以保留持久上下文，並支援 MCP 伺服器（還有 MCP 市場），於是你可以接入外部上下文，比如一份線上的 Figma 檔案或設計工具。
• 自帶金鑰: Kilo 在眾多供應商之間支援 BYOK——Anthropic、OpenAI、Google、OpenRouter 等等——你也可以使用 Kilo 自家的閘道器，它按供應商成本提供 500 多個模型。

• 供應商：Kilo Code, Inc.（開源）
• 憑證：你自己的供應商 API 金鑰（BYOK——Anthropic、OpenAI、Google、OpenRouter 等）或 Kilo 自家閘道器
• 許可：開源

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

Kilo Code 在設計上的優勢來自開放性和模型選擇權——但和每一個 agent 一樣，品味仍然得由人來提供。

• 天生模型無關: 因為模型由你來選，你可以用最能讀懂參考截圖的視覺模型來驅動 Kilo——並在出現更好的模型時隨時切換，無需改動工作流。
• 開放且可審查: Kilo 是開源的，所以你能精確看到傳送了哪些上下文和提示詞——當你希望 agent 複用你真實的設計原語、而不是憑空造出一次性樣式時，這一點很有用。
• 把規範寫進自定義規則: 專案級自定義規則（再加一個 Figma 的 MCP 伺服器）把 agent 指向你的 tokens、元件和真實規格，於是它是在對照一個品牌工作，而不是套用預設外觀。

這個道理每個 agent 都在教我們：Kilo Code 預設並沒有品味。只有當你給它約束——一套設計系統、一個審美 skill 和具體的參考圖——它才能產出優秀的設計。Open Design 恰好把這些輸入打包好了，這正是兩者契合的原因（下文詳述）。

從零開始配置 Kilo Code 做設計

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

# 1. Install the Kilo Code extension from the VS Code
#    (or JetBrains) marketplace, or install the CLI.

# 2. Open your project and sign in / add a provider key
cd your-project
kilo              # connect your provider (BYOK) or Kilo's gateway

# 3. Add project context
#    create custom rules for this project's design conventions

# 4. Wire the Figma MCP server (optional, for design handoff)
#    add it from the MCP marketplace / MCP settings

• 把你的設計規則編碼下來: 把你的 tokens、原語和規範放進 Kilo 的自定義規則，並把 agent 指向它們，讓輸出對齊一個品牌，而不是預設套上千篇一律的外觀。
• 加上瀏覽器驗證: 接入 Playwright 或瀏覽器 MCP，讓 Kilo 在真實瀏覽器中渲染，並跨各個斷點檢查輸出，而不只是確認構建通過。

截圖到 UI 的工作流

用 Kilo Code 槓桿最高的設計迴路，是把一張參考圖變成可用的響應式 UI，並不斷迭代直到它匹配為止——藉助一個視覺模型把輸出對照參考圖反覆比對。

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

用 Architect 模式規劃構建，然後切到 Code 模式，附上你的參考圖並給出具體約束：

# Plan in Architect mode, then build in Code mode:
> Implement this design from @reference-desktop.png and
  @reference-mobile.png in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens
  from the custom rules.
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the
  references across breakpoints.

讓提示詞保持小而專注，把好的迭代提交、把壞的回退（回退時告訴 Kilo），這樣每一輪都建立在一個乾淨的基礎之上。

模式、自定義規則與 MCP

三個擴充套件點讓 Kilo Code 在持續的設計工作中切實可用，而這三者都能幹淨利落地對映到一套開放的設計工作流上。

• 模式（Architect → Code）: 在 Architect 模式下規劃一個頁面的結構，然後在 Code 模式下實現它，再在 Debug 模式下修復問題——把設計意圖與實現分開。自定義模式還能讓你編碼出一套自己的設計評審環節。
• 自定義規則: 專案級自定義規則是你設計規範的長久歸宿——tokens、原語和評審清單——每次執行都會讀取，讓 agent 對照你的品牌工作。
• MCP 伺服器: Kilo 通過它的市場支援 MCP 伺服器——這是引入設計上下文和外部工具的可移植方式，最相關的是一個 Figma 的 MCP 伺服器，它們跨 agent 通用，不止限於 Kilo。

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

做設計：Kilo Code 對比 Codex、Claude Code、Cursor、Gemini CLI

設計工作沒有單一贏家——每個 agent 都各有所長，有經驗的團隊會把它們疊加使用。一份公允的概括：

社群反覆得出的結論是：品味來自人類——它們在缺少 skill、參考圖和約束時，都會預設走向千篇一律的審美。這才是真正要解決的問題——而且它的形狀是設計工具，而非模型。

陷阱，以及如何避開“AI 流水線感”的樣子

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

• 加一個審美 skill: 一個精選的設計 skill 會逼著 agent 投入一個真實的方向，而不是套用預設外觀。
• 在真實瀏覽器中驗證: 用一個視覺模型跨斷點渲染並自檢，這樣佈局就不會在移動端悄無聲息地崩壞。
• 提供 tokens 和參考圖: 真實的設計 tokens 和參考截圖，是撬動輸出質量最大的那根槓桿。
• 把規則編碼進自定義規則: 把“不要 hero 卡片、最多兩種字型、品牌優先的層級”這類風格規則放在 agent 每次執行都會讀到的地方。

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

在 Open Design 中用 Kilo Code 做設計

Open Design 正是上文那套工作流一直在呼喚的、開源的設計層。它把 Kilo Code 當作一等公民介面卡，並在其外圍包上一套精選的 skill 與設計系統庫、一條結構化的渲染流水線和一個本地桌面 UI——於是讓 Kilo 出色的那份設計上下文從第一次執行起就在那裡，而不必每次都手動拼湊。兩者都是開源、本地優先的，這讓它們的搭配水到渠成。

1. 安裝 Open Design，並選擇 Kilo Code 作為你的 agent。
2. 用你自己的供應商金鑰（BYOK）或 Kilo 的閘道器進行認證——憑證留在你的機器上，絕不經我們中轉。
3. 選定一套設計系統和一個 skill，然後以一致的品味生成演示稿、原型和落地頁。
4. 每一份產物和 DESIGN.md 檔案都存在你自己的倉庫裡，而不是託管的雲端。

還是同一個 Kilo Code agent、同一套金鑰——只是外圍多了一套真實、可移植、開源的設計工作流。它本地優先且開源，所以關於你工作或憑證的一切都不會離開你的機器。

常見問題

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

   能——只要上下文裡有一個審美 skill、一套設計系統和真實的參考圖，Kilo Code 就能產出生產級的響應式 UI，再由一個視覺模型把輸出對照參考圖來驗證。缺了這份上下文，它往往會預設走向千篇一律的外觀，而這正是 Open Design 填補的空白。

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

   Kilo Code 是開源的，安裝免費。你自帶供應商 API 金鑰（BYOK）並直接向該供應商付費，或者按供應商成本使用 Kilo 自家閘道器。無論哪種方式，Open Design 都絕不中轉你的憑證。

3. 03 Kilo Code 在設計上具體好在哪裡？ +

   它模型無關且開源，所以你可以用最能讀懂參考截圖的視覺模型來驅動它，精確檢視傳送了哪些上下文，並把成本與憑證掌握在自己手中。品味仍然來自你提供的設計系統、skill 和參考圖。

4. 04 前端設計選 Kilo Code 還是 Claude Code？ +

   兩者都很強。Claude Code 以具體、對程式碼庫有感知的設計決策著稱；Kilo Code 的優勢在於它開源、模型無關且支援 BYOK，模型由你來選。許多團隊兩者並用——Open Design 讓你在不改動設計工作流的前提下切換 agent。

5. 05 我該如何把 Kilo Code 連到 Figma？ +

   從 Kilo 的 MCP 市場或 MCP 設定裡新增一個 Figma 的 MCP 伺服器。這樣 Kilo 就能拉取真實的設計上下文——元件、變數、佈局資料——讓生成的程式碼與源頭一致，而不是近似還原。

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

   沒有。Kilo Code 是 Kilo Code, Inc. 的產品；Open Design 是一個獨立的開源專案，把它作為一等公民介面卡來支援。兩者恰好都是開源的，但它們是各自獨立的專案。

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

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