web-interface-design

Original：🇺🇸 English

Translated

Use when designing or reviewing web UI, implementing forms/buttons/inputs, fixing visual hierarchy issues, creating color systems, building layouts, or when interface feels cluttered, hard to read, or users don't know what to click.

2installs

Sourceratacat/claude-skills

Added on2026-02-28

NPX Install

npx skill4agent add ratacat/claude-skills web-interface-design

SKILL.md Content

View Translation Comparison →

Web Interface Design

Overview

Design exists to separate the primary from the secondary. Users should instantly recognize what matters. Good interface design is invisible—users accomplish goals without noticing the interface.

This skill orchestrates domain-specific reference files. Read only what you need for the task.

Reference File Index

Task	Load Reference
Font sizes, line spacing, heading hierarchy, vertical rhythm	`references/typography.md`
Input fields, validation, checkboxes, radios, selects, textareas	`references/forms-and-inputs.md`
Button hierarchy, sizing, states, CTAs, ghost buttons	`references/buttons.md`
Color palettes, dark mode, tints/shades, state colors	`references/color-systems.md`
Navigation, cards, tabs, accordions, modals, tables, toasts	`references/ui-components.md`
Grids, spacing scales, responsive patterns, whitespace	`references/layout-and-spacing.md`
Focus techniques, hierarchy principles, action pyramid	`references/visual-hierarchy.md`
Contrast ratios, focus states, screen readers, WCAG	`references/accessibility.md`
CSS implementation patterns, variables, common styles	`references/css-patterns.md`

Quick Decision: Which Reference?

What's the problem?
├─ Text hard to read, spacing feels off → typography.md
├─ Form not working well, validation issues → forms-and-inputs.md
├─ Users don't know what to click → buttons.md OR visual-hierarchy.md
├─ Colors look wrong, dark mode broken → color-systems.md
├─ Need nav/cards/tabs/modals/tables → ui-components.md
├─ Spacing inconsistent, layout cramped → layout-and-spacing.md
├─ Everything competes for attention → visual-hierarchy.md
├─ Accessibility audit or contrast issues → accessibility.md
└─ Need CSS implementation → css-patterns.md

Universal Quick Reference

Spacing Scale (4px base)

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96

Typography Baseline

Body: 16px, line-height 1.5
Heading:body ratio max 1:3 (48px heading for 16px body)
Paragraph spacing: line-height ÷ 1.5

Touch Targets

Minimum: 44×44px
Recommended: 48×48px

Contrast Minimums (WCAG)

Normal text: 4.5:1
Large text (18px+ or 14px+ bold): 3:1
UI components: 3:1

Button Hierarchy

Level	Use For	Treatment
Primary	Main action (ONE per view)	Solid fill, high contrast
Secondary	Alternative actions	Outlined or subtle fill
Tertiary	Minor actions	Text-only or ghost

Dark Mode Essentials

Background: #121212 (not pure black)
Text: #E0E0E0 (not pure white)
Reduce color saturation

Common Mistakes Checklist

Multiple primary buttons per view
Placeholder used as only label
Pure white on pure black
Thin/light font weights
Color-only error indicators
Long centered text
Inconsistent spacing values

Design Review Protocol

Hierarchy: Is primary action obvious? Can you tell what matters?
Readability: Text contrast OK? Line length reasonable (45-75 chars)?
Forms: Labels above fields? Touch targets 44px+? Helpful errors?
Spacing: Consistent scale? Breathing room around elements?
Accessibility: Color not sole indicator? Focus states visible?

When NOT to Use This Skill

Pure visual branding/identity work
Marketing copy decisions
Backend architecture
Mobile native patterns (iOS/Android differ)

Sources

Web Interface Handbook by Aleksei Baranov (Imperavi)
User Interface Typography by Imperavi
Refactoring UI by Wathan & Schoger
WCAG 2.1 accessibility guidelines