用 Hermes 做設計。

Hermes 究竟是什麼

Hermes 是 Nous Research 推出的開源（MIT）自主 AI agent。它持續執行在你自己的機器或伺服器上，讀取你的倉庫、編輯檔案、執行 shell 命令、搜尋網路，並且——這是關鍵——自主規劃並執行多步驟工作，把區域性委派給隔離的子 agent。它是一個自主 agent，而不是綁死在 IDE 裡的副駕。

對設計工作來說，有兩個特性格外突出。它是真正 agentic 的，所以你可以交給它一個目標，它會規劃、構建並驗證，而不是等你逐行指揮。它還不繫結供應商：你自帶金鑰，預設用 xAI Grok，但也可自由指向 OpenAI、Anthropic 或任何其他受支援的端點——由你掌控讓哪個模型來推理你的設計。

• Skill: Hermes 會構建並複用 skill——它從經驗中創造出的過程性記憶——這正是沉澱你的設計規範、tokens 和評審清單的天然之處，讓它們在多次執行間持續生效。
• 子 agent + 工具: 它會派生隔離的子 agent 來並行處理多條工作流，並自帶檔案、shell、網路和瀏覽器工具，因此無需離開終端就能收集參考素材、跑一套構建並驗證的閉環。
• 自帶金鑰: Hermes 預設用 xAI Grok，並通過 BYOK 支援 OpenAI、Anthropic、OpenRouter 及許多其他供應商——設定一個金鑰或走一遍 OAuth 流程，再挑選你的模型。

• 供應商：Nous Research
• 憑證：通過 BYOK 自帶的供應商金鑰——xAI（Grok，預設）、OpenAI 或 Anthropic——用 hermes auth add 新增
• 許可證：MIT，開源

為什麼自主、多供應商的 agent 適合做設計

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

• 自主規劃並執行: 因為 Hermes 會自主規劃、執行並委派，所以它能接過一個設計目標——還原這張參考、把它做成響應式——並朝它迭代，而不需要把每一步都講清楚。
• 帶上你信任的模型: 不繫結供應商的 BYOK 意味著你為手頭的活兒挑選推理模型：預設是 xAI Grok，想用 OpenAI 和 Anthropic 模型的長處時也能切——不被任何一家供應商的審美鎖死。
• 規範沉澱進 skill: Skill（再加上像 Figma 這樣的 MCP 伺服器）把 agent 指向你的 tokens、元件和真實規範，於是它針對一套品牌而非預設觀感來工作。

這是每一個 agent 都在教的同一課：Hermes 預設並沒有審美。當你給它約束時——一套設計系統、一個審美 skill 和具體的參考——它才產出好設計。Open Design 恰恰把這些輸入打包好了，這也是兩者契合的原因（下文詳述）。

從零為設計工作搭起 Hermes

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

# 1. 安裝 Hermes（Nous Research 提供的一行安裝指令碼）
curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash

# 2. 執行設定嚮導
hermes setup

# 3. 新增供應商並完成認證（BYOK）
#    預設是 xAI Grok；同樣支援 OpenAI / Anthropic
hermes auth add        # 新增供應商金鑰或走它的 OAuth 流程
hermes model           # 挑選供應商和模型（預設 grok-4.3）

# 4. 接入 Figma MCP 伺服器（可選，用於設計交付）
#    在 Hermes 的 MCP / 工具設定中配置它

• 編碼你的設計規則: 把你的 tokens、基礎元素和規範收進一個 Hermes skill 並把 agent 指向它們，讓產出貼合一套品牌，而不是退回千篇一律的觀感。
• 加上瀏覽器驗證: 接入 Playwright 或瀏覽器 MCP，讓 Hermes 在真實瀏覽器中渲染並跨斷點檢查其產出，而不僅僅是確認構建通過。

截圖轉 UI 的工作流

用 Hermes 做設計槓桿最大的閉環，是把一張參考圖變成可用、響應式的 UI，並迭代到匹配為止——讓這個自主 agent 規劃構建，並把自己的產出對照參考來比對。

1. 從你手頭最清晰的視覺參考起步——並納入多種狀態（桌面和移動、懸停、空態、載入），而不只是一張主視覺。
2. 在提示裡說具體；提示含糊，哪怕模型再強也只會產出千篇一律的 UI。
3. 把你的設計系統和規範放進一個 skill，並告訴 Hermes tokens 和標準基礎元素在哪裡。
4. 跑一個 dev server，讓 Hermes 在真實瀏覽器中渲染，調整到各斷點尺寸來檢查結果。
5. 讓 Hermes 把自己的實現對照截圖比對來迭代——而不只是確認它能構建。

把 Hermes 指向你的參考素材，並給出具體約束：

hermes
# 在提示裡：
> 使用本資料夾裡的 reference-desktop.png 和 reference-mobile.png。
  用 React + Vite + Tailwind + TypeScript 實現這個設計。
  複用我 skill 裡現有的設計系統元件和 tokens。
  匹配間距、佈局和層級；做成響應式。
  在瀏覽器裡渲染它，並迭代到跨斷點都與參考匹配為止。

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

Skill、子 agent 與供應商

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

• Skill: Hermes 會構建並複用 skill——從經驗中創造出的過程性記憶。它們是你設計規範的持久歸宿，在後續執行中被直接應用，而不必每次重新解釋。
• 子 agent 與 MCP: 它把工作委派給隔離的子 agent，並支援 MCP 伺服器——這是引入設計上下文與外部工具的可移植方式，其中最相關的是 Figma MCP 伺服器，它們跨 agent 通用，而不只服務於 Hermes。
• 供應商選擇: 因為 Hermes 不繫結供應商（預設 xAI Grok，通過 BYOK 用 OpenAI 和 Anthropic），你可以為任務匹配模型，而無需重建你的工作流。

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

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

做設計沒有唯一贏家——每個 agent 各有不同長處，經驗豐富的團隊會把它們疊著用。一份公允的小結：

社群反覆給出的結論是：審美來自人——沒有 skill、參考和約束，它們全都會退回千篇一律的觀感。那才是真正要解決的問題——它是設計工具形態的，而非模型形態的。

坑，以及如何避開“AI 流水貨”觀感

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

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

注意，每一項緩解措施都是在給 agent 一套精選的設計上下文。手工地、逐專案地維護這套上下文，正是 Open Design 替你省掉的苦力活。

在 Open Design 中用 Hermes 做設計

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

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

同一個 Hermes agent、同一個金鑰——再加上圍繞它的一套真實、可移植、開源的設計工作流。它本地優先、採用 Apache-2.0，所以你的工作和憑證沒有任何東西會離開你的機器。

常見問題

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

   能——只要上下文裡有一個審美 skill、一套設計系統和真實的參考圖，Hermes 就能產出生產級、響應式的 UI；作為一個自主 agent，它還能自行渲染並對照參考驗證產出。沒有那套上下文，它往往會退回千篇一律的觀感，而這正是 Open Design 填補的落差。

2. 02 Hermes 用哪些模型和金鑰？ +

   Hermes 不繫結供應商，且自帶金鑰。它預設用 xAI Grok（例如 grok-4.3），同時支援 OpenAI、Anthropic、OpenRouter 及許多其他供應商——你用 hermes auth add 新增供應商金鑰（或走它的 OAuth 流程），用 hermes model 挑選模型。Open Design 從不代理你的憑證。

3. 03 Hermes 具體好在哪，讓它適合做設計？ +

   兩點：它是真正自主的，所以會規劃、構建並驗證 UI，而不是等你逐行指揮；它還不繫結供應商，所以你能跑你信任的推理模型。兩點都有幫助——但審美仍然來自你提供的設計系統、skill 和參考。

4. 04 做前端設計，選 Hermes 還是 Claude Code？ +

   兩者都很強。Claude Code 以具體、懂程式碼庫的設計決策著稱；Hermes 的優勢是自主規劃並執行加上供應商選擇——你甚至可以讓 Hermes 指向一個 Anthropic 金鑰。很多團隊兩者都用——Open Design 讓你切換 agent 而無需改動你的設計工作流。

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

   在 Hermes 的工具配置裡新增一個 Figma MCP 伺服器。Hermes 隨後就能拉取真實的設計上下文——元件、變數、佈局資料——使生成的程式碼與源頭匹配，而不是近似還原。

6. 06 Open Design 隸屬於 Nous Research 嗎？ +

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

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

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