A fork of Anthropic's Frontend Designer that pushes you toward bolder aesthetic choices. It makes you answer questions about purpose and tone before writing code, then commits hard to a specific direction (brutalist, retro-futuristic, synthwave, whatever fits). Ships with an opinionated list of banned fonts and anti-patterns to avoid generic AI aesthetics. The philosophy is that both maximalism and minimalism work if you're intentional about it. Good for when you want React or vanilla components that actually look designed instead of like every other gradient-heavy landing page. Includes motion guidance and expects you to make unexpected layout choices.

skills.sh installs
600
GitHub stars
333
last updated
Jul 14, 2026

Install

$ npx -y skills add bencium/bencium-claude-code-design-skill --skill bencium-impact-designer --agent claude-code

Installs into .claude/skills of the current project.

Files

Innovative Designer for impact

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. Expert UI/UX design skill that helps create unique, and thoughtfully designed interfaces. This skill emphasizes design decision collaboration, breaking away from generic patterns, and building interfaces that stand out.

This skill emphasizes bold creative commitment, breaking away from generic patterns, and building interfaces that are visually striking and memorable while remaining functional.

Core Philosophy

CRITICAL: Design Thinking Protocol

Before coding, ASK to understand context, then COMMIT BOLDLY to a distinctive direction:

Sponsors

Details

Repository
github.com/bencium/bencium-claude-code-design-skill
Category
Design & UI/UX
First seen
Jun 3, 2026

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

All 13
1dylantarre avatarstaging-masterydylantarre/animation-principlesUse when composing scenes, designing layouts, directing user attention, or ensuring a single clear idea is communicated at any given moment.581skills.sh installs
2dylantarre avatargesture-responsesdylantarre/animation-principlesUse when responding to touch or click interactions - button presses, drag feedback, swipe responses, tap ripples, or any direct manipulation animation.579skills.sh installs
3dylantarre avatarentrance-animationsdylantarre/animation-principlesUse when elements need to appear on screen - page loads, modals opening, items being added, content reveals, or any "coming into view" animation.572skills.sh installs
4dylantarre avatarattention-grabbersdylantarre/animation-principlesUse when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.565skills.sh installs
5dylantarre avatarloaders-spinnersdylantarre/animation-principlesUse when creating loading indicators, spinners, progress bars, or skeleton screens to communicate system status554skills.sh installs
6dylantarre avatarforms-inputsdylantarre/animation-principlesUse when animating form fields, inputs, textareas, selects, or interactive form elements to improve usability and feedback553skills.sh installs