Hermes Agent UI design with a real direction

Hermes Agent is good at doing the work: it reads your project, writes the code and runs it. Ask it for a landing page, though, and you'll often get the same page every agent makes: a purple gradient, a vague headline and three identical feature cards. Nothing is broken. It just looks like nobody decided anything.

Example task used in this guide: give a side project's landing page a real design direction instead of the generated look.

Why Hermes builds generic pages

Without design decisions in the project, any agent falls back on the average of what it has seen. The fix isn't a longer prompt. It's a short file of decisions the agent follows every time, based on how real products in your space actually look.

Write the direction down first

Put a DESIGN.md at the root of the project: a few lines each on color, type, spacing, shape and components, with a role for every color. Ask Hermes to read it before any UI work. A starting point:

# DESIGN.md

## Direction
Calm and technical, for developers. Light background, dark text, one accent.

## Color
- Text: #141414. Muted text: #5C5C5C. Background: #FBFAF7. Borders: #E5E2DA.
- Primary (buttons and links only): #2B59FF. No other accent.

## Type
- Inter for everything. Sizes: 14, 16, 20, 28, 40. Body 16, line length 60-75 characters.

## Spacing and shape
- 4px scale. Sections 96px apart on desktop, 64px on phones.
- Radius 8px on buttons and inputs, 12px on cards. One soft shadow, cards only.

## Components
- Buttons: primary, secondary, quiet, each with hover, focus and disabled states.

Each line is something you can check on the page. "Make it clean" isn't; "one accent, buttons and links only" is.

Study real design systems

With UXKIN connected, Hermes can call find_ui_materials with the industry and the feeling in plain words, such as "minimal dev tools" or "warm e-commerce", and get design systems taken from real websites, each with its own DESIGN.md.

Ask it to compare three results on a few points: how many colors they really use and for what, the type pairing and scale, the radius and shadows, and the components they rely on. Then have it say which decisions it's adopting and update your DESIGN.md. You're borrowing decisions, not a look: your brand stays yours.

Check the page it built

Have Hermes open the page in a browser and take screenshots, rather than describing the page from the code:

• A phone (375px) and a desktop (1440px). No horizontal scrolling, nothing cut off.
• Only DESIGN.md colors and sizes. Ask it to list any value that isn't in the file.
• One primary action above the fold, with a label that says what happens.
• The keyboard: every link and button reachable, with a visible focus outline.

Set up UXKIN in Hermes

UXKIN connects as a remote MCP server, and you sign in with your UXKIN account, so there's no token to copy. You need a UXKIN plan (Monthly or Lifetime).

1. Open Hermes' config file, ~/.hermes/config.yaml, and add UXKIN under mcp_servers:

mcp_servers:
  uxkin:
    url: "https://uxkin.com/mcp"
    auth: oauth

2. In a Hermes chat, type /reload-mcp. A browser window opens to UXKIN; log in and click Allow. If it doesn't open, run hermes mcp login uxkin in your terminal.
3. Ask Hermes which MCP tools it has. You should see find_ui_references, find_ui_materials and get_journey.

Hermes keeps the sign-in in ~/.hermes/mcp-tokens/ and refreshes it on its own, so you only do this once.

Hermes on a server

If Hermes runs on a server or behind a chat app, there may be no browser to sign in with. Use a token instead. Put it in Hermes' secrets file, ~/.hermes/.env, which keeps it out of config.yaml:

UXKIN_TOKEN=paste-your-uxkin-token-here

Then point the UXKIN entry at it. Hermes fills in ${UXKIN_TOKEN} from the .env file:

mcp_servers:
  uxkin:
    url: "https://uxkin.com/mcp"
    headers:
      Authorization: "Bearer ${UXKIN_TOKEN}"

Get your token from the setup prompt after choosing a plan, and type /reload-mcp. Never paste the token itself into a file you share or commit.

Add the UXKIN skills

UXKIN also publishes free skills that work with no account: no-ui-slop builds UI that fits the product instead of generic defaults, and uxkin-research looks at real examples before a design decision. Hermes skills follow the same open standard, so you can install them straight from GitHub:

hermes skills install uxkin/agent/skills/no-ui-slop
hermes skills install uxkin/agent/skills/uxkin-research

Hermes scans each skill before installing it. To browse every UXKIN skill from inside Hermes instead, add our repository as a source:

hermes skills tap add uxkin/agent

With the skills and the MCP server together, Hermes follows the UI rules on its own and looks up real references when a decision needs one.

A prompt you can use

Adapt it to your own page. It starts by reading the current page, asks for real references and lists what to check:

Redesign the landing page in site/index.html. Right now it looks like every AI-made page: purple gradient, three identical feature cards, vague headline.

First, read the page and DESIGN.md (if there's no DESIGN.md, say so and stop to ask me about the direction).

If UXKIN is connected, call find_ui_materials with "minimal dev tools" and with "developer API platform". Compare three results: how many colors they really use and for what, the type scale, the radius and the components. Tell me which decisions you're adopting, then update DESIGN.md.

Then rebuild the page:
- A headline that says what it is and for whom, one primary button.
- Show the product instead of icons in cards.
- Use only the colors, sizes and radius in DESIGN.md.

Open the page in a browser at 375px and 1440px, take a screenshot of each, fix what's wrong and check again. List each change in one line.

Questions