From design-mastery
Explains core visual design principles like gestalt psychology, visual hierarchy, rule of thirds, color theory, and typography for making design decisions and evaluating UIs.
npx claudepluginhub hermeticormus/libreuiux-claude-code --plugin design-masteryThis skill uses the workspace's default tool permissions.
The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.
Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.
The Law: Not all elements are equally important. Design must guide the eye.
Establishing Hierarchy:
| Tool | What It Does | Example |
|---|---|---|
| Scale | Larger = more important | Hero headlines vs. body text |
| Weight | Heavier = more important | Bold headings vs. light body |
| Color | Saturated/contrasting = attention | Primary CTA vs. secondary |
| Position | Top-left (in LTR) = first seen | Logo placement |
| Space | More space = more importance | Generous padding around CTAs |
| Depth | Shadows/elevation = prominence | Floating action buttons |
Testing Hierarchy: Blur the design at 50%. Can you still identify:
The Law: The brain organizes visual elements into meaningful groups.
Elements near each other are perceived as related.
Good: [Label] [Label]
[Input] [Input]
(8px gap) (8px gap)
(32px gap between groups)
[Label] [Label]
[Input] [Input]
Bad: [Label] [Label] [Label] [Label]
[Input] [Input] [Input] [Input]
(equal spacing destroys grouping)
In Tailwind:
space-y-2 (8px)space-y-8 (32px) or divide-yElements that look alike appear grouped.
When multiple card types exist, make categories visually distinct:
The eye follows smooth paths.
Applied to navigation:
[Home] → [Products] → [About] → [Contact]
↓
[Category A]
[Category B]
[Category C]
Lines don't need to be visible—implied lines work.
The mind completes incomplete shapes.
Useful for:
Clear separation between subject and background.
Common failures:
The Law: Placing subjects at 1/3 intersections creates natural balance.
+-------+-------+-------+
| | | |
| ● | | | ← Focal point at intersection
+-------+-------+-------+
| | | |
| | | |
+-------+-------+-------+
| | | |
| | | |
+-------+-------+-------+
For web layouts:
The Law: Proportions found in nature feel inherently pleasing.
Applications:
1:1.6181.618:116px → 26px → 42pxTailwind approximation:
Base unit: 16px (text-base)
Medium: 24px (text-2xl ≈ 16 × 1.5)
Large: 40px (text-4xl ≈ 16 × 2.5)
The Law: Compositions should feel stable, not falling.
Symmetrical Balance
Asymmetrical Balance
Visual Weight Factors:
| Element | Adds Weight |
|---|---|
| Size | Larger = heavier |
| Color | Darker, saturated = heavier |
| Complexity | Detailed = heavier |
| Position | Lower = heavier |
| Isolation | Alone = heavier |
The Law: Elements should share visual lines, even if not explicitly drawn.
Strong Alignment:
[Logo]
_________________________
[Navigation links ]
_________________________
[Headline ]
[Subhead ]
[CTA Button]
(Everything shares left edge)
Weak Alignment:
[Logo]
[Navigation links]
[Headline]
[Subhead ]
[CTA Button]
(No consistent edge)
The Law: Consistent patterns create unity and learnability.
Elements to keep consistent:
The Law: Difference creates interest and guides attention.
Types of contrast:
Minimum contrast requirements:
The Law: What you leave empty is as important as what you fill.
Functions of white space:
Common failures:
Tailwind spacing guide:
Tight (related): gap-2 (8px)
Standard (siblings): gap-4 (16px)
Section (groups): gap-8 (32px) or py-12
Page (major): gap-16 (64px) or py-24
The Law: All elements should feel like they belong together.
Achieving Unity:
Testing Unity: Take any element and place it elsewhere. Does it still feel like it belongs? If not, the system lacks unity.
| Problem | Principle | Solution |
|---|---|---|
| "It feels cluttered" | White Space | Increase padding/margins |
| "I don't know where to look" | Hierarchy | Establish clear focal point |
| "It feels disconnected" | Unity/Repetition | Apply consistent patterns |
| "It feels boring" | Contrast | Add variation in size/color/weight |
| "Things seem randomly placed" | Alignment | Create shared edges |
| "The groups are confusing" | Proximity/Similarity | Cluster related items |
| "It feels off balance" | Balance | Redistribute visual weight |