Web Design Expert

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.

Changelog

All notable changes to the web-design-expert skill will be documented in this file.

[2.0.0] - 2025-11-29

Changed

• SKILL.md restructured for progressive disclosure (461 → ~140 lines)
• Design process streamlined into quick reference format

Added

• references/layout-systems.md - Grid decision tree, spacing scale (8px base), breakpoints, mobile-first checklist
• references/color-accessibility.md - Minimum viable palette, color psychology, dark mode guidelines, WCAG checklist
• references/tooling-integration.md - 21st.dev MCP tools, Figma MCP integration, design-to-code workflow
• Common anti-patterns with fixes (decoration over function, ignoring the fold, etc.)
• Design trend evolution table (2019-2024+)

Migration

• No changes to frontmatter or activation triggers
• MCP tool documentation now in dedicated reference file
• Main SKILL.md serves as design decision index

[1.2.0] - 2025-11-26

Added

• Figma Integration section with available MCPs table
• Design-to-code workflow using Figma MCP
• Anti-pattern: Manual Color Copying

Changed

• Enhanced MCP integration documentation

[1.1.0] - 2025-11-26

Added

• Complete "When to Use This Skill" section with ✅/❌ checklists
• "When NOT to Use" with redirects to appropriate skills
• 21st.dev & Component Tooling section with MCP tools:
• mcp__magic__21st_magic_component_builder
• mcp__magic__21st_magic_component_inspiration
• mcp__magic__21st_magic_component_refiner
• mcp__magic__logo_search
• 6 common anti-patterns:
• Design by Committee
• Decoration Over Function
• Ignoring the Fold
• Low Contrast Text
• Mobile as Afterthought
• Stock Photo Overload
• Discovery phase with business context questions
• Visual direction development framework
• Design Principles checklists (Hierarchy, Consistency)
• Layout Systems with grid decision tree
• Spacing scale (8px base system)
• Color palette construction guide
• Color psychology quick reference table
• Dark mode considerations
• Responsive design strategy with breakpoints
• Mobile-first checklist
• Accessibility (WCAG 2.1 AA) checklist
• Design trend evolution (2015-Present)
• Brand styles reference (Brutalist, Neumorphic, Glassmorphic, Minimalist, Editorial)
• Output deliverables template
• Integration with other skills section

Changed

• Expanded from 152 lines to 461 lines (3x growth)
• Added NOT clause to description for precise activation
• Enhanced description with activation keywords
• Added MCP tools to allowed-tools

[1.0.0] - 2024-12-01

Added

• Initial skill creation
• Basic web design guidance

Color & Accessibility

Color palettes, psychology, dark mode, and WCAG compliance.

Minimum Viable Palette

PRIMARY: Main brand color (CTAs, key elements)
SECONDARY: Supporting color (headers, accents)
NEUTRAL DARK: Text, borders (#1a1a1a to #333)
NEUTRAL MID: Secondary text, disabled (#666 to #999)
NEUTRAL LIGHT: Backgrounds, cards (#f5f5f5 to #fafafa)
ACCENT: Success/error/warning (semantic colors)

Color Psychology Quick Reference

Dark Mode Guidelines

DO:

• Reduce brightness of images (filter: brightness(0.85))
• Use dark grays (#121212) not pure black (#000)
• Increase contrast for text (bump from 400 to 450 weight)
• Reduce shadow intensity

DON'T:

• Simply invert colors (looks jarring)
• Keep same accent color saturation (lower by 10-20%)
• Forget to test colored text on dark backgrounds

WCAG 2.1 AA Visual Checklist

□ Color contrast 4.5:1 for text, 3:1 for large text
□ Information not conveyed by color alone
□ Focus indicators visible (don't remove outline)
□ Animations can be paused/reduced (prefers-reduced-motion)
□ Text resizable to 200% without breaking layout
□ Touch targets 44x44px minimum
□ Error states clearly indicated (not just red)

Focus State Template

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Don't do this: */
:focus { outline: none; } /* Removes accessibility */

Brand Styles Reference

Brutalist

Raw HTML aesthetic, high contrast, monospace fonts. Use for: Art galleries, experimental studios.

Neumorphic

Soft shadows, raised/recessed effects, monochromatic. Use for: Apps, dashboards (sparingly—accessibility concerns).

Glassmorphic

Frosted glass effects, transparency, depth. Use for: Modern apps, overlays, cards.

Minimalist

Maximum whitespace, typography-focused, limited palette. Use for: Luxury brands, portfolios.

Editorial

Magazine-inspired, mixed typography, large imagery. Use for: Blogs, news sites, storytelling.

Layout Systems

Grid systems, spacing scales, and layout composition.

Grid Decision Tree

IF content-heavy (blog, documentation, dashboard)
  → 12-column grid, consistent gutters

IF marketing/landing page
  → Flexible sections, asymmetric allowed, dramatic whitespace

IF e-commerce/catalog
  → CSS Grid auto-fit for responsive product grids

IF editorial/magazine
  → Mixed grid, large images, pull quotes, visual variety

IF app interface
  → Sidebar + main content, dense but organized

Spacing Scale (8px Base)

--space-1: 4px;   /* Tight: icon padding, inline elements */
--space-2: 8px;   /* Compact: form field padding */
--space-3: 16px;  /* Default: card padding, element gaps */
--space-4: 24px;  /* Comfortable: section gaps */
--space-5: 32px;  /* Generous: major section breaks */
--space-6: 48px;  /* Dramatic: hero margins */
--space-7: 64px;  /* Statement: page sections */
--space-8: 96px;  /* Massive: landing page breaks */

Responsive Breakpoints

/* Content-based breakpoints, not device-based */
/* Start mobile-first, add complexity as viewport grows */

/* Base: Mobile */
.container { padding: 16px; }

/* 640px: Content needs more room */
@media (min-width: 640px) {
  .container { max-width: 640px; padding: 24px; }
}

/* 1024px: Multi-column becomes useful */
@media (min-width: 1024px) {
  .container { max-width: 1024px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* 1280px: Maximum content width reached */
@media (min-width: 1280px) {
  .container { max-width: 1200px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Mobile-First Checklist

□ Touch targets minimum 44x44px
□ No hover-only interactions
□ Text readable without zooming (16px+ base)
□ Forms have appropriate input types (email, tel, date)
□ Images lazy-loaded and responsive
□ Navigation collapses to hamburger or bottom nav
□ Critical actions visible without scrolling

Visual Hierarchy Checklist

□ Is the most important element immediately obvious?
□ Can users scan the page in 3 seconds and understand purpose?
□ Does the eye flow naturally from primary → secondary → tertiary?
□ Are clickable elements obviously clickable?
□ Is there a clear visual distinction between content types?

Consistency Checklist

□ Same colors mean same things throughout?
□ Spacing follows a consistent scale?
□ Typography uses no more than 3 sizes/weights per page?
□ Interactive states (hover, focus, active) are predictable?
□ Icons follow same style (line weight, fill, size)?

Design Tooling Integration

21st.dev, Figma MCP, and component workflows.

21st.dev MCP Tools

Getting Inspiration

Use mcp__magic__21st_magic_component_inspiration to:
- Search for existing UI patterns ("hero section", "pricing table")
- Preview component designs before implementing
- Gather competitive reference quickly

Workflow: 1. 21st_magic_component_inspiration → See what exists 2. Pick elements you like (layout structure, interactions) 3. Design your unique version (don't copy, be inspired)

Building Components

Use mcp__magic__21st_magic_component_builder to:
- Generate production-ready React components
- Get properly typed TypeScript components
- Include Tailwind CSS styling

When to use builder vs hand-code:

• Use builder: Standard patterns where speed matters
• Hand-code: Custom animations, brand-specific interactions

Refining Components

Use mcp__magic__21st_magic_component_refiner to:
- Improve existing component UI
- Modernize dated designs
- Apply current design trends

Finding Logos

Use mcp__magic__logo_search to:
- Get company logos in JSX/TSX/SVG format
- Proper brand colors and proportions

Figma Integration

Available Figma MCPs

Design-to-Code Workflow

1. Designer shares Figma file URL
2. Use Figma MCP to extract:
   - Color palette (exact hex values)
   - Typography specs
   - Spacing values
   - Component structure
3. Build design system tokens from extracted data
4. Generate components with 21st.dev builder
5. Apply Figma-extracted styles

What Figma MCP Can Extract

• Colors: Fill colors, stroke colors, gradients
• Typography: Font family, size, weight, letter-spacing
• Spacing: Padding, margins, gaps (from auto-layout)
• Components: Names, variants, properties
• Images: Export assets from frames

Setup Notes

Figma MCPs require: 1. Figma Personal Access Token 2. MCP server installation 3. Claude Code MCP configuration

Anti-Patterns

Over-relying on templates

21st.dev is for inspiration and scaffolding, not final design. Every component should get custom brand treatment.

Manual Color Copying

Designer says "use this blue" and you guess. Extract exact values from Figma using MCP instead.