From 55be532369e957db372574fa86e30edca090fd53 Mon Sep 17 00:00:00 2001 From: Teknium Date: Sun, 26 Apr 2026 21:27:29 -0700 Subject: [PATCH] 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 | 20 +++++++++++++++++++- skills/creative/design-md/SKILL.md | 6 ++++-- skills/creative/popular-web-designs/SKILL.md | 10 ++++++++++ 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/skills/creative/claude-design/SKILL.md b/skills/creative/claude-design/SKILL.md index 4bb7deb430..1e6d91db78 100644 --- a/skills/creative/claude-design/SKILL.md +++ b/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. diff --git a/skills/creative/design-md/SKILL.md b/skills/creative/design-md/SKILL.md index 36c4138db9..b51b25cce6 100644 --- a/skills/creative/design-md/SKILL.md +++ b/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 diff --git a/skills/creative/popular-web-designs/SKILL.md b/skills/creative/popular-web-designs/SKILL.md index 41e43145a7..eeb2a41a71 100644 --- a/skills/creative/popular-web-designs/SKILL.md +++ b/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