New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Design Principles

by HermeticOrmus in HermeticOrmus/LibreUIUX-Claude-Code

Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references.

MITAuto-check passedFrontend & Design

Install Design Principles

skills CLI
$ npx skills add HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install HermeticOrmus/LibreUIUX-Claude-Code design-principles --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/HermeticOrmus/LibreUIUX-Claude-Code.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/design-mastery/skills/design-principles .claude/skills/design-principles && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-principles
GitHub stars
113
Token cost
~2k tokens
SKILL.md length
799 words
Files
7 (incl. references, assets)
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references.

  • Works in 10 steps: Visual Hierarchy → Gestalt Principles → The Rule of Thirds → …
  • Defending a layout
  • SKILL.md covers When to Use This Skill, Core Principles, Quick Reference: Principles… and Resources
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Design Principles is an agent skill from HermeticOrmus/LibreUIUX-Claude-Code. Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references. Use when making or defending a layout, type, or color decision, or when a design feels off and you need to name why.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including reference files and assets (for example `assets/principles-checklist.md`, `references/color-theory.md` and `references/composition-rules.md`).

It sits in Frontend & Design, covering UI design and Typography. The repository describes itself as: UI/UX system for Claude Code: 71 plugins, 93 agents, 74 skills. Design mastery, archetypal design, accessibility, and frontend workflows in one validated plugin marketplace. The licence is MIT.

When your agent uses it

  • Defending a layout
  • A design feels off and you need to name why

Example prompts

  • “/design-principles”

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Visual Hierarchy
  2. Gestalt Principles
  3. The Rule of Thirds
  4. Golden Ratio (1:1.618)
  5. Visual Balance
  6. Alignment
  7. Repetition
  8. Contrast
  9. White Space (Negative Space)
  10. Unity

What it can do on your machine

Read from SKILL.md and the folder at commit 41a968c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design Principles loads about 2k tokens when it runs, and up to ~13k if it reads all its reference files. Until then it costs about 80 tokens; SKILL.md has 799 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~80
When it runs · the whole SKILL.md, loaded when a task matches
~2k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~13k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HermeticOrmus/LibreUIUX-Claude-Code at commit 41a968c, republished under its MIT licence (© HermeticOrmus). 799 words, ~2,040 tokens.

Download SKILL.mdSave it as .claude/skills/design-principles/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
design-principles
description
Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references. Use when making or defending a layout, type, or color decision, or when a design feels off and you need to name why.

Design Principles

The fundamental laws governing visual perception and communication. These principles are not opinions—they're observations about how human vision and cognition work.

When to Use This Skill

  • Making visual design decisions
  • Evaluating whether a design "works"
  • Explaining why something feels off
  • Teaching design fundamentals
  • Debugging design problems

Core Principles

1. Visual Hierarchy

The Law: Not all elements are equally important. Design must guide the eye.

Establishing Hierarchy:

ToolWhat It DoesExample
ScaleLarger = more importantHero headlines vs. body text
WeightHeavier = more importantBold headings vs. light body
ColorSaturated/contrasting = attentionPrimary CTA vs. secondary
PositionTop-left (in LTR) = first seenLogo placement
SpaceMore space = more importanceGenerous padding around CTAs
DepthShadows/elevation = prominenceFloating action buttons

Testing Hierarchy: Blur the design at 50%. Can you still identify:

  • The primary focal point?
  • The secondary information?
  • The action you should take?
2. Gestalt Principles

The Law: The brain organizes visual elements into meaningful groups.

Proximity

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:

  • Related items: space-y-2 (8px)
  • Unrelated groups: space-y-8 (32px) or divide-y
Similarity

Elements that look alike appear grouped.

When multiple card types exist, make categories visually distinct:

  • Same category: same border-radius, shadow, padding
  • Different category: different color, icon style, or layout
Continuity

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.

Closure

The mind completes incomplete shapes.

Useful for:

  • Logo design (the WWF panda)
  • Icon design (implied shapes)
  • Cards that bleed off screen (implies more content)
Figure/Ground

Clear separation between subject and background.

Classic example: the arrow in the negative space between the E and x of the FedEx logo.

Common failures:

  • Text on busy image backgrounds
  • Low contrast between layers
  • Unclear what's clickable vs. static
3. The Rule of Thirds

The Law: Placing subjects at 1/3 intersections creates natural balance.

+-------+-------+-------+
|       |       |       |
|   ●   |       |       |  ← Focal point at intersection
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+
|       |       |       |
|       |       |       |
+-------+-------+-------+

For web layouts:

  • Hero text left-aligned, hitting left-third
  • Key visuals placed at intersection points
  • Whitespace fills remaining thirds
4. Golden Ratio (1:1.618)

The Law: A proportion that recurs in art and architecture. Evidence for an innate preference for it is weak and mixed, so treat it as one useful ratio among others (1.25, 1.333, 1.5).

Applications:

  • Content width to sidebar: 1:1.618
  • Heading to body size: 1.618:1
  • Spacing multipliers: 16px → 26px → 42px

Tailwind approximation:

Base unit: 16px (text-base)
Medium:    24px (text-2xl ≈ 16 × 1.5)
Large:     36px (text-4xl = 2.25rem ≈ 16 × 2.25)
5. Visual Balance

The Law: Compositions should feel stable, not falling.

Symmetrical Balance

  • Equal weight on both sides
  • Formal, stable, traditional
  • Use for: corporate, luxury, authoritative

Asymmetrical Balance

  • Unequal elements balanced by visual weight
  • Dynamic, interesting, modern
  • Use for: creative, startups, editorial

Visual Weight Factors:

ElementAdds Weight
SizeLarger = heavier
ColorDarker, saturated = heavier
ComplexityDetailed = heavier
PositionHigher in the frame = heavier (Arnheim)
IsolationAlone = heavier
6. Alignment

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)
Show full SKILL.md (335 more words)Show less
7. Repetition

The Law: Consistent patterns create unity and learnability.

Elements to keep consistent:

  • Border radius (all cards same)
  • Shadow levels (same depth for same importance)
  • Spacing units (multiples of 4px or 8px)
  • Color application (primary always means action)
  • Typography hierarchy (h2 always looks like h2)
8. Contrast

The Law: Difference creates interest and guides attention.

Types of contrast:

  • Size contrast: Large headings, small captions
  • Color contrast: Dark on light, warm accents
  • Weight contrast: Bold headlines, regular body
  • Style contrast: Serif headings, sans body
  • Spacing contrast: Tight groups, generous separation

Minimum contrast requirements:

  • Body text: 4.5:1 ratio (WCAG AA)
  • Large text (24px+ regular, or about 18.66px+ bold): 3:1 ratio
  • UI components: 3:1 ratio
9. White Space (Negative Space)

The Law: What you leave empty is as important as what you fill.

Functions of white space:

  1. Breathing room: Prevents cognitive overload
  2. Grouping: Separates distinct content areas
  3. Emphasis: Isolated elements command attention
  4. Luxury signal: Generous space suggests premium

Common failures:

  • Cramming elements to "fit more"
  • Equal spacing everywhere (creates monotony)
  • Fear of empty space

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
10. Unity

The Law: All elements should feel like they belong together.

Achieving Unity:

  • Consistent color palette
  • Unified typography system
  • Repeated patterns and components
  • Aligned grids
  • Harmonious proportions

Testing Unity: Take any element and place it elsewhere. Does it still feel like it belongs? If not, the system lacks unity.

Quick Reference: Principles Applied

ProblemPrincipleSolution
"It feels cluttered"White SpaceIncrease padding/margins
"I don't know where to look"HierarchyEstablish clear focal point
"It feels disconnected"Unity/RepetitionApply consistent patterns
"It feels boring"ContrastAdd variation in size/color/weight
"Things seem randomly placed"AlignmentCreate shared edges
"The groups are confusing"Proximity/SimilarityCluster related items
"It feels off balance"BalanceRedistribute visual weight

Resources

Read the matching file when a decision needs more depth than the summary above.

  • references/gestalt-principles.md: Deep dive on perceptual grouping
  • references/visual-hierarchy.md: Comprehensive hierarchy techniques
  • references/color-theory.md: Color psychology and application
  • references/typography-fundamentals.md: Type as design element
  • references/composition-rules.md: Layout and arrangement
  • assets/principles-checklist.md: Evaluation checklist

© HermeticOrmus, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 6 other files (references, assets) in plugins/design-mastery/skills/design-principles of HermeticOrmus/LibreUIUX-Claude-Code.

  • SKILL.md
  • assets/principles-checklist.md
  • references/color-theory.md
  • references/composition-rules.md
  • references/gestalt-principles.md
  • references/typography-fundamentals.md
  • references/visual-hierarchy.md

Open the folder on GitHubat commit 41a968c

Compare with similar skills

Design Principles next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design Principles compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design Principles this skillHermeticOrmus/LibreUIUX-Claude-Code113—~2kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT
UI UX Pro Maxsaoudi-h/solar-icons18618 repos~11kAutomated safety check: NotesCustom licence
Baseline UIibelick/ui-skills9.5k8 repos~855Automated safety check: PassMIT
Frontend Designanthropics/skills180k38 repos~2.3kAutomated safety check: PassApache-2.0
Design Guidepaperclipai/paperclip99k1 repos~3.1kAutomated safety check: PassMIT

Similar skills

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    186 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.5k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

  • Frontend Design

    anthropics/skills

    Official

    Pushes the agent toward distinctive visual design for new or reworked UI: a clear aesthetic direction, deliberate typography and choices rooted in the subject.

    180k GitHub starsUsed in 38 repos~2.3k tokens
    Frontend & DesignAuto-check passed

  • Design Guide

    paperclipai/paperclip

    Paperclip UI design system guide for building consistent, reusable frontend components.

    99k GitHub starsUsed in 1 repo~3.1k tokens
    Frontend & DesignAuto-check passed

  • UI/UX Design System Advisor

    Galaxy-Dawn/claude-scholar

    Turns a vague UI request into a concrete design system with style, palette, typography and layout guidance from a search script, plus stack-specific implementation advice.

    5.7k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

More from HermeticOrmus/LibreUIUX-Claude-Code

All 15 skills in this repo

  • Deployment Pipeline Design

    HermeticOrmus/LibreUIUX-Claude-Code

    Design multi-stage CI/CD pipelines with approval gates, security checks, and deployment orchestration.

    113 GitHub starsUsed in 11 repos~2.1k tokens
    Auto-check passed

  • Multi Cloud Architecture

    HermeticOrmus/LibreUIUX-Claude-Code

    Design multi-cloud architectures using a decision framework to select and integrate services across AWS, Azure, and GCP.

    113 GitHub starsUsed in 11 repos~1.2k tokens
    Auto-check passed

  • Archetypal Combinations

    HermeticOrmus/LibreUIUX-Claude-Code

    Rules and worked examples for combining an archetype (structure and behavior) with a Major Arcana card (color and mood) into one coherent design system.

    113 GitHub stars~3.4k tokensUpdated 5 days ago
    Auto-check passed

  • Langchain Architecture

    HermeticOrmus/LibreUIUX-Claude-Code

    Design LLM applications using the LangChain framework with agents, memory, and tool integration patterns.

    113 GitHub starsUsed in 10 repos~2.5k tokens
    Auto-check passed

  • Brand Systems

    HermeticOrmus/LibreUIUX-Claude-Code

    Brand identity building blocks: positioning, personality, archetypes, logo systems, color palettes, type pairing, voice, and guidelines documentation.

    113 GitHub stars~2.3k tokensUpdated 5 days ago
    Auto-check passed

  • Design Masters

    HermeticOrmus/LibreUIUX-Claude-Code

    Working profiles of Saul Bass, Massimo Vignelli, Dieter Rams, Paula Scher, Josef Müller-Brockmann, David Carson, and Paul Rand: key works, principles, and how to apply each in UI work.

    113 GitHub stars~2.7k tokensUpdated 5 days ago
    Auto-check passed

Categories

Questions about Design Principles

What does Design Principles do?

Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references. Design Principles is an agent skill from HermeticOrmus/LibreUIUX-Claude-Code. Core visual design principles (visual hierarchy, Gestalt grouping, composition, balance, contrast, white space, color, typography) with UI fixes, a checklist, and deep-dive references.

When should I use Design Principles?

Design Principles fits situations like: defending a layout; A design feels off and you need to name why.

How do I install Design Principles in Claude Code?

Run `npx skills add HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles -a claude-code`. Or copy the skill folder (plugins/design-mastery/skills/design-principles in HermeticOrmus/LibreUIUX-Claude-Code) into .claude/skills/design-principles in your project. Claude Code loads it when a task matches its description.

How do I install Design Principles in Codex?

Run `npx skills add HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles -a codex`. Or copy the skill folder (plugins/design-mastery/skills/design-principles in HermeticOrmus/LibreUIUX-Claude-Code) into .agents/skills/design-principles in your project. Codex loads it when a task matches its description.

Can I use Design Principles in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-principles, .gemini/skills/design-principles, .github/skills/design-principles and .opencode/skills/design-principles in your project.

What does Design Principles need to run?

SKILL.md names no scripts, command-line tools or credentials: Design Principles is instructions for the agent only.

Does Design Principles access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Design Principles safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design Principles use?

Design Principles is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design Principles use?

About 2k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.

What are the alternatives to Design Principles?

Skills that share tags, products or a category with Design Principles: Make Interfaces Feel Better (samuelclay/NewsBlur, 7.6k stars), UI UX Pro Max (saoudi-h/solar-icons, 186 stars), Baseline UI (ibelick/ui-skills, 9.5k stars) and Frontend Design (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Principles?

HermeticOrmus (a GitHub user) maintains it in HermeticOrmus/LibreUIUX-Claude-Code, which has 113 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 4, 2026.

Source: HermeticOrmus/LibreUIUX-Claude-Code on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.