延伸阅读
Hermes 延伸阅读
使用 Hermes 进行设计的教程、文档和演示，均列于已发布的指南中。
Hermes 
OpenDesign 用 Hermes
在 OpenDesign
做设计。
如何在 OpenDesign 中使用 Hermes 设计界面：一份你在执行前批准的计划、由你持有的服务商密钥、一个从 brief 到已审阅文件的支持收件箱任务，以及开始之前需要了解的限制。
从 brief 到界面01 / Hermes
您带来想法↗
“一个由 Agent
规划、由我审批的支持收件箱。”
一个完整的 Hermes 设计任务
一个 Hermes 设计任务，从 brief 到界面
完整展示一个任务：你交出的 brief 与约束条件、返回的产物，以及在完成之前仍需运行的检查。下方界面是为本页制作的示例说明，并非记录下来的 Hermes 运行结果。
1设计 Brief 与约束条件
Brief为一个小团队设计一个支持收件箱：带优先级的对话列表、带建议回复的会话视图，以及快捷操作。先规划布局，再执行。桌面端与手机端。
- 设计系统OpenDesign 纸感画布：Albert Sans，单一绿色强调色
- 断点1440px 桌面端与 390px 移动端，无横向滚动
- 交互筛选、切换会话、分配、延后、回复
- 输出一个自包含的 HTML 文件，带有稳定的
data-od-id挂钩
2分工：你、Hermes 与 OpenDesign
- 你
撰写 brief，选择设计系统并定义验收标准。
- Hermes
规划布局，编写 HTML、CSS 和 JavaScript，并按要求进行修改。
- OpenDesign
提供设计系统与 skill，渲染预览，并将每个版本作为文件存储在项目中。
- 审查
在交付前，检查视觉层级、8px 网格上的间距、两个断点以及每一项交互。
3Hermes 产物：1440px 与 390px 下的支持收件箱
4交付前审查
Layout
网格与间距
列表与会话基于 8px 网格；列表列保持固定宽度，主题不会重排。
Hierarchy
视觉层级
发件人和主题在前，预览在后；强调色仅用于标记紧急邮件。
Responsive
移动端布局
列表在前，点按展开会话；筛选器变为分段开关。
Interaction
交互检查
筛选出紧急邮件，打开一个会话，将其指派出去，发送建议的回复。
Fit
Hermes 适合什么任务，不适合什么任务
Hermes 适合的场景
- 自主规划与执行。它进行规划、构建，并将 UI 工作委派给子 Agent，将设计目标转化为可运行的响应式标记，并检查结果。
- 与提供方无关的 BYOK。默认使用 xAI Grok，同时支持 OpenAI、Anthropic 等众多提供方——根据任务匹配推理模型，无供应商锁定。
- Skill + MCP。可复用的 skill 承载您的约定；Figma MCP 服务器将真实的设计上下文带入代码。
- 开放且可自托管。采用 MIT 许可，可在您自己的机器上运行，无遥测、无云依赖。
选择其他工作流的场景
- 你需要可编辑的矢量文件。 产物是 HTML，而非可编辑的设计文档。请查看其他矢量工作流以获取所需的资源格式。
- 没有参考图也没有约束条件。 缺少设计系统或示例时，输出往往趋于千篇一律；请先写好 brief。
- 您还没有此 Agent 所需的凭据。需要：通过 BYOK 提供的提供方密钥——xAI（Grok，默认）、OpenAI 或 Anthropic。OpenDesign 不提供也不代理凭据。
- 您的团队使用 Grok 或 OpenCode 工作。这些 Agent 有各自的页面；工作空间相同，设置方式不同。参见相关 Agent。
兼容性
开始前需要满足的 Hermes 要求
本指南涉及通过 OpenDesign 桌面应用连接的 Hermes。已发布参考资料的核对日期为 2026 年 9 月 6 日。
工具范围Hermes，由 Nous Research 出品
Hermes 是 Nous Research 开发的开源（MIT）自主终端 Agent。它持续运行在你自己的机器上，读取你的代码库、编辑文件、运行命令，并将多步骤工作规划并委派给独立的子 Agent。本页介绍的是通过 OpenDesign 使用 Hermes 设计界面，而非 Hermes 自身的界面。OpenDesign 的设置说明列出了可用的 Agent。
账户与身份验证通过 BYOK 提供的厂商密钥——xAI（Grok，
通过 BYOK 提供的厂商密钥——xAI（Grok，默认）、OpenAI 或 Anthropic。使用你自己的厂商密钥（BYOK）进行身份验证——默认为 xAI Grok，或使用 OpenAI 或 Anthropic——凭据保留在你的机器上。本页不承诺配额或价格。
系统与版本桌面应用或源码
请查看下载页面以获取桌面版本。源码快速入门中提到的 Node.js 和 pnpm 要求适用于从源码运行，不适用于安装桌面软件包。最低兼容的 Hermes 版本：此处未验证。
连接检查成功的标志
按照你已安装版本所显示的连接说明操作，然后运行一个小任务。确认 Hermes 已处理该任务，并且产物可以打开。仅完成下载并不能确保连接已经建立。
从桌面应用开始
三步完成 Hermes 设置
先下载，为你已安装的版本完成 Hermes 设置，然后检查一个小结果。按此路径操作无需从源码构建 OpenDesign。
- 1
下载 OpenDesign 桌面应用
选择适合您电脑的软件包，安装并打开该应用。
下载 OpenDesign检查点桌面应用会打开。已经安装过？请进入下一步；无需再次下载。 - 2
准备你的 Hermes 连接
按照你已安装版本中的 Hermes 说明操作。使用你自己的厂商密钥（BYOK）进行身份验证——默认为 xAI Grok，或使用 OpenAI 或 Anthropic——凭据保留在你的机器上。
将 xAI Grok 连接到 Hermes（OAuth）# 1. Install Hermes (one-line installer from Nous Research) curl -fsSL https://hermes-agent.nousresearch.com/install.sh | bash # 2. Run the setup wizard hermes setup # 3. Add a provider and authenticate (BYOK) # default is xAI Grok; OpenAI / Anthropic also supported hermes auth add # add a provider key or run its OAuth flow hermes model # pick the provider and model (grok-4.3 by default)来自已发布指南中的 Hermes 设置说明；请查阅厂商文档以获取当前命令。
检查点确认目标 Agent 与账户。如果不可用，请在尝试更大任务之前先检查兼容性。 - 3
运行一个小型 Hermes 任务
使用一个小 brief，以便您评估整个流程，包括一次修改。
入门 brief构建一个设置页面，包含个人资料表单和保存确认提示。使用我的设计规则。在桌面和移动端宽度下进行检查。
检查点打开结果，测试保存状态，并提出一个具体的修改请求。生成的文件是评审的开始，而不是结束。
若要从源代码运行 OpenDesign，请参阅技术快速入门。
Hermes 设计工作流
Hermes 设计工作流的五个步骤
同一个支持收件箱任务，从 brief 到验证文件的完整过程。每个步骤列出您提供的内容、Hermes 完成的工作、OpenDesign 贡献的部分，以及您需要检查的内容。
- 1
设计 Brief
用简明语言写三到六行，说明目标受众、该界面要完成的任务，以及适用的平台。
- 您撰写 brief；如有参考截图，请附上。
- Hermes阅读 brief 和项目的指令文件；遇到不明确之处会主动提问。
- OpenDesign提供项目、prompt 界面，以及对应产物类型的 skill。
- 检查确认 brief 中已写明验收标准。现在补充比生成之后再补充成本更低。
- 2
设计约束
一套设计系统加几条硬性规则。正是这些将符合品牌调性的产出与千篇一律的效果区分开来。
- 您选择一个设计系统；说明断点及必须使用的组件。
- Hermes在编写任何代码之前，先将 DESIGN.md 中的 token 和风格规则加载到上下文中。
- OpenDesign提供设计系统库，并将所选设计系统绑定到 skill 模板中。
- 检查确认 token 与您的品牌相符：单一强调色、正确的字体、正确的圆角。
- 3
生成界面
Hermes 编写一个自包含的 HTML 文件：布局、样式、交互和稳定的钩子。
- 您等待即可，或回答澄清性问题。无需进行任何配置。
- Hermes规划各个区块，编写 HTML、CSS 和 JavaScript，运行文件并修复失败之处。
- OpenDesign将产物保存到项目文件夹中，并为预览建立索引。
- 检查此步骤暂无需检查。请在文件渲染后进行判断，而非查看源代码。
- 4
预览
文件会以你要求的宽度在 OpenDesign 中渲染。设计的好坏就在这里被检验。
- 你切换宽度，点击交互，在元素上留下评论。
- Hermes阅读您对预览的评论，并准备下一版修订。
- OpenDesign渲染预览，暴露
data-od-id目标以供评论和编辑。 - 检查层级结构、对比度、390px 下的溢出、焦点状态，以及强调色是否使用得克制。
- 5
修订与验证
通过在预览中指向元素来请求修改。每次修订都是一个新文件，绝不会被静默覆盖。
- 你把评论转化为请求；决定任务何时完成。
- Hermes就地应用更改并重新运行文件。
- OpenDesign将各版本并排保留；完成后导出图片或 HTML。
- 检查只重新检查发生变化的区域，然后在每个断点上完整检查一次整页。
资源
Hermes 设计资源
限制
Hermes 的局限性、人工检查与回退方案
- 适用范围它与提供商无关，支持 BYOK：默认使用 xAI Grok，同时支持 OpenAI、Anthropic 及许多其他提供商，因此您可以自行控制由哪个模型对您的设计进行推理。本页介绍的是作为连接到 OpenDesign 的 Agent 的 Hermes，而非 Hermes 的全部功能。
- 使用限制使用限制和费用取决于您所使用的凭证（通过 BYOK 提供的提供商密钥 — xAI（Grok，默认）、OpenAI 或 Anthropic）。本页对免费配额不作任何说明。
- 网络本地项目文件并不代表离线推理。在分享敏感输入之前，请检查你的 Agent 供应商设置和数据政策。
- 输出为 HTML产物是 HTML 文件，而非矢量设计文件。
- 人工审查可访问性、真实内容、品牌契合度和交互正确性均由你在预览中审查。将 Agent 的任何自检视为初步检查。
- 后备方案如果 Agent 不可用或任务失败，请检查所安装版本的连接说明和身份验证。在更改配置前，请保留错误信息和最后一个可用的产物。
常见问题
关于 Hermes 和 OpenDesign 的常见问题
Hermes 真的能胜任设计工作吗？
可以 —— 只要上下文中有美学 skill、设计系统和真实的参考图像，Hermes 就能生成可用于生产环境的响应式 UI，并且作为一个自主 Agent，它能够自行渲染输出并与参考图像进行核对。如果没有这些上下文，它往往会趋向通用化的效果，而这正是 OpenDesign 所填补的空白。
Hermes 使用哪些模型和密钥？
Hermes 不依赖特定供应商，支持自带密钥（BYOK）。它默认使用 xAI Grok（例如 grok-4.3），同时也支持 OpenAI、Anthropic、OpenRouter 等众多供应商——你可以通过 hermes auth add 添加供应商密钥（或运行其 OAuth 流程），并使用 hermes model 选择模型。OpenDesign 绝不会代理你的凭据。
Hermes 为何特别适合设计？
有两点：一是它真正具备自主性，能够规划、构建并验证 UI，而不必等待逐行指令；二是它不依赖特定供应商，你可以运行自己信任的推理模型。这两点都有帮助——但审美依然来自你提供的设计系统、skill 与参考资料。
前端设计该选 Hermes 还是 Claude Code？
两者都很出色。Claude Code 以精准、贴合代码库的设计决策著称；Hermes 的优势在于自主规划与执行，以及可自由选择供应商——你甚至可以为 Hermes 配置 Anthropic 密钥。许多团队会同时使用两者——OpenDesign 让你无需改变设计工作流即可切换 Agent。
如何将 Hermes 连接到 Figma？
在 Hermes 的工具配置中添加 Figma MCP 服务器。这样 Hermes 就能获取真实的设计上下文——组件、变量、布局数据——使生成的代码与源文件一致，而不是近似还原。
用 Hermes 开始你的第一个设计任务
从一个小任务开始，评估往返效果，然后再提交真实的 brief。请选择与您的环境相符的选项；本页不会自动检测。