用 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 服务器中转。