design-guidelines

---

name: design-guidelines description: Comprehensive UI/UX design guidelines covering visual design (typography, color, motion), user experience (cognitive psychology, interaction patterns, mental models), and Sociomedia's Human Interface Guidelines (100 principles). 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 three 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:

• Design Thinking: Mental models, task flows, cognitive budget, context
• Core Principles: Objects not procedures, Modeless, Immediate feedback, Smart defaults, Progressive disclosure, Prevent don't report
• Visual Communication: Signifiers, visual hierarchy, Gestalt grouping, consistency
• UX Psychology: 43 psychology principles with definitions, application strategies, and code examples (organized by category: perception, decision-making, memory, motivation, social influence, patterns)
• Making interfaces feel natural and effortless

hi-design.md

Sociomedia's Human Interface Guidelines (100 items):

• Comprehensive interface design principles from basic concepts to accessibility
• Form design, interaction patterns, and visual feedback
• Layout, visual design, and user experience best practices
• Based on extensive research and real-world implementation experience
• Original source: https://www.sociomedia.co.jp/category/shig

IMPORTANT: Great design requires all perspectives. Visual beauty without usability is frustrating. Usability without aesthetics is forgettable. Human interface principles provide a comprehensive foundation for both. Use all three 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 all documents (ui-design.md, ux-design.md, and hi-design.md) together for comprehensive design guidance.