designing-visual-hierarchy

What problem does it solve?

This Skill addresses the challenge of creating visually appealing and professional user interfaces by focusing on the critical first impression users form within milliseconds. It guides AI agents in making effective design decisions regarding typography, color, spacing, and layout.

Core Features & Use Cases

• Perception-Based Typography: Implements responsive font sizing and optimal line heights for readability.
• Color Contrast Guidance: Ensures adherence to WCAG AA standards for accessibility and visual comfort.
• Depth and Spacing: Utilizes shadows and white space to establish a clear visual hierarchy and convey sophistication.
• Use Case: When designing a new landing page, this Skill ensures that headings, body text, and interactive elements are presented with optimal readability, appropriate contrast, and a premium feel that engages users immediately.

Quick Start

Apply the designing-visual-hierarchy skill to ensure the website's typography uses perception-based sizes and optimal line heights.