Agent skill · design visual · nousresearch
claude-design
Design one-off HTML artifacts (landing, deck, prototype).
Why this skill is useful
Provides a structured design process and taste for creating one-off HTML artifacts that the AI wouldn't reliably generate on its own.
What it needs
About 12k tokens when loaded. Last updated 2026-08-07. 226,679 stars on the source repository.
What this skill does
Claude Design for CLI/API Agents Use this skill when the user asks for design work that would normally fit Claude Design, but the agent is running in a CLI/API environment instead of the hosted Claude Design web UI. 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. Before starting, check for other web-design skills like popular-web-designs (ready-to-paste design systems for Stripe, Linear, Vercel, Notion, etc.) and design-md (Google's DESIGN.md token spec format; an optional skill, installed with hermes skills install official/creative/design-md). If the user wants a known brand's look, load popular-web-designs alongside this one and let it supply the visual vocabulary. If the deliverable is a token spec file rather than a rendered artifact, use design-md instead. Full decision table below. 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 ge …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/claude-design