Skills
.Work. You
Rest

UI Visual Design System

Community

Build clearer, more accessible interfaces.

Design & Creative#typography#accessibility#visual design#design tokens#color system#layout grid#ui hierarchy
Authorphazurlabs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you design interfaces that are visually coherent, readable, and accessible by turning loose aesthetic decisions into a structured system for typography, color, spacing, hierarchy, elevation, and iconography.

Core Features & Use Cases

  • Typography systems: Create scalable type hierarchies, readable line lengths, and consistent text styles for UI, editorial, and data-heavy layouts.
  • Color and accessibility: Build semantic color palettes, ensure contrast compliance, and design light/dark modes that remain usable across contexts.
  • Spacing and layout: Apply grid-based spacing, rhythm, and responsive composition to reduce clutter and improve scanability.
  • Use case: A product team can use this Skill to audit a dashboard, standardize its text styles and spacing tokens, and resolve inconsistent contrast and hierarchy issues before shipping.

Quick Start

Use the UI Visual Design System skill to review my interface and give me a practical set of typography, color, spacing, hierarchy, and accessibility improvements.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: UI Visual Design System
Download link: https://github.com/phazurlabs/ux-ui-mastery/archive/main.zip#ui-visual-design-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.