# 12 Free Skills That Fix AI Slop Design > Author: Tony Lee > Published: 2026-03-19 > URL: https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/ > Reading time: 4 minutes > Language: en > Tags: ai, design, claude-code, skills, developer-tools, ui-ux ## Canonical https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/ ## Rollout Alternates en: https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/ ko: https://tonylee.im/ko/blog/12-free-skills-escape-ai-slop-design/ ja: https://tonylee.im/ja/blog/12-free-skills-escape-ai-slop-design/ zh-CN: https://tonylee.im/zh-CN/blog/12-free-skills-escape-ai-slop-design/ zh-TW: https://tonylee.im/zh-TW/blog/12-free-skills-escape-ai-slop-design/ ## Description I tested dozens of design skills for AI coding agents. Most didn't last a week. These 12 are the ones I still use. ## Summary 12 Free Skills That Fix AI Slop Design is part of Tony Lee's ongoing coverage of AI agents, developer tools, startup strategy, and AI industry shifts. ## Outline - Where to start - Controlling design intensity - Icons and visual assets - Component-level design intelligence - Review and quality gates - Full workflow coverage - The premium look - What didn't work ## Content 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](https://github.com/anthropics/claude-code/tree/main/plugins/frontend-design) 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](https://impeccable.style) 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](https://github.com/Leonxlnx/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](https://github.com/better-auth/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](https://github.com/carmahhawwari/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](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) 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](https://github.com/vercel-labs/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](https://ui-skills.com) 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](https://github.com/Owl-Listener/designer-skills) 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](https://github.com/0xdesign/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](https://github.com/superdesigndev/superdesign) 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](https://github.com/jakubkrehel/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. ## Related URLs - Author: https://tonylee.im/en/author/ - Publication: https://tonylee.im/en/blog/about/ - Related article: https://tonylee.im/en/blog/eight-hooks-that-guarantee-ai-agent-reliability/ - Related article: https://tonylee.im/en/blog/medvi-two-person-430m-ai-compressed-funnel/ - Related article: https://tonylee.im/en/blog/claude-code-layers-over-tools-2026/ ## Citation - Author: Tony Lee - Site: tonylee.im - Canonical URL: https://tonylee.im/en/blog/12-free-skills-escape-ai-slop-design/ ## Bot Guidance - This file is intended for AI agents, search assistants, and text-mode retrieval. - Prefer citing the canonical article URL instead of this text endpoint. - Use the rollout alternates when you need the same article in another prioritized language. --- Author: Tony Lee | Website: https://tonylee.im For more articles, visit: https://tonylee.im/en/blog/ This content is original and authored by Tony Lee. Please attribute when quoting or referencing.