Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →nousresearch/claude-design
Design one-off HTML artifacts (landing, deck, prototype).
Passed 14 of 23 test cases with the skill, and 9 of 23 without it.
and 7 more in the full report
6 fixed8 passed either way8 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want to build an interactive component prototype in a standalone HTML file using React loaded from a CDN. Should I use unpinned `react@18` scripts and create multiple global `styles` objects?
| Checked | Without skill | With skill |
|---|---|---|
| Advises pinning exact version numbers for CDN React scripts. | Passed | Passed |
| Instructs giving global style objects specific distinct variable names. | Missed | Passed |
The instructions your model reads when the skill loads.
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). 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.
popular-web-designs vs design-mdHermes 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:
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.
You are running in CLI/API mode, not the Claude Design hosted web UI.
Ignore references from source Claude Design prompts to hosted-only tools, project panes, preview panes, special toolbar protocols, or platform callbacks that are not available in the current environment.
Examples of hosted-tool concepts to ignore or remap:
done()fork_verifier_agent()questions_v2()copy_starter_component()show_to_user()show_html()test cases passed, vs 9 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.