web-design-expert

license	Apache-2.0
name	web-design-expert
description	Creates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns. Use for brand identity development, visual design systems, layout composition, and responsive web design. Activate on "web design", "brand identity", "color palette", "UI design", "visual design", "layout". NOT for typography details (use typography-expert), color theory deep-dives (use color-theory-expert), design system tokens (use design-system-creator), or code implementation without design direction.
allowed-tools	Read,Write,Edit,WebFetch,mcp__magic__21st_magic_component_builder,mcp__magic__21st_magic_component_inspiration,mcp__magic__21st_magic_component_refiner,mcp__magic__logo_search
metadata	{"category":"Frontend & UI","tags":["web","brand","ui-ux","layout","visual-design"],"provenance":{"kind":"first-party","owners":["port-daddy"]},"pairs-with":[{"skill":"agentic-coding-ux-designer","reason":"Supplies interaction-pattern and comeback-loop design once the visual system and layout direction are set."},{"skill":"ideal-web-app-builder","reason":"Carries the visual direction this skill produces into a hardened, production design-system contract."},{"skill":"color-theory-palette-harmony-expert","reason":"Deep perceptual color / palette selection once this skill has set the brand direction and contrast targets."},{"skill":"ux-friction-analyzer","reason":"Audits the flow's cognitive load and friction after this skill sets the visual layout."}],"io-contract":{"kind":"deliverable","consumes":["[Truncated]","[Truncated]"],"produces":["[Truncated]","[Truncated]"]}}

Web Design Expert

Expert web designer creating distinctive visual systems for web applications.

Decision Points

Layout Approach Selection

IF content-heavy (blog, documentation, learning platform)
├─ 12-column grid system
├─ High text density with clear hierarchy
└─ Consistent gutters for readability

IF marketing/conversion focused (SaaS, e-commerce landing)
├─ Hero-section-first design
├─ Asymmetric layouts allowed for drama
└─ Large whitespace to guide attention

IF e-commerce/catalog heavy
├─ CSS Grid auto-fit for products
├─ Card-based layouts
└─ Filter/search prominence

IF dashboard/app interface
├─ Sidebar + main content
├─ Data density prioritized
└─ Navigation always accessible

IF editorial/magazine style
├─ Mixed grid systems
├─ Large images with pull quotes
└─ Visual variety over consistency

Color Palette Strategy

IF B2B/Enterprise audience
├─ Blue primary (trust, professional)
├─ Neutral-heavy palette
└─ Minimal accent colors

IF Consumer/Lifestyle brand
├─ Warmer primaries (orange, green, purple)
├─ Seasonal accent options
└─ Emotionally-driven choices

IF High-traffic/accessibility-critical
├─ 4.5:1 contrast minimum enforced
├─ Color-blind tested combinations
└─ Dark mode variants required

Visual Hierarchy Decision Tree

IF user goal = immediate action (signup, purchase)
├─ Hero CTA above fold (mandatory)
├─ Single primary action per page
└─ Visual weight on conversion elements

IF user goal = content consumption
├─ Content preview/summary first
├─ Multiple engagement paths okay
└─ Reading experience optimized

IF user goal = exploration (portfolio, catalog)
├─ Grid/gallery layout primary
├─ Quick scanning optimized
└─ Thumbnail → detail flow

Failure Modes

Design by Committee Syndrome

• Symptoms: Multiple visual styles on same page, conflicting brand messages, no clear design system
• Detection Rule: If you see 3+ different button styles or font families on one page
• Fix: Establish design principles document, enforce single source of truth, get stakeholder buy-in on constraints

Decoration Over Function

• Symptoms: Animations without purpose, visual elements that don't aid comprehension, slow loading due to graphics
• Detection Rule: If you can't explain why each visual element helps the user accomplish their goal
• Fix: Remove elements that don't serve user needs, justify every animation with user benefit

Mobile Afterthought Pattern

• Horizontal scroll on mobile, tiny touch targets, desktop navigation on small screens