bencium-controlled-ux-designer

| 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 |

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](https://github.com/anthropics/claude-cookbooks/blob/main/coding/prompting_for_frontend_aesthetics.ipynb).

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

```

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

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 |

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

```bash

# For controlled/production workflow

cp -r benci