Is this skill only for aesthetics?

No, it focuses on the science of visual perception and cognitive psychology to ensure designs are functional, clear, and easy for users to navigate.

What design masters does this skill draw from?

The skill incorporates systematic workflows and philosophies from design legends like Saul Bass and Dieter Rams to ensure professional-grade results.

How does this skill help with UI development?

It provides specific guidance on applying hierarchy, contrast, and spacing, including practical implementation examples for CSS frameworks like Tailwind.

Can this skill evaluate existing designs?

Yes, it can analyze code or design descriptions to check for balance, alignment, and WCAG accessibility standards such as color contrast ratios.

Visual Design Principles

Name: Visual Design Principles
Author: HermeticOrmus

byHermeticOrmus

0•

Design Tools

Applies foundational visual laws and cognitive psychology to create professional, high-impact user interfaces and brand identities.

This skill equips Claude with a comprehensive framework of design fundamentals, moving beyond subjective aesthetics to evidence-based visual communication. It enables the AI to evaluate, debug, and implement designs based on core principles such as Gestalt psychology, visual hierarchy, the Golden Ratio, and accessibility-compliant contrast. Whether you are building a landing page from scratch or auditing an existing layout, this skill ensures every element serves a specific purpose and adheres to proven standards of balance, alignment, and unity, providing actionable implementation patterns for tools like Tailwind CSS.

Key Features

010 GitHub stars

02Applies mathematical composition rules including the Rule of Thirds and the Golden Ratio for pleasing layouts.

03Establishes clear visual hierarchy through strategic use of scale, weight, color, and position.

04Implements Gestalt psychology principles like Proximity and Similarity for intuitive grouping.

05Ensures accessibility compliance through rigorous contrast ratio testing and typographic standards.

06Provides systematic spacing and alignment workflows optimized for modern frontend frameworks.

Use Cases

01Generating professional UI designs that follow established visual communication laws.

02Evaluating and debugging layout issues to improve user navigation and clarity.

03Providing design rationales and teaching fundamentals during the development process.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hermeticormus/design-mastery-claude-code design-principles

For use in Claude.ai and ChatGPT

Download Skill