skills.rest
Mohammed-Abdelhady
Mohammed-AbdelhadyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Mohammed-Abdelhady/hyperflow --skill hyperflow-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
VanLVanL
1

design-consultation

Generate UI/UX design systems and brand guidelines in a DESIGN.md file.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
mycelium-hqmycelium-hq
31

frontend-taste

Codify frontend design taste for React, Next.js, Tailwind, and Framer Motion workflows.

Official
Advanced
TavokAITavokAI

tailwind-design-system

Create scalable design systems with Tailwind CSS v4 using CSS-first configuration.

Official
Advanced