---

name: frontend-design description: Use when design UI that avoids AI slop by forcing Claude through a design thinking pass on purpose, tone, constraints, and differentiation before writing any code.

Frontend Design (Anti-AI-Slop UI Generator)

Griffin's Frontend Design skill is the headliner in his designer toolkit. Before Claude writes a single line of UI code, the skill triggers a design-thinking pass that answers four questions: what problem the interface solves and for who, the aesthetic direction (minimal, editorial, brutalist, maximalist), technical constraints, and what makes it memorable. It then applies a Frontend Aesthetics Guidelines section covering typography, color, motion, spatial composition, and atmosphere, and explicitly bans AI slop like overused purple gradients, rounded corner cards on white backgrounds, and Inter everywhere.

What you get

• Design brief pass covering purpose, tone, constraints, differentiation
• Frontend Aesthetics Guidelines block covering typography, color, motion, spatial composition, atmosphere
• explicit ban on AI slop patterns (purple gradients, rounded cards on white, Inter default)
• rendered UI code that follows the brief

Customize your output

• Aesthetic Direction: minimal, editorial, brutalist, maximalist
• Font pairing: distinctive typographic pairing vs generic (Arial, Inter)
• Output surface: landing page, dashboard, component, artifact

Example output

For an editorial fashion journal landing page: Playfair Display display + Inter Tight body, warm off-white background (#F5F1EA), oversized editorial numbering, generous negative space, a single accent hue, no rounded gradient card in sight.

Best for

Designers using Claude to generate UI who are sick of getting the same AI-looking output

---

Source: Griffin Wooldridge · https://www.griffinwooldridge.com/blog/claude-skills-for-designers Category: Design / UI · Priority: P1