Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.
Installs into .claude/skills of the current project.
Are you the author of Design Guidelines?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/majiayu000-design-guidelines)
---
name: design-guidelines
description: Comprehensive UI/UX design guidelines covering visual design (typography, color, motion) and user experience (cognitive psychology, interaction patterns, mental models). Use when building frontend interfaces or evaluating design decisions.
license: Complete terms in LICENSE.txt
---
This skill provides comprehensive design guidance for creating exceptional frontend interfaces that are both visually distinctive and cognitively intuitive.
## When to Use
Apply these guidelines when:
- Building web components, pages, or applications
- Making UI/UX design decisions
- Designing interaction patterns and information architecture
- Evaluating existing interfaces for improvements
- Ensuring production-grade design quality
## Structure
This skill consists of two complementary perspectives:
### ui-design.md
Visual design principles focused on aesthetics and brand:
- Typography and color systems
- Motion and micro-interactions
- Spatial composition and layouts
- Anti-patterns to avoid (generic AI aesthetics)
- Creating memorable, distinctive interfaces
### ux-design.md
User experience principles based on cognitive psychology and HCI:
- Mental models and task flows
- Interaction patterns and usability
- Cognitive biases and perception
- Accessibility and inclusive design
- Making interfaces feel natural and effortless
**IMPORTANT**: Great design requires both perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Use both documents together for complete design guidance.
## Design Philosophy
- **Intentionality over intensity**: Bold maximalism and refined minimalism both work - the key is executing with precision
- **Invisible interface**: The best UX feels like no UX at all - users accomplish goals without thinking about the tool
- **Context-specific creativity**: Avoid generic solutions - design for the specific problem, audience, and constraints
- **Cognitive respect**: Every element costs mental effort - be ruthless about reducing unnecessary complexity
Reference the specific documents (ui-design.md or ux-design.md) as needed for detailed guidance.
