skills.rest
HermeticOrmus
HermeticOrmusCOMMUNITY
Explore all skills by this author →
Website𝕏@dbodartmGitHub

design-principles

Explain visual design principles and evaluate designs with a checklist.

89|14|Updated Nov 15, 2025
Search Tags:#ui/ux#visual design#design principles#composition#hierarchy#gestalt
One-click install
npx skills add https://github.com/HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles-hermeticormus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-principles
Source: https://github.com/HermeticOrmus/LibreUIUX-Claude-Code/tree/main/plugins/design-mastery/skills/design-principles
Command: npx skills add https://github.com/HermeticOrmus/LibreUIUX-Claude-Code --skill design-principles-hermeticormus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps you understand and apply the core visual design principles that make interfaces effective and aesthetically pleasing, moving beyond subjective opinions to objective design laws.

Core Features & Use Cases

  • Learn Design Laws: Understand principles like Visual Hierarchy, Gestalt, Rule of Thirds, Golden Ratio, Balance, Alignment, Repetition, Contrast, White Space, and Unity.
  • Evaluate Designs: Use a provided checklist to critically assess the effectiveness of any design.
  • Improve Decision Making: Make informed choices about layout, color, typography, and spacing.
  • Use Case: When designing a new dashboard, use this Skill to ensure elements are properly aligned, hierarchy is clear, and sufficient white space is used to prevent cognitive overload.

Quick Start

Explain the principle of visual hierarchy and provide an example of how to implement it in a web layout.

Frequently Asked Questions about design-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the core visual design principles for effective UI/UX layouts?▼

You can evaluate visual design using a detailed checklist that assesses alignment, hierarchy clarity, and white space. This checklist helps critically identify cognitive overload and ensure elements follow objective design laws rather than subjective opinions.

How do I apply visual hierarchy and Gestalt principles to a web dashboard?▼

Visual design fundamentals cover the rule of thirds and golden ratio for proportional layout balance. These mathematical concepts guide composition and spacing decisions to create structurally harmonious and visually pleasing UI elements.

Can I use these design fundamentals to improve UI typography and color decisions?▼

You can use these design fundamentals to make informed choices about UI typography, color, layout, and spacing. The principles provide objective laws that replace subjective opinions when styling interfaces and managing visual weight.

Do I need prior design experience to understand these composition and hierarchy rules?▼

White space and contrast are crucial in UI design to prevent cognitive overload and establish clear visual hierarchy. Proper use of white space separates elements, while contrast directs user attention to key interface areas.

Related Skills

Explore More Design & Creative Skills→
0xUrsanomics0xUrsanomics
2

plan-design-review

Evaluate and refine project plans using design heuristics and UX principles.

Community
Advanced
JongsixJongsix

moai-design-tools

Translate Figma metadata and .pen designs into React/Tailwind components.

Community
Advanced
dbmccodbmcco
20

keynote-slides

Create single-file Keynote-style HTML slide decks with brand tokens and Gemini-generated visuals.

Community
Advanced
JansenAnalyticsJansenAnalytics
5

frontend-inspector

Analyze frontend screenshots to detect visual defects and generate structured reports.

Community
Intermediate