What is this design skill?
This design skill is a SKILL.md folder in the Hermes Agent repository for one-off design work. It tells an agent to scope the brief, commit to one surface, build a self-contained local HTML file and check it before reporting back.
It is a SKILL.md folder named claude-design inside the Hermes Agent repository, version 1.1.0 by BadTechBandit under the MIT license. The star count on this page belongs to the whole Hermes Agent repository, not to this one skill. It is for design requests that run in a terminal or API agent instead of a hosted design tool.
It keeps the design process and taste and drops hosted-tool plumbing. The skill tells the agent to ignore calls such as done() and show_to_user(), and to use the tools that exist in its own environment.
What changes in the agent's output
- The default deliverable becomes a complete local HTML file, with CSS and JavaScript inside it when portability matters.
- The agent names exactly one surface archetype, such as Monitor, Compare or Decide / Learn, before it picks any colors or type.
- A generic centered hero with three equal feature cards is treated as a defect, not a starting point.
- The agent verifies the file before it says done, and reports the exact path on disk.
How it compares with popular-web-designs and design-md
The skill describes three related design skills and when each fits. The table below follows its own decision table.
| Skill | What it gives you | Use it when |
|---|---|---|
| claude-design | Process and taste for a one-off artifact | You want a designed page, prototype or deck with no fixed brand |
| popular-web-designs | 54 ready-to-paste design systems | You want a look matching a known product |
| design-md | A formal DESIGN.md token spec | You need a persistent, machine-readable token file |
The skill says these compose. Load popular-web-designs for the visual vocabulary and let this skill drive the process. For the token file itself, see the Create DESIGN.md skill.
Who it is for
Best for
- Landing pages, high-fidelity prototypes, HTML slide decks, component labs and motion studies.
- Developers who run an agent in a terminal and want a design pass without a hosted design tool.
- Redesigns that start from screenshots, a repo, brand docs or a UI kit.
Not for
- Authoring a DESIGN.md token file. The skill sends that job to design-md.
- Work that must run in a hosted design web UI, since this version removes its tool calls.
Use it with UiChemy
A finished HTML artifact is a good starting point for a WordPress build. UiChemy's frontend design skills and the critique skill pair with it, and the Composer lets you refine the result as real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install HTML Design Skill for AI Agents: Scope, Build and Verify
git clone https://github.com/NousResearch/hermes-agent.gitGet the skill folder
Clone the Hermes Agent repository (it is large), or open github.com/NousResearch/hermes-agent and download only the skills/creative/claude-design folder.
Find the skill folder
The skill lives at
skills/creative/claude-designand contains a SKILL.md.Copy it into your agent
Copy the
claude-designfolder into the skills directory your agent reads, then restart the agent so it loads.
Check that it loaded
Ask the agent for a one-off landing page or prototype. If the skill loaded, it states one surface archetype first and ends with the HTML file path and a verification status.
Key features
- Surface-first compositionThe agent commits out loud to one of seven surfaces before touching tokens: Monitor, Operate, Compare, Configure, Decide / Learn, Explore or Command / Inspect.
- Context before designIt looks for brand docs, screenshots, repo components and design tokens first, and reads the theme, token and component files that define the visual vocabulary.
- Focused questionsFor new, ambiguous or high-fidelity work it asks short questions about format, audience, fidelity, source material and variations. It skips them for small tweaks.
- Format choiceIt picks one HTML canvas for static comparison, a clickable prototype for flows, a fixed-size deck with navigation, a component lab or a timeline for motion.
- Three variation levelsVariations run from conservative, to strong-fit, to divergent, so the user can find the edge of their taste.
- Anti-slop rulesIt lists patterns to avoid, such as heavy gradients, default glassmorphism, icon-topped cards, fake dashboards and rainbow palettes.
- Slop diagnosticA scored self-audit covers the tech gradient, feature-tile grid, accent rail, icon topper, center stack and default type. The agent repairs only what it flags.
- Content disciplineIt adds no filler, fake metrics or placeholder testimonials, and marks unfinished copy as draft.
- Verification stepThe agent confirms the file exists, runs available syntax checks, opens it in a browser tool if one exists and says exactly what was not verified.
Frequently asked questions
What is the claude-design skill?
It is a SKILL.md in the Hermes Agent repository for one-off design work in terminal and API agents. It scopes a brief, commits to one surface, builds a self-contained HTML artifact and verifies it. Tool calls that only exist in hosted design tools are removed.
How do I install this design skill?
Clone github.com/NousResearch/hermes-agent and copy the skills/creative/claude-design folder into your agent's skills directory. Hermes Agent already bundles it under skills/creative, so it needs no copy there. Restart the agent afterwards so the skill is picked up.
What does the skill output?
By default it produces a complete local HTML file, with CSS and JavaScript included when portability matters, and it reports the exact path. If you ask for work in an existing repo, it uses that repo's real stack instead of a standalone file.
What is a surface in this design skill?
A surface is one of seven archetypes the agent names before choosing colors or type: Monitor, Operate, Compare, Configure, Decide / Learn, Explore, and Command / Inspect. Committing to one first is the skill's main defence against generic centered-hero layouts.
How is it different from design-md?
The claude-design skill covers process and taste for a rendered, one-off artifact. design-md covers the formal DESIGN.md token spec file, with validation and export. The skill says they compose, and that token authoring should go to design-md.
Which agents can use it?
The skill is written for Hermes Agent, and its metadata lists Linux, macOS and Windows. Another agent that loads SKILL.md folders can use it once the folder sits in that agent's own skills directory. The repository documents no other agent's install, so test it first.
Is the skill free to use?
Yes. The skill file declares the MIT license, and the Hermes Agent repository it lives in is also MIT licensed on GitHub, so you can use, copy and change it, including in client work, as the license allows.