design

Featured

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".

AI & Automation 2,716 stars 395 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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.md` before designing a screen, per [`../hyperflow/design-system.md`](../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`](../hyperflow/design-system.md)). - **Local taste skills are invoked live.** The main session calls `Skill` to invoke the matching taste skill; the dispatched `designer` agent Reads the `SKILL.md` and applies it (it has no `Skill` tool). - **Per-step agents (DOCTRINE rule 12).** No inline design — the [`designer`](../../agents/designer.md) specialist does the work; an `accessibility-reviewer` pass gates the result. - **No code in the design phase.** Design produces a system file and a design spec; `dispatch` executes them. - **Failure recovery (DOCTRINE...

Details

Author
jeremylongshore
Repository
jeremylongshore/claude-code-plugins-plus-skills
Created
11 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Featured

hyperflow-design

Hyperflow design phase. Use when designing a UI / visual system or making a screen look good — verbs like "design the UI", "make it look good", "design the screen", "visual design", "design system". Establishes or extends a domain-grounded design system, researches real-world prior art, and renders it slop-free. Thinking and taste, not building.

2,716 Updated today
jeremylongshore
Web & Frontend Featured

design-engineering

Load when reviewing UI code, designing a component or page layout, picking an easing curve or transition pattern, deciding whether something should animate at all, choosing an avatar/typography/color system, building an OKLCH palette or fixing contrast, writing UI copy or error messages, auditing for AI-default tells, code tells, or a11y misses, making a screen look less generated, consuming a project's DESIGN.md or .design tokens, writing design-system docs for agents, giving feedback through Agentation or a similar annotation tool, asking why a UI feels flat or unfinished, judging when delight earns its weight, deciding whether an interaction should make a sound, designing or generating UI sound effects (ElevenLabs or open-source), syncing sound to animation, scoring a product launch video or deriving its sound stem from the motion, cutting a multi-scene launch video so it reads as one camera move, creating or animating SVG (icons, mascots, logo reveals, video-to-vector), prototyping several directions behi

25 Updated 6 days ago
AgentsORG
Web & Frontend Listed

design-process

Use when designing or restyling a UI — a landing page, marketing site, app screen, dashboard, component, or "make it look good / less generic / more premium" — and when the user says the result looks AI-generated, bland, or like every other AI-built site. Also when they want several visual directions to choose from, a design critic pass, or a polish pass before shipping. Not for positioning floating UI (popovers-tooltips), utility-class mechanics (tailwind), or a11y audits (accessibility) — those pair with this.

0 Updated yesterday
mickzijdel