hyperflow-design

Construct UI/visual design systems using design research, taste assessment, and system tokens.

3|Updated May 14, 2026

Search Tags:#design system #visual design #ui design #ui ux #aesthetic creation

Ready to run

npx skills add https://github.com/Mohammed-Abdelhady/hyperflow --skill hyperflow-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperflow-design
Source: https://github.com/Mohammed-Abdelhady/hyperflow/tree/main/templates/antigravity/skills/hyperflow-design
Command: npx skills add https://github.com/Mohammed-Abdelhady/hyperflow --skill hyperflow-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the UI/visual design process by focusing on the design system and taste, ensuring a clean, efficient, and user-friendly interface without the complexity of production code.

Core Features & Use Cases

Design System First: Standardize your UI elements through tokens, type scale, motion language, etc., with an emphasis on extension rather than regeneration.
Real-World References: Combine at least two references with a unique signature move, ensuring depth without direct copying.
Taste Application: Apply matching local taste skills, passing the anti-slop floor for a refined design.
Spec Recording: Document design tokens and signature moves for easy reference.

Quick Start

Run the 'hyperflow design system' command to create or extend your design system, followed by 'hyperflow reference research' for in-depth investigation and 'hyperflow taste apply' to implement your design vision.

Frequently Asked Questions about hyperflow-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create a design system from scratch without generating generic UI?▼

To create a design system without generic UI, construct visual design tokens and type scales by combining real-world references with a unique signature move. This ensures depth and prevents common pitfalls in UI/UX development.

What is the best way to standardize UI elements for a visual design project?▼

The best way to standardize UI elements is by establishing design tokens, type scales, and motion language with an emphasis on extension rather than regeneration. This creates a clean, efficient, and user-friendly interface.

How do I apply aesthetic taste to a UI design system?▼

You apply aesthetic taste to a UI design system by assessing matching local taste skills and passing an anti-slop floor for refinement. This ensures a signature design aesthetic without direct copying from references.

Can I extend an existing UI design system instead of rebuilding it entirely?▼

Yes, you can extend an existing UI design system. The process focuses on extension rather than regeneration, allowing you to document new design tokens and signature moves for easy reference while maintaining your current structure.

What are design tokens and how do they prevent slop in UI/UX development?▼

Design tokens are documented variables that standardize UI elements like type scale and motion language. They prevent slop in UI/UX development by enforcing precision and consistency across the visual design system.

Does establishing a visual design system require writing production code?▼

No, establishing a visual design system does not require production code. The process streamlines UI design by focusing on design research, taste assessment, and system tokens to ensure a user-friendly interface without coding complexity.