| name | distinctive-frontend-design |
| description | Creates distinctive, production-grade frontend interfaces with a bold aesthetic direction and meticulous visual detail. Use when the user requests a UI, page, component, or frontend build and expects memorable, non-generic design. |
Distinctive Frontend Design
Quick Start
When a frontend UI is requested, commit to a bold aesthetic direction and execute it with production-grade code. Avoid generic "AI slop" visuals and predictable layouts.
Design Thinking (before coding)
Answer these in the response before implementing:
- Purpose: What problem does this interface solve and for whom?
- Tone: Choose a strong, specific aesthetic (minimal, maximalist, retro-futuristic, editorial, brutalist, luxury, organic, etc.).
- Constraints: Framework, performance, accessibility, and any technical limits.
- Differentiation: Identify the one unforgettable visual element or interaction.
Commit to the direction and design every detail to reinforce it.
Implementation Rules
- Implement working code (HTML/CSS/JS or framework) that matches the aesthetic.
- Use CSS variables for palette and spacing consistency.
- Favor intentional layouts: asymmetry, overlap, diagonal flow, grid breaks, or controlled negative space.
- Add atmosphere: gradient meshes, noise, textures, layered transparencies, borders, or shadows when aligned with the direction.
- Keep the visual system cohesive: colors, type, motion, and spacing all reinforce the same idea.
Typography
- Pair a characterful display font with a refined body font.
- Avoid generic fonts (Arial, Roboto, Inter, system defaults) and overused modern defaults.
- Typography must be a core visual driver, not an afterthought.
Color & Theme
- Use a dominant color with sharp accents; avoid timid evenly-distributed palettes.
- Do not default to generic purple gradients on white.
- Use CSS variables to enforce discipline.
Motion
- Prefer CSS-only animations for HTML; use a motion library for React if already available.
- Prioritize high-impact moments: a page-load reveal with staggered
animation-delay is better than scattered micro-effects.
- Use hover/scroll states that reinforce the tone (e.g., precise, chaotic, soft, mechanical).
Spatial Composition
- Break the grid when appropriate.
- Mix scale shifts (large hero + tiny metadata) and layered elements.
- Choose either generous negative space or controlled density, not both.
Anti-Patterns to Avoid
- Cliche layouts and component patterns.
- Generic, evenly-spread color schemes.
- Overused font pairings or default design system choices.
- Visuals that do not feel tailored to the context.
Quality Checklist
Before finishing:
- Aesthetic direction is stated and obvious in the UI.
- One memorable detail stands out.
- Code is production-grade and functional.
- Motion, color, and type all reinforce the same concept.
