docs(skills): clarify when to use claude-design vs popular-web-designs vs design-md

- claude-design: design process + taste for one-off HTML artifacts
- popular-web-designs: 54 ready-to-paste design systems (Stripe/Linear/etc.)
- design-md: formal DESIGN.md token spec file authoring

Adds a comparison table to claude-design's 'When To Use' section and
reciprocal pointers in design-md and popular-web-designs. Also corrects
claude-design author attribution to BadTechBandit.

skills/creative/claude-design/SKILL.md

@@ -2,7 +2,7 @@
 name: claude-design
 description: Design-ready operating skill for CLI/API agents creating thoughtful HTML artifacts outside Claude Design's hosted web UI. Use for landing pages, prototypes, UI explorations, decks, component mockups, motion studies, and design-system exercises where the output should be local, self-contained, and high-craft.
 version: 1.0.0
-author: Hermes Agent
+author: BadTechBandit
 license: MIT
 metadata:
   hermes:
@@ -16,6 +16,24 @@ Use this skill when the user asks for design work that would normally fit Claude
 
 The goal is to preserve Claude Design's useful design behavior and taste while removing hosted-tool plumbing that does not exist in normal agent environments.
 
+## When To Use This Skill vs `popular-web-designs` vs `design-md`
+
+Hermes has three design-related skills under `skills/creative/`. They do different jobs — load the right one (or combine them):
+
+| Skill | What it gives you | Use when the user wants... |
+|---|---|---|
+| **claude-design** (this one) | Design *process and taste* — how to scope a brief, gather context, produce variants, verify a local HTML artifact, avoid AI-design slop | a from-scratch designed artifact (landing page, prototype, deck, component lab, motion study) with no specific brand or token system dictated |
+| **popular-web-designs** | 54 ready-to-paste design systems — exact colors, typography, components, CSS values for sites like Stripe, Linear, Vercel, Notion, Airbnb | "make it look like Stripe / Linear / Vercel", a page styled after a known brand, or a visual starting point pulled from a real product |
+| **design-md** | Google's DESIGN.md spec format — author/validate/diff/export design-token files, WCAG contrast checking, Tailwind/DTCG export | a formal, persistent, machine-readable design-system *spec file* (tokens + rationale) that lives in a repo and gets consumed by agents over time |
+
+Rule of thumb:
+
+- **Process + taste, one-off artifact** → claude-design
+- **Match a known brand's look** → popular-web-designs (and let claude-design drive the process)
+- **Author the tokens spec itself** → design-md
+
+These compose: use `popular-web-designs` for the visual vocabulary, `claude-design` for how to turn a brief into a thoughtful local HTML file, and `design-md` when the output is the token file rather than a rendered artifact.
+
 ## Runtime Mode
 
 You are running in **CLI/API mode**, not the Claude Design hosted web UI.

skills/creative/design-md/SKILL.md

@@ -7,7 +7,7 @@ license: MIT
 metadata:
   hermes:
     tags: [design, design-system, tokens, ui, accessibility, wcag, tailwind, dtcg, google]
-    related_skills: [popular-web-designs, excalidraw, architecture-diagram]
+    related_skills: [popular-web-designs, claude-design, excalidraw, architecture-diagram]
 ---
 
 # DESIGN.md Skill
@@ -31,7 +31,9 @@ diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON.
 - User wants contrast / WCAG accessibility validation on their color palette
 
 For purely visual inspiration or layout examples, use `popular-web-designs`
-instead. This skill is for the *formal spec file* itself.
+instead. For *process and taste* when designing a one-off HTML artifact
+from scratch (prototype, deck, landing page, component lab), use
+`claude-design`. This skill is for the *formal spec file* itself.
 
 ## File anatomy
 

skills/creative/popular-web-designs/SKILL.md

@@ -27,6 +27,16 @@ triggers:
 site's complete visual language: color palette, typography hierarchy, component styles, spacing
 system, shadows, responsive behavior, and practical agent prompts with exact CSS values.
 
+## Related design skills
+
+- **`claude-design`** — use for the design *process and taste* (scoping a brief,
+  producing variants, verifying a local HTML artifact, avoiding AI-design slop).
+  Pair it with this skill when the user wants a thoughtfully-designed page styled
+  after a known brand: `claude-design` drives the workflow, this skill supplies
+  the visual vocabulary.
+- **`design-md`** — use when the deliverable is a formal DESIGN.md token spec
+  file, not a rendered artifact.
+
 ## How to Use
 
 1. Pick a design from the catalog below