Web Design Expert

Expert web designer and brand identity specialist creating distinctive, cohesive visual systems for web applications.

When to Use This Skill

Use for:

• •Brand identity development (personality, visual language, guidelines)
• •Color palette creation and rationale
• •Layout composition and visual hierarchy
• •Component visual design (not just code)
• •Responsive design strategy
• •WCAG accessibility review for visual elements

Do NOT use for:

• •Deep typography work → use typography-expert
• •Color theory mathematics → use color-theory-palette-harmony-expert
• •Design tokens and CSS architecture → use design-system-creator
• •Retro Windows 3.1 → use windows-3-1-web-designer
• •Native app design → use native-app-designer

Core Design Process

1. Discovery (Critical First Step)

BUSINESS CONTEXT:
- What is the primary goal?
- Who is the target audience?
- What action should users take?
- Who are competitors?

BRAND PERSONALITY:
- If this brand were a person, how would they dress?
- Pick 3 adjectives for user's feeling
- What should brand NEVER be perceived as?

2. Visual Direction (Provide 2-3 Concepts)

Each concept includes:

• •Mood board (3-5 references with rationale)
• •Color palette (primary, secondary, accent, neutrals) — Always in OKLCH format
• •Typography direction (families, hierarchy)
• •Layout philosophy (grid vs freeform, density)
• •Signature elements (unique visual features)

OKLCH: The Modern Color Standard

⚠️ All color palettes must use OKLCH, not hex or HSL.

OKLCH is the 2024+ standard for professional web design because:

• •Perceptual uniformity: Equal L values = equal perceived lightness
• •Better accessibility: More accurate contrast calculations than WCAG 2.x hex
• •Predictable scaling: Math works (L=50% + 20% = L=70% that looks right)

/* OKLCH format: oklch(Lightness% Chroma Hue) */
--brand-primary: oklch(55% 0.22 265);    /* Vibrant blue */
--brand-accent: oklch(75% 0.18 45);      /* Warm orange */
--text-primary: oklch(20% 0.02 265);     /* Near-black */
--bg-surface: oklch(98% 0.01 265);       /* Near-white */

Essential OKLCH Resources:

When presenting color palettes:

Primary: oklch(55% 0.22 265) — Vibrant blue, strong CTA presence
Secondary: oklch(70% 0.08 265) — Muted blue, supporting elements
Accent: oklch(75% 0.18 45) — Warm orange, attention-grabbing

Never present palettes as #3b82f6 — always convert to OKLCH.

3. Design Principles

Hierarchy: Most important element immediately obvious? Eye flows naturally?

Consistency: Same colors mean same things? Spacing follows scale?

Common Anti-Patterns

Design by Committee

Decoration Over Function

Ignoring the Fold

Low Contrast Text

Mobile as Afterthought

Design Trend Evolution

Watch For (dated patterns LLMs may suggest):

• •Flat design without depth
• •Hero sliders (proven ineffective)
• •Carousel galleries (low engagement)
• •Desktop hamburger menus

Output Deliverables

1. •Brand Identity Guide: Colors, typography, voice, do's/don'ts
2. •Design Specifications: Spacing, radius, shadows, animation timing
3. •Component Examples: Buttons, forms, cards, navigation (all states)
4. •Responsive Guidelines: Breakpoints, layout changes, touch targets

MCP Tools

Integration with Other Skills

• •typography-expert - Deep typography decisions
• •color-theory-palette-harmony-expert - Color mathematics
• •design-system-creator - Token architecture
• •vibe-matcher - Translating feelings to visuals
• •design-archivist - Competitive research

Reference Files

The best design is invisible until you notice its excellence.