12 Free Skills That Fix AI Slop Design

Inter font. Purple gradient. Rounded cards with drop shadows. When I first started vibe coding, the real bottleneck was never the code. It was the design. Every AI-generated interface looked like it came from the same template factory.

A single SKILL.md file changes how the agent thinks about design. I’ve installed and tested dozens of design skills over the past few months. Most got removed within a week because they either conflicted with each other or produced marginal improvements. The 12 below are what actually stuck.

Where to start

Anthropic’s official frontend-design plugin is the baseline. It ships with Claude Code and sets foundational rules for layout, typography, and color choices. Without it, the agent defaults to the same Inter + purple gradient combo every time. Think of this as the floor, not the ceiling.

Impeccable builds on top of the official plugin with 20 slash commands: /polish, /audit, /distill, /bolder, /quieter, and more. Each one targets a specific design concern. /audit runs a comprehensive quality check across accessibility, theming, and responsive breakpoints. /distill strips a component down to its essentials. I use /polish before every deployment as a final pass.

Controlling design intensity

Taste Skill takes a different approach. Instead of slash commands, it uses three numeric variables like DESIGN_VARIANCE to control how far the agent deviates from defaults. Set it low for conservative corporate interfaces. Crank it up for experimental landing pages. The granularity is useful, though I found the sweet spot takes some trial and error. My first attempt at high variance produced something that looked like a MySpace page from 2006.

Icons and visual assets

Better Icons connects 150+ icon collections containing over 200,000 icons. You search by keyword, and it syncs the SVG directly into your project. Before this, I was manually downloading icons from five different sites. The search quality varies by collection, but for common UI icons, it finds the right match quickly.

Component-level design intelligence

UI Design Brain contains design principles for 60+ components across five design styles. It tells the agent how a modal should behave in a minimalist system versus a glassmorphic one. This level of specificity matters because generic “make it look good” instructions produce generic results.

UI UX Pro Max goes wider: 50+ design styles, 97 color palette combinations, 57 font pairings, and industry-specific reasoning for over 160 product types. The scope is ambitious. Honestly, the sheer number of options can slow down generation if you don’t constrain the context. I typically set the style and palette explicitly rather than letting the agent choose.

Review and quality gates

Vercel’s agent-skills includes a UI review ruleset with 100+ checkpoints. It evaluates spacing consistency, color contrast, interaction states, and responsive behavior. Running this after the design phase catches issues that look fine on a laptop but break on mobile.

UI Skills adds Tailwind-specific quality checks. Commands like /baseline-ui enforce consistent utility class usage, and /fixing-accessibility runs a focused accessibility audit. If your stack is Tailwind-based, this fills a gap that general design skills miss.

Full workflow coverage

Designer Skills Collection is the most comprehensive package here: 63 skills and 27 commands covering the entire design workflow from wireframe to production. It’s opinionated, which means it occasionally conflicts with other skills. I had to disable a few overlapping rules to avoid contradictory instructions reaching the agent.

Design Plugin enforces design principles at the code level. Instead of suggesting improvements, it blocks patterns that violate your configured design system. This is useful on teams where multiple people prompt the same agent.

The premium look

Super Design focuses on premium typography and generous whitespace. It biases the agent toward choices that feel high-end: larger font sizes, wider margins, restrained color palettes. The results look noticeably more polished, though the whitespace can be excessive on content-heavy pages.

Make Interfaces Feel Better is specifically about micro-interactions. Hover states, loading transitions, scroll behaviors, button feedback. These small details are what separate “looks fine” from “feels good.” I noticed the biggest perceived quality improvement from this skill compared to any other on this list.

What didn’t work

Not every combination plays nicely together. Installing all 12 simultaneously created conflicting instructions that confused the agent. The practical setup is layering three or four skills that cover different concerns: one for foundational rules, one for component-level guidance, one for review, and one for the specific aesthetic gap in your project.

I also found that skills targeting the same layer (like two competing color palette systems) cancel each other out. Pick one per concern and commit to it.

All 12 are free. Start with the official frontend-design plugin and Impeccable, then add based on where your output still looks generic. And delete Inter from your font stack.