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 desig…
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.
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
Files included with this skill beyond the listing page.
skill mdSKILL.md8,174 B
docsSUMMARY.md536 B
History
First seen on skills.sh
First recorded snapshot · 1 installs
SKILL.md
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
Symptoms: Horizontal scroll on mobile, tiny touch targets, desktop navigation on small screens
Detection Rule: If mobile version requires zooming or horizontal scrolling to use
Fix: Start mobile-first, test on actual devices, ensure 44px minimum touch targets
Low Contrast Accessibility Failure
Symptoms: Light gray text (#999) on white, poor readability in sunlight, user complaints about text visibility
Detection Rule: If any text fails WCAG 4.5:1 contrast ratio when tested
Fix: Use contrast checker tools, test in bright light conditions, provide high-contrast mode option
Information Architecture Collapse
Symptoms: Users can't find primary content, navigation doesn't match mental models, high bounce rates
Detection Rule: If users can't complete primary task within 3 clicks or 30 seconds
Fix: User journey mapping, card sorting for navigation, prominence for key actions
