🇺🇸English
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
| What it looks like | Why it's wrong |
|---|
| Multiple visual styles on same page | Destroys brand coherence |
| Instead : Establish principles early, enforce consistency | |
Decoration Over Function
| What it looks like | Why it's wrong |
|---|
| Fancy animations without purpose | Slows performance, distracts |
| Instead : Every element must earn its place | |
Ignoring the Fold
| What it looks like | Why it's wrong |
|---|
| Critical info below viewport | 80% attention is above fold |
| Instead : Hero must have value prop + primary CTA | |
Low Contrast Text
| What it looks like | Why it's wrong |
|---|
| Light gray on white (#999 on #fff) | Fails WCAG, excludes users |
| Instead : Minimum 4.5:1 contrast ratio | |
Mobile as Afterthought
| What it looks like | Why it's wrong |
|---|
| Desktop-first that "shrinks" | 60%+ traffic is mobile |
| Instead : Design mobile-first, enhance for desktop | |
Design Trend Evolution
| Era | Trend |
|---|
| 2019-2021 | Subtle shadows, layering, dark mode |
| 2022-2023 | Oversized typography, variable fonts |
| 2024+ | Bento grids, claymorphism, grain, AI personalization |
Watch For (dated patterns LLMs may suggest):
- Flat design without depth
- Hero sliders (proven ineffective)
- Carousel galleries (low engagement)
- Desktop hamburger menus
Output Deliverables
- Brand Identity Guide : Colors, typography, voice, do's/don'ts
- Design Specifications : Spacing, radius, shadows, animation timing
- Component Examples : Buttons, forms, cards, navigation (all states)
- Responsive Guidelines : Breakpoints, layout changes, touch targets
MCP Tools
| Tool | Purpose |
|---|
21st_magic_component_inspiration | Search UI patterns for inspiration |
21st_magic_component_builder | Generate React/Tailwind components |
21st_magic_component_refiner | Improve existing component UI |
logo_search | Get company logos in JSX/TSX/SVG |
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
| File | Contents |
|---|
references/layout-systems.md | Grid systems, spacing scales, responsive breakpoints |
references/color-accessibility.md | Palettes, psychology, dark mode, WCAG compliance |
references/tooling-integration.md | 21st.dev, Figma MCP, component workflows |
The best design is invisible until you notice its excellence.
Weekly Installs
116
Repository
erichowens/some…e_skills
GitHub Stars
73
First Seen
Jan 23, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
opencode99
codex96
gemini-cli95
cursor87
github-copilot84
claude-code78
