用 OpenCode 做設計。

OpenCode 究竟是什麼

OpenCode 是一個為終端打造的開源 AI 編碼 agent，由 SST 背後的團隊（Anomaly Innovations）維護。它會讀取你的程式碼倉庫、執行命令、編輯檔案，並與大語言模型對話——但和被廠商繫結的 agent 不同，它本身不自帶模型。你把它指向任意你想用的 provider 和模型，並自帶 key。

它以終端介面（TUI）執行，並在同一引擎之上提供桌面應用和 IDE 擴充套件。底層採用客戶端/服務端架構，所以真正幹活的 agent 與你驅動它的介面是解耦的。它內建 build 和 plan 兩個 agent，用 Tab 鍵切換。

• 與模型無關: 模型和 provider 來自 models.dev 這個開放目錄。你在 opencode.json 裡用 provider/model-id 字串配置，並可禁用不想載入的 provider——所以同一套設計工作流可以跑在 Anthropic、OpenAI、Google、OpenRouter、本地模型等之上。
• 指令檔案: OpenCode 會讀取專案裡的 AGENTS.md 檔案（跨工具的通用標準，也相容 CLAUDE.md）作為專案規則——這正是編碼你設計約定的天然位置。執行 /init 即可生成一個。
• 可擴充套件: 它支援 LSP 整合、MCP server、主題、快捷鍵和自定義命令，還有可分享的會話連結用於協作。

• 維護方：SST / Anomaly Innovations（開源專案）
• 憑證：你自己的模型 provider API key（BYOK，無廠商鎖定）
• 許可：MIT，開源

為什麼開放、任意模型的 agent 適合做設計

OpenCode 不像廠商 agent 那樣有某一個“設計模型”——而這恰恰是它的優勢。因為與模型無關且開源，你可以在同一套設計工作流上執行當下前端最強的那個模型，之後隨時更換，或退回到本地模型，全程不用改配置。

但光選對模型並不能買來審美。和所有編碼 agent 一樣，除非你給它約束，否則 OpenCode 也會產出套路化的 UI。好的設計產出來自你提供的三項輸入。

• 一套設計系統: 真實的 tokens、基礎元件和約定，讓 agent 複用，從而讓產出貼合某個品牌，而不是退回到通用的觀感。
• 一個審美 skill: 一個精選的 skill，強制真正的審美——剋制的動效、品牌優先的層級、最多兩種字型一種強調色——並讓 agent 在動手前先定一個方向。
• 具體的參考圖: 真實的參考圖，以及多種狀態（桌面和移動、hover、空態、載入態），而不是隻有一張主視覺。

結論：OpenCode 給了你模型自由，但審美仍來自一套精選的設計上下文。Open Design 恰好把這些輸入打包好，這也是兩者契合的原因——它們都是開源、都本地優先（下文詳述）。

從零配置 OpenCode 做設計

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

# 1. 安裝 OpenCode
curl -fsSL https://opencode.ai/install | bash
# 或：npm i -g opencode-ai@latest
# 或：brew install sst/tap/opencode

# 2. 在專案裡啟動 TUI，然後認證你的 provider
opencode          # 然後執行 /login，選擇 provider 並貼上你的 key

# 3. 生成專案上下文
opencode          # 在專案裡執行 /init 生成 AGENTS.md

# 4. 選擇你的模型（任意 provider，經 models.dev）
#    在 opencode.json 裡設定 "provider/model-id"，或在 TUI 裡切換

# 5. 新增 MCP server（可選，比如用於設計交付）
#    在 opencode.json 的 "mcp" 欄位下配置

• 編碼你的設計規則: 把你的 tokens、基礎元件和約定放進 AGENTS.md（或從中引用的 DESIGN.md），讓產出貼合品牌而非退回通用觀感。opencode.json 裡的 instructions 選項可以用 glob 指向更多規則檔案。
• 選一個有能力的模型: 因為 OpenCode 與模型無關，可以為設計這一遍挑選當下前端最強的 provider/模型——而工作流的其餘部分保持不變。

截圖轉 UI 的工作流

用任何 agent 做設計，槓桿最高的迴路都是：把一張參考圖變成可用、響應式的 UI，並反覆迭代直到匹配。同樣的五步在 OpenCode 裡也適用。

1. 從你手頭最清晰的視覺參考開始——幷包含多種狀態（桌面和移動、hover、空態、載入態），而不只是一張主視覺。
2. 提示詞要具體；含糊的提示會產出套路化的 UI。
3. 準備好一套設計系統，並告訴 OpenCode tokens 和規範基礎元件在哪裡（寫在 AGENTS.md 裡）。
4. 跑一個 dev server，讓 agent 在真實瀏覽器中渲染，並切換到各斷點檢查結果。
5. 讓 OpenCode 把它的實現對照截圖來迭代——而不只是確認能構建透過。

在 TUI 裡用 @ 引用檔案會對工作目錄做模糊搜尋，用開頭的 ! 內聯執行 shell 命令，用 / 命令驅動各種操作。然後用具體約束來提示：

opencode
# 在 TUI 裡：
> @reference-desktop.png @reference-mobile.png
  用 React + Vite + Tailwind + TypeScript 實現這個設計。
  複用 AGENTS.md 裡我現有的設計系統元件和 tokens。
  匹配間距、佈局和層級；做到響應式。
  執行 dev server，在瀏覽器中開啟，並反覆迭代
  直到 UI 在各斷點上都與參考圖匹配。

提示詞保持小而聚焦，好的迭代就提交、壞的就回退（回退時告訴 OpenCode），讓每一遍都建立在一個乾淨的基礎上。

AGENTS.md、MCP 與可分享會話

三個擴充套件點讓 OpenCode 在持續的設計工作中真正好用，而且它們都能幹淨地對映到一套開放的設計工作流上。

• AGENTS.md 規則: 專案規則放在倉庫根目錄的 AGENTS.md（或全域性規則放在 ~/.config/opencode/AGENTS.md）。它是你設計約定的長期歸宿，每次執行都會讀取，併相容其他 agent 使用的 CLAUDE.md 檔案。
• MCP server: OpenCode 同時支援本地（命令）和遠端（URL）MCP server，在 mcp 欄位下配置——這是把設計上下文和外部工具引入進來的可移植方式，跨 agent 通用，而不只服務於 OpenCode。
• 可分享會話: /share 命令會為一段會話建立公開連結，用於協作或評審，/unshare 則收回它——很適合為一遍設計獲取反饋。

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

OpenCode vs Codex vs Claude Code vs Cursor 做設計

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

社群反覆得出的結論是：審美來自人——所有這些 agent 在沒有 skill、參考和約束時都會退回到通用觀感。這才是真正要解決的問題——它是設計工具形狀的，不是模型形狀的，而這恰恰說明了為什麼像 OpenCode 這樣的開放 agent 與一個開放的設計層配合得如此之好。

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

對 AI 生成設計最常見的吐槽是它看起來很套路——柔和漸變、懸浮面板、過大的圓角、誇張的陰影，一種 Inter 字型加紫色的味道，“一看就是 AI 做的”。其他被報告的問題還包括移動端佈局錯亂、指令文字漏進了 UI 文案。這些都不是 OpenCode 獨有的；它們是任何 agent 在缺少精選設計上下文時都會發生的事。

• 加一個審美 skill: 一個精選的設計 skill 會強制 agent 定下一個真正的方向，而不是預設觀感。
• 在真實瀏覽器中驗證: 讓它跨斷點渲染並自檢，這樣佈局就不會在移動端悄悄崩掉。
• 提供 tokens 和參考: 真實的設計 tokens 和參考截圖是對產出質量影響最大的單一槓杆。
• 把規則寫進 AGENTS.md: 把“不要 hero 卡片、最多兩種字型、品牌優先層級”這類規則放在 agent 每次都會讀到的地方。

注意到了嗎：每一項緩解措施都是關於給 agent 一套精選的設計上下文——無論你跑哪個模型。靠手工逐專案維護這套上下文，正是 Open Design 幫你免除的苦活。

在 Open Design 中用 OpenCode 做設計

Open Design 正是上面那套工作流一直在呼喚的開源設計層。它把 OpenCode 當作一等介面卡，併為它套上一套精選的 skill 與設計系統庫、一條結構化的渲染管線，以及一個本地桌面 UI——讓那些讓任何 agent 變好的設計上下文從第一次執行就在那裡，而不是每次都手工拼湊。兩個專案都是開源、都本地優先，這讓它們的搭配水到渠成。

1. 安裝 Open Design，並選擇 OpenCode 作為你的 agent。
2. 用你自己的模型 provider API key（BYOK）認證——憑證留在你的機器上，絕不經我們代理。
3. 選擇任意 provider 和模型，再加上一套設計系統和一個 skill，然後生成審美一致的 deck、原型和落地頁。
4. 每個產物和 DESIGN.md 檔案都存在你自己的倉庫裡，而不是託管雲端。

同一個 OpenCode agent、同樣的模型自由——外加一套真正可移植、開源的設計工作流。它本地優先、採用 Apache-2.0 許可，所以你的工作和憑證都不會離開你的機器。

常見問題

1. 01 OpenCode 真的能做設計嗎？ +

   能——當上下文裡有審美 skill、設計系統和真實參考圖時，OpenCode 能產出生產級、響應式的 UI，並能在瀏覽器中驗證。因為它與模型無關，你可以執行當下前端最強的那個模型。缺少這套精選上下文時，它會傾向於退回到通用觀感，而這正是 Open Design 補上的缺口。

2. 02 用 OpenCode 做設計該選哪個模型？ +

   你喜歡哪個都行——OpenCode 經 models.dev 與 provider 無關，所以你可以在同一套工作流背後執行 Anthropic、OpenAI、Google、OpenRouter 或本地模型，並隨時切換。設計產出的質量更多取決於你的 skill、設計系統和參考，而非單看模型。

3. 03 Open Design 是 OpenCode（SST）團隊做的嗎？ +

   不是。Open Design 是一個獨立的開源專案，把 OpenCode 整合為一個 agent。它用一套本地優先、開源的 skill 與設計系統庫來補足 OpenCode。

4. 04 用 OpenCode 做設計需要什麼特殊訂閱嗎？ +

   不需要——OpenCode 是 BYOK。你自帶模型 provider 的 API key，Open Design 絕不代理你的憑證，也沒有廠商鎖定。

5. 05 前端設計選 OpenCode、Codex 還是 Claude Code？ +

   都很強，很多團隊會疊著用。OpenCode 的優勢在於完全開源且與模型無關；Codex 擅長委託式、沙箱化構建；Claude Code 以具體、對程式碼庫有感知的設計決策著稱。Open Design 讓你切換 agent 而不改變你的設計工作流。

6. 06 如何為設計上下文擴充套件 OpenCode？ +

   把規則寫進 AGENTS.md，在 mcp 欄位下新增 MCP server 以引入可移植工具和設計上下文，並用可分享會話來做評審。Open Design 直接提供一套精選的 skill 與設計系統庫，讓你省去逐專案的配置。

7. 07 Open Design 與 OpenCode 或 SST 有關聯嗎？ +

   沒有。OpenCode 是由 SST（Anomaly Innovations）維護的開源專案；Open Design 是一個獨立的開源專案，把它作為一等介面卡來支援。

8. 08 我的檔案和憑證安全嗎？ +

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