distinctive-design

name	distinctive-design
description	This skill should be used when the user asks to "make this distinctive", "avoid generic design", "create memorable UI", "bold aesthetic", or when designs feel generic, need to stand out, or require philosophy-driven creative direction.
version	2.0.0

This skill guides creation of distinctive frontend interfaces that avoid generic "AI slop" aesthetics. The key is intentionality over intensity - bold commitment to a clear vision.

Before You Code: The Essential Questions

Stop and answer these before writing any CSS:

1. What makes this UNFORGETTABLE? What's the one thing someone will remember about this page? If you can't answer this, you're not ready to code.

2. What's the extreme? Pick a direction and commit: brutally minimal, maximalist chaos, editorial/magazine, brutalist/raw, art deco/geometric, organic/natural, luxury/refined, industrial/utilitarian. Half-measures produce forgettable work.

3. What's the conceptual metaphor? "Aged canvas meets analytical precision." "A gallery exhibition." "Engineering blueprints." "A newspaper front page." The metaphor guides every decision.

The Anti-Slop Mindset

Generic AI output converges on the same choices:

• Inter/Roboto fonts (safe, forgettable)
• Centered layouts with uniform grids (predictable)
• Purple gradients on white (clichéd)
• Rounded cards with shadow-md (template-like)
• Scattered micro-interactions (unfocused)

The problem isn't these elements - it's choosing them by default instead of intentionally.

Distinctive work diverges:

• Typography that has character (serif headlines? monospace? display fonts?)
• Layouts that break the grid (asymmetry, overlap, tension)
• Color that commits (dominant + accent, not evenly distributed)
• Details that reinforce the concept (textures, motion, spacing)

Principles, Not Patterns

Typography

Choose fonts that are interesting, not safe. Pair a distinctive display font with a refined body font. The font should feel like it belongs to this specific project, not "a website."

Composition

Asymmetry creates energy. Overlap creates depth. Negative space creates focus. The eye should have a journey, not a checklist. Break the grid when it serves the concept.

Motion

One orchestrated moment beats ten scattered hover effects. Staggered reveals on page load. Scroll-triggered surprises. Motion should guide attention, not decorate.

Color

Commit to a palette, then use it with confidence. Dominant colors with sharp accents. If every color is equal, nothing stands out. The palette should feel inevitable for this concept.

Details

Texture, grain, layered transparencies - these create atmosphere. The difference between "a website" and "this website" is often in details that reinforce the concept.

The Test

When you look at your work, ask:

• Could this be any other website? (If yes, it's generic)
• What would I remember after closing the tab?
• Is every choice intentional, or are some defaults?
• Does it feel designed or assembled?

For This Project (Applied AI)

If working on Applied AI's site, the established concept is "Analytical Warmth":

• Deep Picasso blues and warm silvers (trust without coldness)
• The wave animation is the memorable element (build on it, don't compete with it)
• Editorial authority (serif headlines) + modern clarity (sans body)
• The feeling of a carefully crafted presentation, not a template

But don't just apply these mechanically. Ask: Does this section reinforce or dilute the concept?

---

Distinctive design comes from bold commitment, not safe accumulation of "good practices." Claude is capable of extraordinary creative work. Don't hold back.