Design System
Create systematic product designs grounded in research, from UI screens to visual identities.
Installation
- Make sure Claude is on your device and in your terminal.
Skills load from
~/.claude/skills/when Claude Code starts up β so you need it on your machine first. If you don't have it yet, install it once with the command below, then runclaudein any terminal to verify.One-time setupnpm i -g @anthropic-ai/claude-codeAlready have it? Skip ahead.
- Paste into Claude Code or into your terminal.
This copies the whole skill folder into
~/.claude/skills/design-jeremylongshore/β the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.Faster alternative (instruction-only skills)
Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates β they won't be downloaded and the skill will fail when it tries to load them.
Quick install (SKILL.md only)Sign up to copy - Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from
~/.claude/skills/). New skills are picked up on startup. - Just ask Claude.
Skills auto-activate when your request matches the skill's description β no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the βWhat this skill doesβ section above.
Prefer to read the source first? Open on GitHub.
When Claude uses it
Use when the user wants the visual/experiential design of a product done systematically β a design system, a screen, a landing page, or a visual identity β grounded in researched real-world prior art and free of AI slop. Establishes/extends the design system, invokes the matching local taste skill, dispatches the designer specialist, and reviews for taste + accessibility. Standalone β ends with a handoff gate into the chain. Trigger with /hyperflow:design, "design the UI", "make a design system", "design this screen", "give this a visual identity", "redesign this".
What this skill does
Design
Systematic, anti-slop product design. All agents inherit the session model. Reviewers bold-labeled; Workers plain.
This skill exercises Layer 4 (Brainstorming/Spec) and the design layer of Layer 0 (Project Analysis). It is
thinking, not building β no source code is written here. The only writes are to .hyperflow/design/system.md and
.hyperflow/specs/. It ends with a handoff gate into /hyperflow:plan β /hyperflow:dispatch for the build.
Iron Rules
- Design system first. Every run establishes or extends
.hyperflow/design/system.mdbefore designing a screen, per../hyperflow/design-system.md. The system is created once and extended, never regenerated. - Researched, not invented. Ground every direction in β₯2 real products from the project's field, combine
them, then diverge with one deliberate signature (the method in
design-system.md). - Local taste skills are invoked live. The main session calls
Skillto invoke the matching taste skill; the dispatcheddesigneragent Reads theSKILL.mdand applies it (it has noSkilltool). - Per-step agents (DOCTRINE rule 12). No inline design β the
designerspecialist does the work; anaccessibility-reviewerpass gates the result. - No code in the design phase. Design produces a system file and a design spec;
dispatchexecutes them. - Failure recovery (DOCTRINE rule 14) per
../hyperflow/failure-recovery.md. - No AI attribution in any file written.
Per-Step Agent Map (DOCTRINE rule 12)
| Step | Sub-phase | Workers | Reviewers | Notes |
|---|---|---|---|---|
| 1 β Triage | β | β | β | Mechanical classification (exempt) per ../hyperflow/task-triage.md |
| 2 β Design system | 2a β establish/extend .hyperflow/design/system.md | designer | Reviewer | Creates if missing; extends if present |
| 3 β Research + direction | 3a β prior-art research + combine + diverge | designer (fan-out β€ 3 by dimension) | Reviewer | Web-research-first; β₯2 references |
| 4 β Design spec | 4a β translate direction into tokens/spec | designer | Reviewer | Written to .hyperflow/specs/<slug>.md |
| 5 β Taste + a11y review | β | β | designer verdict + accessibility-reviewer | Anti-slop floor + WCAG floor |
| 6 β Handoff gate | β | β | β | AskUserQuestion only (exempt β structural gate) |
Approval Gates
| Gate | When | Format |
|---|---|---|
| Handoff gate | Step 6, after the spec is written | AskUserQuestion β build now / plan first / stop |
Flow
Step 1 β Triage
Classify the request per ../hyperflow/task-triage.md. types will include ui
and/or creative; the Brain confirms designer on the roster.
Step 2 β Design system
Read .hyperflow/design/system.md. If missing, dispatch designer β establish design system to create it (domain,
tokens, type scale, spacing, motion, voice, components, references, anti-patterns) per
design-system.md. If present, dispatch designer β extend design system to add
only what this brief needs. Then **Reviewer** β design-system coverage check.
Step 3 β Research + direction
Invoke the matching local taste skill(s) live via Skill (per the index in design-system.md). Then dispatch
designer β research prior art + propose direction (fan-out β€ 3 by visual language / motion+interaction / IA when
the surface is broad): study β₯2 real systems in the field, combine, diverge with one named signature. Then
**Reviewer** β direction grounding check (β₯2 references combined, not copied; signature is deliberate).
Step 4 β Design spec
Dispatch designer β author design spec to translate the chosen direction into the bound design-system tokens and
write it to .hyperflow/specs/<slug>.md (format per ../hyperflow/artefact-format.md).
Then **Reviewer** β spec sanity check.
Step 5 β Taste + accessibility review
Dispatch in parallel: **designer** β taste verdict (anti-slop floor) β₯ **accessibility-reviewer** β a11y floor
(WCAG AA, focus, reduced-motion, RTL). On a11y conflict, the floor wins (Step 5 defers to the a11y verdict).
Step 6 β Handoff gate (STRUCTURAL GATE Β· DOCTRINE rule 8)
? Design spec ready at .hyperflow/specs/<slug>.md β build it?
Build now (Recommended) β chain to /hyperflow:plan β /hyperflow:dispatch
Plan first β open /hyperflow:plan to decompose without building yet
Stop β leave the spec; build later
On Build now β invoke Skill with skill: plan and args: "session=one spec=.hyperflow/specs/<slug>.md". On
Plan first β invoke plan without auto-dispatch. On Stop β print one line and stop. If AskUserQuestion is
unavailable, print the gate as a Hyperflow Question block and wait β never auto-build silently.
Output Format
Two outputs:
- The design system at
.hyperflow/design/system.mdβ living token document (created or extended this run). - The design spec at
.hyperflow/specs/<slug>.mdβ the direction, tokens, signature, andReferences:block.
Chat shows one status box pointing at the files, never the token dump (file-first, rule 8):
ββ Design Result βββββββββββββββββββββ
Brief: <one line>
System: .hyperflow/design/system.md (created | extended)
Spec: .hyperflow/specs/<slug>.md
Verdict: taste PASS Β· a11y PASS
βββββββββββββββββββββββββββββββββββββ
Hand-off
- Plan it β auto-chain to
/hyperflow:planfor decomposition; plan then stops at its build-location gate and asks where to build (it never auto-implements). - Stop β spec persists for a later build.
Doctrine
Full rules in DOCTRINE.md. Design method, taste-skill index, and anti-slop floor in
design-system.md. Persona standards (ui, creative) in
personas-A.md β bound by the designer, never restated.
Overview
/hyperflow:design runs systematic product design: it establishes or extends the project's design system, researches
real-world prior art in the project's field, invokes the matching local taste skill, dispatches the designer
specialist to combine references and diverge with one deliberate signature, and gates the result on a taste +
accessibility review before handing off to the build chain.
Prerequisites
.hyperflow/cache recommended (Layer 0 analysis improves design context). Run/hyperflow:scaffoldfirst if missing.- Local taste skills installed under
~/.claude/skills/(the skill degrades gracefully to the anti-slop floor indesign-system.mdwhen a specific taste skill is absent).
Related skills
Artifact Theme Toolkit
anthropics
Apply professional color and font themes to slides, docs, and web pages.
Reference UI to Design System
daymade
Extract design systems from UI screenshots and generate implementation-ready design prompts.
UI/UX Pro Max
anthropics
Build production-grade web components and interfaces with distinctive, polished design.
MoAI Design System
modu-ai
Build accessible design systems with tokens, components, and intent-first principles.