UX Designer Skills

Two Claude Code skills for UI/UX design guidance — choose based on your project needs.

Why Two Variants?

| Aspect | Controlled | Innovative | |--------|------------|------------| | Decision Authority | Asks before making choices | Commits boldly to directions | | Aesthetic Philosophy | Flat, minimal, no shadows | Shadows, gradients, textures allowed | | Typography | 2-3 typefaces, mathematical scales | Experimental, characterful choices | | Structure | 6 files (~3,500 lines) | 6 files (~1,000 lines) | | Best For | Production, enterprise, regulated | Landing pages, portfolios, campaigns |

Skill Variants

bencium-controlled-ux-designer

Systematic design for production work.

Best for:

• Enterprise applications
• Healthcare/regulated industries
• Long-term maintainable projects
• Design systems requiring consistency
• Accessibility-critical interfaces

Key behaviors:

• Always asks before making design decisions
• WCAG 2.1 AA compliance (non-negotiable)
• Mathematical spacing/typography scales
• Flat, minimal aesthetic (no shadows, gradients, glass)
• Comprehensive validation checklists

bencium-controlled-ux-designer/
├── SKILL.md                  # Main skill (~740 lines)
├── ACCESSIBILITY.md          # Full WCAG guidance (~830 lines)
├── RESPONSIVE-DESIGN.md      # Breakpoints & patterns (~600 lines)
├── DESIGN-SYSTEM-TEMPLATE.md # Project kickoff framework
├── MOTION-SPEC.md            # Animation specifications
└── README.md

bencium-innovative-ux-designer

Bold design for creative exploration.

Inspired by Anthropic's Frontend Aesthetics Cookbook.

Best for:

• Landing pages and marketing sites
• Creative agency projects
• Prototypes and concept exploration
• Portfolio pieces
• Short-term campaigns

Key behaviors:

• Commits boldly to aesthetic directions (doesn't ask)
• Asks Design Thinking questions upfront, then executes
• Shadows, gradients, textures allowed when intentional
• Typography experimentation encouraged
• Accessibility as baseline (not blocking exploration)

bencium-innovative-ux-designer/
├── SKILL.md                  # Main skill (~700 lines)
├── ACCESSIBILITY.md          # Compressed essentials (~110 lines)
├── RESPONSIVE-DESIGN.md      # Mobile-first basics (~90 lines)
├── MOTION-SPEC.md            # Animation essentials (~70 lines)
└── README.md

Anti-Patterns (Both Variants Avoid)

Both skills are designed to avoid "AI slop" — the generic, forgettable aesthetics that flood AI-generated interfaces:

Fonts to avoid:

• Inter, Roboto, Arial as primary typefaces
• Space Grotesk (overused by AI tools)
• System fonts without intention

Colors to avoid:

• Generic SaaS blue (#3B82F6)
• Purple gradients on white backgrounds
• Teal + coral combinations

Patterns to avoid:

• Liquid glass / glassmorphism everywhere
• Apple mimicry without purpose
• Cookie-cutter SaaS layouts
• Predictable component arrangements

Aesthetic Tone Options (Innovative Variant)

The innovative variant can execute across different aesthetic directions:

| Tone | Characteristics | |------|-----------------| | Brutally minimal | Maximum whitespace, single accent, stark typography | | Maximalist chaos | Dense information, layered elements, controlled overwhelm | | Retro-futuristic | Nostalgic tech aesthetics, CRT glow, pixel elements | | Organic/natural | Earthy palettes, hand-drawn elements, asymmetry | | Luxury/refined | Restrained elegance, premium materials, subtle animation | | Editorial/magazine | Strong typography hierarchy, dramatic layouts | | Brutalist/raw | Exposed structure, system fonts as statement, anti-design | | Soft/pastel | Gentle gradients, rounded forms, approachable |

Installation

Copy the desired skill folder to your Claude Code skills directory:

# For controlled/production workflow
cp -r bencium-controlled-ux-designer ~/.claude/skills/

# For creative/innovative workflow
cp -r bencium-innovative-ux-designer ~/.claude/skills/

Example Interactions

Controlled Variant

You: "I need a call-to-action button for the hero section"

Claude: "Before I implement this button, I have design questions:

1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, professional)

I can suggest 3 unique color directions that break from typical patterns..."

Innovative Variant

You: "I need a call-to-action button for the hero section"

Claude: "What's the overall vibe for this project? Options:

• Brutally minimal
• Bold and playful
• Luxury/refined
• Something else?

Once I know the direction, I'll commit to a distinctive button design that avoids generic SaaS patterns."

You: "Bold and playful"

Claude: Implements a distinctive button with intentional design choices, no further questions

Key Differences Summary

| Scenario | Controlled | Innovative | |----------|------------|------------| | Color choice | "Here are 3 options. Which do you prefer?" | "I'm using [X] because it fits the playful tone" | | Shadow usage | "No shadows per design system" | "Adding subtle shadow for depth and hierarchy" | | Typography | "Using Inter for readability" | "Using [characterful font] to stand out" | | Layout | "Following established grid patterns" | "Breaking grid intentionally for visual interest" |

Version History

• v2.0.0 (2025-11-22): Split into two variants

  • Created bencium-controlled-ux-designer (production focus)
  • Created bencium-innovative-ux-designer (creative focus)
  • Innovative variant inspired by Anthropic's Frontend Aesthetics Cookbook
  • Compressed supporting files for innovative variant (~70% reduction)
  • Added Design Thinking Protocol to innovative variant
  • Added aesthetic tone options

• v1.1.0 (2025-11-20): Comprehensive design system enhancement

• v1.0.0 (2025-10-18): Initial release

References

• Anthropic Frontend Aesthetics Cookbook
• Claude Code Skills Documentation

License

Personal skills - use and modify as needed for your projects.