/bencium-impact-designer

name: bencium-impact-designer
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. Based on Anthropic's Frontend Designer Skill
version: 1.2.0

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:

Questions to Ask First

1. **Purpose**: What problem does this interface solve? Who uses it? 2. **Tone**: What aesthetic extreme fits? (see Tone Options below) Use these for inspiration but design one that is true to the aesthetic direction. 3. **Constraints**: Technical requirements (framework, performance, accessibility)? 4. **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, TypeScript, etc.) that is:

• Production-grade and functional
• Visually striking and memorable
• Cohesive with a clear aesthetic point-of-view
• Meticulously refined in every detail

Tone Options (Pick an Extreme)

Choose a clear aesthetic direction and execute with precision:

• **Brutally minimal** - stripped to essence, bold typography, vast whitespace
• **Retro-futuristic** - vintage meets sci-fi, nostalgic tech aesthetics
• **Organic/natural** - soft edges, earthy colors, nature-inspired textures
• **Editorial/magazine** - strong typography hierarchy, asymmetric layouts
• **Brutalist/raw** - exposed structure, harsh contrasts, intentionally rough
• **Art deco/geometric** - bold patterns, metallic accents, symmetric elegance
• **Soft/pastel** - gentle gradients, muted tones, calming atmosphere
• **Industrial/utilitarian** - functional, no-nonsense, mechanical precision

• - Neo-Swiss Grid - rigorous grid, restrained palette, razor-sharp alignment, typographic clarity

• Anti-Grid Experimental - intentional misalignment, broken columns, playful

tension, art-school energy

• Monochrome High-Contrast - black/white only, stark hierarchy, dramatic scale

shifts, graphic punch

• Duotone Pop - two-color system, bold overlays, poster-like impact, strong

silhouettes

• Kinetic Typography - type as motion, stretched/warped letterforms, rhythm-

first composition

• Glitch/Digital Noise - scanlines, compression artifacts, chromatic offsets,

“corrupted” UI textures

• Y2K Cyber Gloss - chrome gradients, gel buttons, translucent panels, late-

90s web futurism

• Vaporwave Nostalgia - neon dusk palette, palm silhouettes, faux-3D, retro

mall ambience

• Synthwave Night Drive - magenta/cyan, grid horizons, glowing edges,

cinematic neon noir

• Memphis Playful - squiggles, confetti geometry, loud patterns, upbeat

irreverence

• Riso Print - limited inks, misregistration, grainy textures, analog

imperfection

• Bauhaus Modernism - primary colors, simple geometry, functional forms,

clarity through reduction

• Constructivist Propaganda - diagonals, bold blocks, agit-poster energy,

commanding headlines

• Futurist Speed - slanted type, motion lines, aggressive angles, velocity as

a design principle

• Cinematic Noir - moody shadows, tight spotlighting, grain, suspenseful

minimal palette

• Whimsical Storybook - soft illustration cues, charming type, warm palette,

gentle narrative layout

• Modern Skeuomorphic - tactile UI cues, soft shadows, realistic materials,

“touchable” surfaces

• Clay/Soft 3D - rounded forms, matte materials, friendly depth, playful

product-UI vibe

• Isometric Systems - isometric grids, diagrammatic clarity, technical-yet-

playful structure

• Data-Driven Dashboard - dense but legible, charts as hero elements,

pragmatic hierarchy

• Scientific/Technical - annotation callouts, thin rules, measured spacing,

lab-manual precision

• Military/Command UI - tactical overlays, coordinate grids, utilitarian type,

“mission interface” mood

• Weathered/Vintage Patina - worn textures, faded inks, imperfections, found-

object authenticity

• Coastal/Airy - sun-bleached palette, breezy spacing, light serif accents,

calm openness

• Desert Modern - sand/clay tones, hard sunlight contrast, minimal geometry,

heat-haze vibe

• Botanical Apothocary - old labels, muted greens, serif type, pressed-plant

textures

• Nordic Calm - pale neutrals, soft contrast, clean type, quiet warmth
• Playful Minimal - minimal layout with one “smile” detail, bright accent,

friendly type choices

• Startup Crisp - clean UI, bold CTA geometry, vibrant accent, product-forward

clarity

• High-Fashion Lookbook - ultra-thin type, dramatic photography framing,

sparse copy, luxe whitespace

• Museum Exhibition - quiet typography, generous margins, caption-like text,

gallery placard vibe

• Architectural Blueprint - linework, measurement marks, grid overlays,

technical drawing aesthetic

• Monastic/Wabi-Sabi - imperfect textures, quiet tones, asymmetry, beauty

in restraint

After Getting Context

• **Comm