Create distinctive, memorable UI for landing pages, portfolios, marketing sites, and one-off creative work. Use when the user explicitly wants something "distinctive", "creative", "memorable", or "unique" - NOT for standard app components where consistency matters.
Adapted from Anthropic's frontend-design skill
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Use for creative one-offs, not standard app components.
Use creative-design | Use standard patterns |
|---|---|
| Landing pages | App dashboards |
| Portfolio pieces | CRUD interfaces |
| Marketing sites | Admin panels |
| One-off demos | Reusable components |
| "Make it memorable" | "Make it consistent" |
If working on a Next.js app with shadcn/ui, prefer theme tokens and consistent patterns unless explicitly asked for something distinctive.
Before coding, commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear direction and execute with precision. Bold maximalism and refined minimalism both work - the key is intentionality.
Choose fonts that are beautiful, unique, and interesting. Avoid:
Instead: pair a distinctive display font with a refined body font. Character over safety.
Focus on high-impact moments:
animation-delay)Prioritize CSS-only for HTML. Use Motion library for React when available.
Create atmosphere rather than solid colors:
NEVER produce:
Match complexity to vision:
Always produce working code (HTML/CSS/JS, React, etc.) that is: