How does this skill improve Claude's UI suggestions?

It provides Claude with a framework of objective design laws, allowing it to justify layout choices based on cognitive science and visual perception rather than arbitrary styling.

Can this skill help with Tailwind CSS development?

Yes, the skill includes specific implementation guides for Tailwind, mapping design principles like spacing scales and typography hierarchy directly to Tailwind utility classes.

Does it include accessibility standards?

Yes, it incorporates WCAG contrast requirements and emphasizes clear visual communication, which are foundational to creating accessible web interfaces.

Is this skill useful for developers with no design background?

Absolutely. it bridges the gap by providing a structured vocabulary and checklist that helps developers identify why a design 'feels off' and how to fix it systematically.

Visual Design Principles

Name: Visual Design Principles
Author: HermeticOrmus

byHermeticOrmus

•

디자인 도구

Applies fundamental visual design laws and Gestalt psychology to create balanced, intuitive, and professional user interfaces.

This skill equips Claude with a deep understanding of the core laws governing visual perception and communication. It enables the AI to move beyond subjective opinions by applying proven principles—such as visual hierarchy, Gestalt laws, and the Golden Ratio—to evaluate layouts, debug cluttered interfaces, and make informed decisions about typography, spacing, and composition. Whether building a new UI from scratch or refining an existing design, this skill ensures your project adheres to professional standards for clarity, balance, and aesthetic appeal.

주요 기능

01Applies mathematical composition rules like the Rule of Thirds and the Golden Ratio.

02Implements Gestalt principles for intuitive element grouping and cognitive load reduction.

032 GitHub stars

04Establishes clear visual hierarchy using scale, weight, color, and strategic positioning.

05Provides objective design audits and justifications based on proven psychological observations.

06Optimizes negative space to improve readability and create a premium aesthetic feel.

사용 사례

01Explaining the 'why' behind UI changes to stakeholders using professional design vocabulary.

02Generating Tailwind CSS layouts that follow consistent spacing and alignment patterns.

03Refactoring a cluttered dashboard to improve visual flow and action-item prominence.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

Download Skill