Claude Code Plugins

Community-maintained marketplace

Feedback

design-guidelines

@imaimai17468/imaimai-front-templete
26
0

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.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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.