🎯

bencium-controlled-ux-designer

🎯Skill

from bencium/bencium-claude-code-design-skill

VibeIndex|
What it does

bencium-controlled-ux-designer skill from bencium/bencium-claude-code-design-skill

πŸ“¦

Part of

bencium/bencium-claude-code-design-skill(2 items)

bencium-controlled-ux-designer

Installation

πŸ“‹ No install commands found in docs. Showing default command. Check GitHub for actual instructions.
Quick InstallInstall with npx
npx skills add bencium/bencium-claude-code-design-skill --skill bencium-controlled-ux-designer
15Installs
70
-
Last UpdatedNov 22, 2025

Skill Details

SKILL.md

Overview

# 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](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

```

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:

```bash

# For controlled/production workflow

cp -r benci