claudegoodies
Skill

claude-design

From NousResearch

Design one-off HTML artifacts (landing, deck, prototype).

Guides an agent to produce a self-contained local HTML artifact (landing page, deck, prototype) via a design process.

Use it when

  • Building a one-off landing page, prototype, or HTML slide deck
  • Redesigning a UI from screenshots, repos, or brand docs
  • Exploring components, dashboards, onboarding flows, or motion studies
  • Working in a CLI/API agent instead of the hosted Claude Design UI

Skip it if

  • You want an exact clone of a known brand's look — use popular-web-designs instead
  • You need a persistent DESIGN.md token spec file — use design-md instead
  • You need implementation inside an existing repo's stack rather than a standalone HTML file

Facts

Repository
NousResearch/hermes-agent
Status
Actively maintained
Last commit
Source file
skills/creative/claude-design/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# 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).** 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
View full source on GitHub →

Other skills