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".
74
94%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
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.
.hyperflow/design/system.md before designing a screen,
per ../hyperflow/design-system.md. The system is created once and extended, never
regenerated.design-system.md).Skill to invoke the matching taste skill; the
dispatched designer agent Reads the SKILL.md and applies it (it has no Skill tool).designer specialist
does the work; an accessibility-reviewer pass gates the result.dispatch executes them.../hyperflow/failure-recovery.md.| 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) |
| Gate | When | Format |
|---|---|---|
| Handoff gate | Step 6, after the spec is written | AskUserQuestion — build now / plan first / stop |
Classify the request per ../hyperflow/task-triage.md. types will include ui
and/or creative; the Brain confirms designer on the roster.
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.
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).
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.
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).
? 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 laterOn 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.
Two outputs:
.hyperflow/design/system.md — living token document (created or extended this run)..hyperflow/specs/<slug>.md — the direction, tokens, signature, and References: 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
─────────────────────────────────────/hyperflow:plan for decomposition; plan then stops at its build-location gate and asks where to build (it never auto-implements).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.
/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.
.hyperflow/ cache recommended (Layer 0 analysis improves design context). Run /hyperflow:scaffold first if
missing.~/.claude/skills/ (the skill degrades gracefully to the anti-slop floor in
design-system.md when a specific taste skill is absent).88dcf65
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.