Does it help with web accessibility?

Absolutely. It incorporates WCAG AA contrast requirements and visual clarity checks to ensure your designs are accessible to all users.

How does this skill improve my web development projects?

It applies objective visual laws like hierarchy, balance, and proximity to ensure your user interfaces are intuitive, professional, and easy to navigate.

Can I use this skill with Tailwind CSS?

Yes, the skill includes specific implementation guides for applying design principles using Tailwind's spacing scales, typography units, and utility classes.

Is this skill meant for designers or developers?

It is designed for both. It helps developers make better design decisions without a formal background and helps designers translate their vision into systematic code.

Design Principles & Mastery

Name: Design Principles & Mastery
Author: HermeticOrmus

byHermeticOrmus

0•

デザインツール

Implements fundamental visual design laws and Gestalt psychology to create professional, balanced, and high-converting user interfaces.

The Design Principles skill empowers Claude Code with the core laws governing visual perception and communication. Drawing from the philosophies of masters like Saul Bass and Dieter Rams, it provides systematic workflows for establishing visual hierarchy, applying Gestalt principles, and mastering composition. Whether you are debugging a cluttered UI, aligning elements using the Golden Ratio, or ensuring accessibility through contrast standards, this skill transforms subjective design choices into objective, science-backed decisions that improve user experience and brand authority.

主な機能

01Gestalt psychology application for intuitive element grouping

02Mathematical composition tools including the Golden Ratio and Rule of Thirds

03WCAG-compliant contrast and accessibility validation

040 GitHub stars

05Visual hierarchy evaluation using scale, weight, and color theory

06Tailwind CSS-optimized spacing and typography implementation patterns

ユースケース

01Building systematic brand identities and design systems from scratch

02Explaining design decisions to stakeholders using objective psychological principles

03Auditing existing UI/UX layouts for clarity and professional polish

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