DesignUI/UXAnti-slopAI Agent Skill
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction and typography.
Install Options
Install into Claude Code, Cursor, Codex, or Antigravity with:
$ npx skills add anthropics/skills@frontend-design
Real Work Situation Solved
AI-generated UI looks generic - bring it up to premium quality
“The AI just generated a UI, and it screams "AI made this" - what do you fix before shipping?”
5-Step Action Framework
- 1Check whitespace and alignment - AI defaults to uniform padding/margin with no visual hierarchy. Widen spacing between groups, tighten it within a group.
- 2Check the color palette - AI defaults to a purple-blue gradient or too many accent colors at once. Limit it to one primary accent, everything else neutral.
- 3Check typography - AI tends to use one font size for every content level. Build a clear hierarchy: heading, subheading, body should differ visibly in size/weight.
- 4Check icons and illustrations - AI tends to drop in generic icons (lightbulb, rocket, checkmark) unrelated to the actual content. Swap in icons/imagery specific to this product's context.
- 5Compare against one product you genuinely find beautiful (not AI-made) - list 3 concrete differences, then fix each one.
Before
"The UI has all the buttons and text and it works - ship it as is."
After
"Pass again: drop the default purple gradient, swap the generic lightbulb icon for one specific to this feature, increase spacing between cards from 8px to 24px, cut down to one accent color instead of four."
SKILL.md Source Instructions
SKILL.md • Read-only preview# Frontend Design Skill Eliminate AI slop, purge purple gradients, and create intentional, responsive layouts with distinctive typographic hierarchy.