hyperflow-design

Featured

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.

AI & Automation 2,560 stars 368 forks Updated today MIT

Install

View on GitHub

Quality Score: 91/100

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

Skill Content

# hyperflow-design — design phase (Antigravity single-agent) Design system and taste, not production code. Follow the `hyperflow` doctrine. ## Steps 1. **Design system first.** Ensure `.hyperflow/design/system.md` exists — create it if missing, extend it (never regenerate) if present: tokens, type scale, motion language, voice, component inventory, references, anti-patterns. 2. **Researched, not invented.** Study **≥2** real-world references from the project's own field, combine them, then add one deliberate signature move — never copy a single source. 3. **Taste applied.** Discover and apply the matching local taste skill(s); pass the anti-slop floor (no default AI gradient, no serif-by-default, one accent, locked corner-radius scale, eyebrow restraint, no duplicate-intent CTAs, hero fits the viewport, every motion communicates state). 4. **Record** the bound design-system tokens and the named signature into the spec. When a motion surface is in scope, apply the Motion-language standards (compositor-only props, spring params, reduced-motion fallback); when a mobile surface is in scope, apply the mobile platform/device/accessibility matrix. ## Rules - No production code — only the design system and the spec. - Defer to accessibility on any a11y conflict (the WCAG floor wins) and to security on any security conflict. - Every best-practice claim about a pattern cites a current source.

Details

Author
jeremylongshore
Repository
jeremylongshore/claude-code-plugins-plus-skills
Created
9 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

design

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

2,560 Updated today
jeremylongshore
AI & Automation Featured

hyperflow-plan

Hyperflow planning phase. Use when a request needs shaping before code — a rough prompt to sharpen, an ambiguous idea to design, or a clear-enough task to decompose. Verbs like plan, design, brainstorm, explore, "should we", "what's the best way to", scope, decompose, "plan out", "break down", "enhance this prompt". Thinking, not building. Writes an optional spec to .hyperflow/specs/<slug>.md and a task file to .hyperflow/tasks/<slug>.md, then hands off to hyperflow-dispatch.

2,560 Updated today
jeremylongshore
Code & Development Listed

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

1 Updated today
jpratt9