Can this help with responsive design?

Yes, it provides specific guidance on relative sizing, line lengths, and layout constraints to ensure content looks great on both mobile and desktop.

Does it pick brand colors for me?

No, it focuses on hierarchy, shades, and lightness; use a dedicated color-palette skill for specific brand color selection.

Is it based on specific frameworks like Tailwind or Bootstrap?

The principles are framework-agnostic and provide the underlying logic that can be applied to raw CSS, Tailwind utility classes, or any UI library.

How does this skill improve my CSS?

It applies systematic spacing scales and contrast rules to ensure your styles are consistent, readable, and professionally balanced across all components.

UI Design Principles

Name: UI Design Principles
Author: svengraziani

bysvengraziani

•

设计工具

Applies professional visual hierarchy, spacing systems, and layout rules to improve user interface aesthetics and usability.

This skill equips Claude with a comprehensive set of design rules focused on visual hierarchy, typography, and layout. It allows the AI to provide expert guidance on spacing scales, depth creation through shadows, and polished UI patterns when writing or reviewing CSS and HTML. By prioritizing logic-driven design over arbitrary aesthetic choices, it ensures that web interfaces are professional, balanced, and functional without requiring manual design iterations.

主要功能

01Provides guidance on typography scales, line-height proportions, and baseline alignment

022 GitHub stars

03Optimizes layouts for responsive design by emphasizing content constraints over fluid grids

04Creates realistic depth and elevation using light source emulation and multi-part shadows

05Establishes clear visual hierarchy using font weight, color, and contrast rather than size alone

06Implements a constrained 8px-based spacing and sizing system for layout consistency

使用场景

01Structuring new page layouts from scratch using a grayscale-first approach to ensure hierarchy

02Reviewing UI code to identify and fix ambiguous spacing or weak typography standards

03Refining existing CSS to improve visual polish and spacing consistency across components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svengraziani/ui-design ui-design-principles

For use in Claude.ai and ChatGPT

Download Skill