distinctive-design

This skill guides creation of distinctive, production-grade interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides interface requirements: a component, page, application, dashboard, or visual output to build. They may include context about the purpose, audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who uses it?
• Medium: Web (HTML/CSS/JS), TUI (terminal), native (desktop/mobile), print (PDF/SVG), data visualization?
• Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian. Use these for inspiration but design one true to the aesthetic direction.
• Constraints: Technical requirements (framework, performance, accessibility, terminal capabilities).
• 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.

Aesthetics Guidelines

Focus on:

• Typography: Choose fonts/characters that are beautiful, unique, and interesting. For web: avoid generic fonts (Arial, Inter, Roboto); opt for distinctive choices. For TUI: leverage Unicode box-drawing, Nerd Fonts, and careful alignment. Pair a distinctive display element with a refined body element.
• Color & Theme: Commit to a cohesive aesthetic. Use consistent color variables/tokens. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. For TUI: work within 256-color or true-color constraints intentionally.
• Motion & Interaction: Use animations for effects and micro-interactions where the medium supports it. One well-orchestrated reveal creates more delight than scattered micro-interactions.
• Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density. For TUI: creative use of padding, alignment, and section breaks.
• Visual Details: Create atmosphere and depth rather than defaulting to flat/solid. Apply medium-appropriate techniques: gradient meshes, noise textures, box shadows, decorative borders, Unicode ornaments, or terminal color gradients.

NEVER use generic AI-generated aesthetics:

• Overused fonts (Inter, Roboto, Arial, system defaults)
• Cliched color schemes (purple gradients on white backgrounds)
• Predictable layouts and component patterns
• Cookie-cutter design that lacks context-specific character
• Default framework styling without customization

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different aesthetics, different textures.

IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive detail. Minimalist designs need restraint, precision, and careful attention to spacing and typography. Elegance comes from executing the vision well.

Remember: Claude is capable of extraordinary creative work. Don't hold back — show what can truly be created when thinking outside the box and committing fully to a distinctive vision.