Core visual design principles that underpin all great design. Master gestalt psychology, visual hierarchy, composition, color theory, and typography fundamentals. Use when making design decisions or evaluating designs against proven principles.
Applies core visual design principles like gestalt psychology and hierarchy to evaluate or create effective designs.
/plugin marketplace add hermeticormus/libreuiux-claude-code/plugin install design-mastery@claude-code-workflowsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
assets/principles-checklist.mdreferences/color-theory.mdreferences/typography-fundamentals.mdThe 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 |
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.