design

Establish and extend design systems with accessibility and research reviews.

3|Updated May 14, 2026
One-click install
npx skills add https://github.com/Mohammed-Abdelhady/hyperflow --skill design-mohammed-abdelhady
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Mohammed-Abdelhady/hyperflow/tree/main/skills/design
Command: npx skills add https://github.com/Mohammed-Abdelhady/hyperflow --skill design-mohammed-abdelhady

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenges in creating consistent, research-backed, and aesthetically pleasing designs for products. It helps avoid AI-generated 'slop' by establishing a structured design system and review process.

Core Features & Use Cases

  • Establish and Extend Design Systems: Systematically build or expand on existing design systems for UIs, landing pages, or visual identities.
  • Research and Direction: Incorporate real-world examples into design directions to ensure they are grounded in existing design solutions.
  • Local Taste Skills Integration: Incorporate local taste preferences by invoking the matching skill during the design process.
  • Accessibility Review: Ensure that designs meet accessibility standards, promoting inclusivity and user-friendliness.
  • Use Case: Utilize the skill to design a new application's user interface by creating a design system, researching similar apps, and ensuring the design is accessible and aligned with local taste.

Quick Start

Trigger the skill with the command "/hyperflow:design" followed by "design the UI".

Frequently Asked Questions about design

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

FAQPage Schema
How do I create a consistent product design system without generating generic UI?

To create a consistent product design system, establish a structured foundation and review process to avoid AI-generated UI slop. This approach builds or expands design systems for user interfaces by grounding directions in real-world examples and research.

How do I incorporate real-world examples into my UI design directions?

Incorporate real-world examples into your UI design directions by researching existing design solutions during the systematized design process. This grounds your product design directions in established aesthetics rather than generating isolated concepts.

Can I review my application's user interface for accessibility standards during design?

Yes, you can review your application's user interface for accessibility standards during the design process. This ensures designs meet accessibility requirements, promoting inclusivity and user-friendliness across the established design system.

What is the best way to align a visual identity with specific local taste preferences?

The best way to align a visual identity with specific local taste preferences is by invoking matching local taste skills during the design process. This coordinates localized aesthetic adjustments within your established product design system.

Do I need a well-defined design system before extending a landing page UI?

Yes, you need a well-defined design system before extending a landing page UI. The systematic design approach requires an existing design system foundation to ensure visual consistency and accessibility across new product design directions.

Why does my design output lack aesthetic taste despite using a systematic design approach?

Your design output may lack aesthetic taste if local taste skills are not properly coordinated during the design process. Integrating these skills ensures your design system aligns with specific aesthetic preferences and avoids generic results.