| name | frontend-design |
| version | 1.0.0 |
| description | Create distinctive frontend direction that avoids generic AI-looking interfaces. Focus on typography, color, composition, and motion with an opinionated aesthetic point of view. |
| tags | ["frontend","design","ui","typography","motion"] |
| category | design |
Frontend Design
Attribution: inspired by Anthropic's frontend-design skill for Claude Code. This is a rewritten, trimmed-down variant, not the original.
Do not ship default-looking UI.
Goal
Push the design toward a deliberate aesthetic instead of the usual anonymous product-demo look.
Before designing
Lock three things first:
- Purpose: what the interface is for
- Tone: what it should feel like
- Differentiator: the one thing people will remember
Tone examples
Pick a direction and commit:
- brutally minimal
- editorial
- playful
- retro-futuristic
- industrial
- luxurious
- organic
- brutalist
Design rules
Typography
- choose fonts with character
- use a clear display and body pairing when the project allows it
- avoid generic default stacks unless the brand explicitly needs them
Color
- use a real palette, not filler gradients
- bias toward one dominant idea with sharp accents
- make light and dark choices feel intentional
Motion
- use motion to reinforce hierarchy and mood
- one well-executed entrance sequence beats dozens of random micro-interactions
- hover and scroll states should feel designed, not bolted on
Composition
- allow asymmetry when it helps
- use negative space or density on purpose
- avoid interchangeable card-grid layouts when the product deserves more personality
Depth
- backgrounds, texture, borders, shadows, and overlays should support the tone
- avoid blank default surfaces unless restraint is the point
Anti-patterns
- trend-chasing without a design point of view
- generic startup gradients
- interchangeable hero sections
- identical spacing everywhere
- motion used as decoration instead of communication
Implementation rules
- keep the result accessible
- make it responsive
- match technical complexity to the visual ambition
- document the chosen design direction before building major screens
Output contract
When using this skill, produce:
- a short design direction statement
- typography guidance
- color guidance
- composition notes
- motion notes
- implementation constraints
Anti-pattern
If the result could be mistaken for any random AI-generated SaaS landing page, start over.
