🎯

web-design-expert

🎯Skill

from erichowens/some_claude_skills

What it does

web-design-expert skill from erichowens/some_claude_skills

📦

Part of

erichowens/some_claude_skills(148 items)

web-design-expert

Installation

Add MarketplaceAdd marketplace to Claude Code

/plugin marketplace add erichowens/some_claude_skills

Install PluginInstall plugin from marketplace

/plugin install adhd-design-expert@some-claude-skills

Install PluginInstall plugin from marketplace

/plugin install some-claude-skills@some-claude-skills

git cloneClone repository

git clone https://github.com/erichowens/some_claude_skills.git

Claude Desktop ConfigurationAdd this to your claude_desktop_config.json

{
  "mcpServers": {
    "prompt-learning": {
      "command": "npx",
      "args...

📖 Extracted from docs: erichowens/some_claude_skills

Need more details? View full documentation on GitHub →

17Installs

Last UpdatedJan 23, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

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.

Overview

# 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)
Typography direction (families, hierarchy)
Layout philosophy (grid vs freeform, density)
Signature elements (unique visual features)

3. Design Principles

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

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