Hermes

OpenDesign

Design With
Hermes in
OpenDesign.

How to design interfaces with Hermes in OpenDesign: a plan you approve before it executes, the provider key you own, one support-inbox task from brief to reviewed file, and the limits to know before you start.

Download OpenDesign Go to setup

Illustrative interface · not a captured product session

THREE WAYS INTO THIS HERMES GUIDE

Choose Where to Start With Hermes

THIS GUIDE · UI DESIGN

Build a Product Interface With Hermes

This guide: brief, references, design rules and a reviewed HTML result.

Read this guide SETUP

Set Up Hermes From Zero

Here is the full path from a clean machine to a Hermes that can build and verify UI.

Go to setup COMPARISON

Compare Hermes With Other Agents

How Hermes differs from Codex, Claude Code, Cursor for design work, and when to choose another workflow.

See the comparison

On This Page Example

Example
Fit
Compatibility
Setup
Workflow
Resources
Limitations
FAQ

One Complete Hermes Design Task

A Hermes Design Task, From Brief to Interface

A single task, shown end to end: the brief and constraints you hand over, the artifact that comes back, and the checks you still run before it is done. The interface below is an illustrative example built for this page, not a recorded Hermes run.

1Design Brief and Constraints

Brief

Design a support inbox for a small team: conversation list with priority, a thread view with suggested replies, and quick actions. Plan the layout first, then execute. Desktop and phone.

Design systemOpenDesign paper canvas: Albert Sans, one green accent
Breakpoints1440px desktop and 390px mobile, no horizontal scroll
InteractionsFilters, thread switch, assign, snooze, reply
OutputOne self-contained HTML file with stable data-od-id hooks

2Division of Work: You, Hermes and OpenDesign

You
Write the brief, select the design system and define the acceptance criteria.
Hermes
Plans the layout, writes the HTML, CSS and JavaScript and revises it on request.
OpenDesign
Provides the design system and skill, renders the preview and stores every version as a file in the project.
Review
Visual hierarchy, spacing on the 8px grid, both breakpoints and every interaction are checked before handoff.

3Hermes Artifact: The Support Inbox at 1440px and 390px

Hermes Artifact: The Support Inbox at 1440px and 390px — Desktop — Illustrative example

Hermes Artifact: The Support Inbox at 1440px and 390px — Mobile — Illustrative example

4Review Before Handoff

Layout

Grid and Spacing

List and thread on the 8px grid; the list column keeps a fixed width so subjects do not reflow.

Hierarchy

Visual Hierarchy

Sender and subject first, preview second; the accent marks urgent only.

Responsive

Mobile Layout

List first, thread on tap; filters become a segmented switch.

Interaction

Interaction Checks

Filter to urgent, open a thread, assign it, send the suggested reply.

Fit

When Hermes Fits the Task, and When It Does Not

Hermes Fits When

Autonomous plan-and-execute. It plans, builds, and delegates UI work to subagents, turning a design goal into working, responsive markup and checking the result.
Provider-agnostic BYOK. xAI Grok by default, plus OpenAI, Anthropic, and many others — match the reasoning model to the task without lock-in.
Skills + MCP. Reusable skills carry your conventions; a Figma MCP server brings real design context into code.
Open and self-hosted. MIT-licensed and runs on your own machine, with no telemetry and no cloud dependency.

Choose Another Workflow When

You need editable vector files. The artifact is HTML, not an editable design document. Check a separate vector workflow for your required asset format.
You have no reference and no constraints. Without a design system or examples the output tends toward a generic look; write the brief first.
You do not have the credential this agent needs. Required: Provider key via BYOK — xAI (Grok, default), OpenAI, or Anthropic. OpenDesign does not provide or proxy credentials.
Your team works in Grok or OpenCode. Those agents have their own pages; the workspace is the same, the setup differs. See related agents.

Compatibility

Hermes Requirements Before You Start

This guide covers Hermes as connected through the OpenDesign desktop app. Published references checked on 6 September 2026.

Tool ScopeHermes, by Nous Research

Hermes is Nous Research’s open-source (MIT) autonomous terminal agent. It runs persistently on your own machine, reads your codebase, edits files, runs commands, and plans and delegates multi-step work to isolated subagents. This page is about designing interfaces with Hermes through OpenDesign, not about Hermes’s own interface. OpenDesign’s setup notes list the available agents.

Accounts and AuthenticationProvider key via BYOK — xAI (Grok,

Provider key via BYOK — xAI (Grok, default), OpenAI, or Anthropic. Authenticate with your own provider key (BYOK) — xAI Grok by default, or OpenAI or Anthropic — credentials stay on your machine. This page does not promise a quota or price.

System and VersionsDesktop app or source

Check the download page for desktop builds. The Node.js and pnpm requirements in the source quickstart apply to running from source, not to installing a desktop package. Minimum compatible Hermes version: not verified here.

Connection CheckThe success signal

Follow the connection instructions shown by your installed version, then run a small task. Confirm that Hermes handled it and that the artifact opens. A download alone does not establish a working connection.

Start with the desktop app

Hermes Setup in Three Steps

Download first, complete the Hermes setup for your installed version, then check a small result. You do not need to build OpenDesign from source to follow this path.

1

Download the OpenDesign Desktop App

Choose the package for your computer, install it and open the app.
Download OpenDesign

CHECKPOINT
The desktop app opens. Already installed? Move to the next step; there is no need to download again.
2
Prepare Your Hermes Connection
Follow the Hermes instructions in your installed version. Authenticate with your own provider key (BYOK) — xAI Grok by default, or OpenAI or Anthropic — credentials stay on your machine.
Connect xAI Grok to 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)
From the Hermes setup notes in the published guide; check the vendor documentation for the current command.
CHECKPOINT
Confirm the intended agent and account. If it is unavailable, check compatibility before trying a larger task.
3

Run One Small Hermes Task

Use a small brief so you can judge the whole loop, including one revision.

Starter brief

Build a settings screen with a profile form and a save confirmation. Use my design rules. Check it at desktop and mobile widths.

CHECKPOINT
Open the result, test the save state and request one specific change. A generated file is the beginning of review, not the end.

To run OpenDesign from source, follow the technical quickstart instead.

The Hermes design workflow

The Hermes Design Workflow in Five Steps

The same support inbox task, followed from brief to verified file. Each step lists what you provide, what Hermes does, what OpenDesign contributes and what you check.

1
Design Brief

Plain language, three to six lines. Name the audience, the job of the screen and the platforms.
- YouWrite the brief; attach a reference screenshot if you have one.
- HermesReads the brief and the project’s instruction file; asks when something is ambiguous.
- OpenDesignProvides the project, the prompt surface and the skill for the artifact type.
- CheckConfirm the brief states the acceptance criteria. Adding them now is cheaper than after generation.
New project · PromptHermes

You
Design a support inbox: list with priority, thread with suggested replies, quick actions. Plan first, then execute.
Hermes
Plan: two-pane layout, urgent as the only accent, suggested reply as a draft you approve. Executing unless you object.
2
Design Constraints

A design system and a few hard rules. This is what separates on-brand output from a generic look.
- YouPick a design system; state breakpoints and any must-use components.
- HermesLoads the DESIGN.md tokens and posture rules into context before writing a line.
- OpenDesignShips the design-system library and binds the chosen one into the skill template.
- CheckThe tokens match your brand. One accent, the right fonts, the right radius.
DESIGN.md · OpenDesignbound

background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3
Generate the Interface

Hermes writes a self-contained HTML file: layout, styles, interactions and stable hooks.
- YouWait, or answer a clarifying question. Nothing to configure.
- HermesPlans the sections, writes the HTML, CSS and JavaScript, runs the file and fixes what fails.
- OpenDesignSaves the artifact into the project folder and indexes it for preview.
- CheckNothing yet. Judge the file after it is rendered, not from the source.
Project files3 files
- support-inbox.htmlnew
- HERMES.mdbound
- DESIGN.mdread
4
Preview

The file renders inside OpenDesign at the widths you asked for. This is where the design is judged.
- YouSwitch widths, click through the interactions, leave comments on elements.
- HermesReads your comments on the preview and prepares the next revision.
- OpenDesignRenders the preview, exposes data-od-id targets for comments and edits.
- CheckHierarchy, contrast, overflow at 390px, focus states, and whether the accent is used sparingly.
Preview · 390pxComment mode

Comment on · list
Unread weight on sender and subject; the preview stays light.
Comment on · thread
Suggested reply is a draft with a Send button, never auto-sent.
5
Revise and Verify

Request changes by pointing at elements in the preview. Every revision is a new file; nothing is overwritten silently.
- YouTurn comments into requests; decide when the task is done.
- HermesApplies the changes in place and re-runs the file.
- OpenDesignKeeps versions side by side; exports an image or the HTML when you are done.
- CheckRe-check only the area that changed, then the whole page once at each breakpoint.
Verification · v23 of 4
- ✓Urgent is the only accent
- ✓Suggested reply requires Send
- ✓No horizontal scroll at 390px
- Assign and snooze — checked by you

Resources

Hermes Design Resources

Design Skills

The artifact types Hermes can produce in OpenDesign, one skill per type.

Browse skills Design systems

Design Systems

Brand tokens and components to bind before Hermes generates anything.

Browse systems Templates

Templates

Starting points for decks, landing pages and product screens.

Browse templates

Limitations

Hermes Limitations, Manual Checks and Fallbacks

ScopeIt is provider-agnostic and bring-your-own-key: xAI Grok by default, with OpenAI, Anthropic, and many other providers supported, so you control which model reasons over your design. This page covers Hermes as an agent connected to OpenDesign, not every Hermes feature.
Usage LimitsUsage limits and cost follow the credential you use (Provider key via BYOK — xAI (Grok, default), OpenAI, or Anthropic). This page makes no claim about free quotas.
NetworkLocal project files do not mean offline inference. Review your agent’s provider settings and data policies before sharing sensitive inputs.
Output Is HTMLArtifacts are HTML files, not vector design files.
Manual ReviewAccessibility, real content, brand fit and interaction correctness are reviewed by you in the preview. Treat any self-check by the agent as a first pass.
FallbackIf the agent is unavailable or a task fails, check the installed version’s connection instructions and authentication. Preserve the error and the last working artifact before changing configuration.

FAQ

Common Questions About Hermes and OpenDesign

Can Hermes Really Do Design Work?

Yes — with an aesthetic skill, a design system, and real reference images in context, Hermes produces production-quality, responsive UI, and as an autonomous agent it can render and verify output against references on its own. Without that context it tends to default to a generic look, which is the gap OpenDesign fills.

Which Models and Keys Does Hermes Use?

Hermes is provider-agnostic and bring-your-own-key. It defaults to xAI Grok (for example grok-4.3) and also supports OpenAI, Anthropic, OpenRouter, and many other providers — you add a provider key (or run its OAuth flow) with hermes auth add and pick a model with hermes model. OpenDesign never proxies your credentials.

What Makes Hermes Good for Design Specifically?

Two things: it is genuinely autonomous, so it plans, builds, and verifies UI rather than waiting for line-by-line direction; and it is provider-agnostic, so you can run the reasoning model you trust. Both help — but taste still comes from the design system, skill, and references you supply.

Hermes or Claude Code for Frontend Design?

Both are strong. Claude Code is known for specific, codebase-aware design decisions; Hermes’s edge is autonomous plan-and-execute plus provider choice — and you can even point Hermes at an Anthropic key. Many teams use both — OpenDesign lets you switch agents without changing your design workflow.

How Do I Connect Hermes to Figma?

Add a Figma MCP server in Hermes’s tool configuration. Hermes can then pull real design context — components, variables, layout data — so the generated code matches the source instead of approximating it.

Start a First Design Task With Hermes

Start with a small task, judge the round trip, then bring the real brief. Choose the option that matches your setup; the page does not detect it.