diff --git a/website/docs/user-guide/features/skins.md b/website/docs/user-guide/features/skins.md index 5aec20cdf1..e093a763b5 100644 --- a/website/docs/user-guide/features/skins.md +++ b/website/docs/user-guide/features/skins.md @@ -196,6 +196,55 @@ branding: tool_prefix: "▏" ``` +## Hermes Mod — Visual Skin Editor + +[Hermes Mod](https://github.com/cocktailpeanut/hermes-mod) is a community-built web UI for creating and managing skins visually. Instead of writing YAML by hand, you get a point-and-click editor with live preview. + +![Hermes Mod skin editor](https://raw.githubusercontent.com/cocktailpeanut/hermes-mod/master/nous.png) + +**What it does:** + +- Lists all built-in and custom skins +- Opens any skin into a visual editor with all Hermes skin fields (colors, spinner, branding, tool prefix, tool emojis) +- Generates `banner_logo` text art from a text prompt +- Converts uploaded images (PNG, JPG, GIF, WEBP) into `banner_hero` ASCII art with multiple render styles (braille, ASCII ramp, blocks, dots) +- Saves directly to `~/.hermes/skins/` +- Activates a skin by updating `~/.hermes/config.yaml` +- Shows the generated YAML and a live preview + +### Install + +**Option 1 — Pinokio (1-click):** + +Find it on [pinokio.computer](https://pinokio.computer) and install with one click. + +**Option 2 — npx (quickest from terminal):** + +```bash +npx -y hermes-mod +``` + +**Option 3 — Manual:** + +```bash +git clone https://github.com/cocktailpeanut/hermes-mod.git +cd hermes-mod/app +npm install +npm start +``` + +### Usage + +1. Start the app (via Pinokio or terminal). +2. Open **Skin Studio**. +3. Choose a built-in or custom skin to edit. +4. Generate a logo from text and/or upload an image for hero art. Pick a render style and width. +5. Edit colors, spinner, branding, and other fields. +6. Click **Save** to write the skin YAML to `~/.hermes/skins/`. +7. Click **Activate** to set it as the current skin (updates `display.skin` in `config.yaml`). + +Hermes Mod respects the `HERMES_HOME` environment variable, so it works with [profiles](/docs/user-guide/profiles) too. + ## Operational notes - Built-in skins load from `hermes_cli/skin_engine.py`.