# HTML Mockup Variants

Make throwaway HTML mockups with two or three variants to compare.

- Repository: https://github.com/NousResearch/hermes-agent (259479 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add NousResearch/hermes-agent --skill sketch -g -a claude-code -y`
Codex: `npx skills add NousResearch/hermes-agent --skill sketch -g -a codex -y`
Cursor: `npx skills add NousResearch/hermes-agent --skill sketch -g -a cursor -y`
Gemini CLI: `npx skills add NousResearch/hermes-agent --skill sketch -g -a gemini-cli -y`

## Description

Throwaway HTML mockups: 2-3 design variants to compare.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Sketch

Use this skill when the user wants to **see a design direction before committing** to one, exploring a UI/UX idea as disposable HTML mockups. The point is to generate 2-3 interactive variants so the user can compare visual directions side-by-side, not to produce shippable code.

Load this when the user says things like "sketch this screen", "show me what X could look like", "compare layout A vs B", "give me 2-3 takes on this UI", "let me see some variants", "mockup this before I build".

## When NOT to use this

- User wants a production component, use `claude-design` or build it properly
- User wants a polished one-off HTML artifact (landing page, deck), `claude-design`
- User wants a diagram, `excalidraw`, `architecture-diagram`
- The design is already locked, just build it

## If the user has the full GSD system installed

If `gsd-sketch` shows up as a sibling skill (installed via `npx get-shit-done-cc --hermes`), you can use **`gsd-sketch`** for the fuller workflow: persistent `.planning/sketches/` with MANIFEST, frontier mode analysis, consistency audits across past sketches, and integration with the rest of GSD. This skill is the lightweight standalone version, one-off sketching without the state machinery.

> **Note:** The upstream GSD project ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)) is **archived / no longer maintained** on GitHub. The npm package (`get-shit-done-cc`) still installs, but treat it as an archived community project, this standalone `sketch` skill is the maintained path and needs nothing extra.

## Core method

```
intake  →  variants  →  head-to-head  →  pick winner (or iterate)
```

### 1. Intake (skip if the user already gave you enough)

Before generating variants, get three things, one question at a time, not all at once:

The rest: https://github.com/NousResearch/hermes-agent/blob/HEAD/optional-skills/creative/sketch/SKILL.md