design

Guide UI design through visual direction, reference apps, and design principles.

14|Updated May 27, 2026

Search Tags:#interface design #ui design #brand consistency #visual direction #design guidance

Ready to run

npx skills add https://github.com/mlhiter/skills --skill design-mlhiter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design
Source: https://github.com/mlhiter/skills/tree/main/skills/design
Command: npx skills add https://github.com/mlhiter/skills --skill design-mlhiter

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the need for high-quality, production-grade UI design by providing a structured process for building interfaces that align with user goals and brand aesthetics.

Core Features & Use Cases

UI Design Assistance: Offers guidance for designing pages, components, and interfaces.
Visual Problem Resolution: Helps users address visual complaints like inconsistencies, clarity issues, or unappealing aesthetics.
Visual Direction Locking: Provides a systematic approach to locking in the visual direction before starting work, ensuring a cohesive end product.
Component Creation: Assists in creating components that adhere to the visual direction and are functionally robust.
Use Case: If a user has a new feature page to design but isn't sure how to proceed, this Skill can guide them through choosing a visual direction, setting up a reference app, and applying that direction to the design.

Quick Start

Run the design skill with the prefix 🥷 for UI design work. Begin with a clear point of view and specify the visual problem you are addressing.

Frequently Asked Questions about design

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

FAQPage Schema

How do I establish a visual direction for a new UI design?▼

To establish a visual direction for UI design, this Skill guides you through a structured process of defining the visual style, selecting reference apps, and applying design principles to ensure a cohesive end product. It locks the visual direction before component creation begins.

What is the best way to fix visual inconsistencies in an interface?▼

The best way to fix visual inconsistencies in an interface is to apply a systematic approach that locks the visual direction first. This Skill helps resolve visual complaints like clarity issues or unappealing aesthetics by aligning components with your brand consistency goals.

Do I need UI/UX design experience to use this design guidance?▼

Yes, you need an understanding of UI/UX design best practices to use this design guidance effectively. The Skill requires the ability to work with screenshots and code to create production-grade interfaces that align with user goals and brand aesthetics.

How do I create production-grade components that align with my brand?▼

To create production-grade components that align with your brand, this Skill assists in building functionally robust UI elements that adhere to a pre-defined visual direction. It ensures component creation maintains brand consistency across your interface.

Can I use screenshots and code to guide the interface design process?▼

Yes, you can use screenshots and code to guide the interface design process. This Skill leverages your ability to work with these assets to assist in creating distinctive pages, components, and interfaces that solve specific visual problems.