design-guidelines

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.