Inter font. Purple gradients. 8px border radius cards with drop shadows. Three perfectly symmetrical columns. A handful of Heroicons. Dark mode that's literally #000000 with white text on top.
If you've ever used a coding agent to generate an interface, you know this aesthetic. It's the visual equivalent of elevator music: functional, inoffensive, completely forgettable. The developer community gave it a name: AI Slop.
But a counteroffensive has emerged over the past few months. Developers and designers created "design skills" — text files that teach AI agents to have good taste. They're not component libraries. They're not UI frameworks. They're executable design briefs that the agent reads before writing a single line of code.
This article breaks down the five main tools, how to combine them, and when to use each.
The Problem: Why Agents Produce Bad Design
LLMs have no aesthetic judgment. When they generate a UI, they apply statistically likely patterns based on their training data. The output converges on the same visual commonplaces over and over because that's what predominates in the training distribution.
The model isn't bad. It simply has no design constraints. Without a design brief, any agent will default to the generic.
The solution isn't a better model or longer prompts. It's giving the agent a design file that explicitly defines what you want.
The Tools
1. Frontend-Design Skill (Anthropic)
This is the starting point. Anthropic's official plugin for Claude Code, with over 565,000 installs. A single SKILL.md file of roughly 1,300 tokens that establishes fundamental design rules: typography, color, layout.
Think of it as the floor, not the ceiling. Without it, every Claude agent defaults to the Inter + purple combo. With it activated, you already get a noticeable improvement in the base output.
Install:
claude plugins install frontend-design@claude-code-plugin
When to use it: Always. It's the base layer everything else builds on.
2. Impeccable
Created by Paul Bakaus (creator of jQuery UI, ex-Google, ex-Creator Pass), Impeccable is a structured design workflow for agents. It's not a single skill — it's a complete design language with 23 commands, 37 documented anti-patterns, and a 4-stage process.
The four Impeccable workflow stages:
Teach: Define the project's design system — color variables, typography, spacing, base components. The agent learns your visual language before designing anything.
Shape: Build the interface with concrete constraints. This is where you use commands like /bolder (more daring), /quieter (more subdued), /simpler (fewer elements).
Craft: Refine specific details. Commands like /polish for the final quality pass, /distill to reduce a component to its essence.
Iterate: Review and improve. /audit runs a comprehensive check across accessibility, theme consistency, and responsive breakpoints.
Key commands:
-
/polish— final visual refinement pass before deployment -
/audit— comprehensive quality check (accessibility, theming, responsive) -
/distill— reduces a component to its essentials -
/bolder//quieter— adjusts visual intensity
Install:
npx impeccable@latest init
When to use it: Projects with UI where you need granular control over visual quality. Especially useful in the refinement phase before production.
3. Taste Skill
If Impeccable is a complete workflow, Taste Skill is a battle framework. Its philosophy: "Anti-Slop Frontend Framework" — modular skills that cover specific aspects of design.
The key difference is that it uses numeric control variables:
-
DESIGN_VARIANCE— how far the agent deviates from defaults (low for corporate, high for experimental) -
TYPOGRAPHY_QUALITY— level of typographic refinement -
SPACING_RHYTHM— spacing rhythm consistency
The modular skills cover:
- Layout — grid systems, containers, breakpoints
- Typography — scales, font pairing, hierarchy
- Motion — transitions, micro-interactions, animations
- Spacing — vertical rhythm, information density
- Images — image generation skills with style control
Install:
npx tasteskill@latest init
When to use it: When you want fine-grained control over individual design aspects without loading a complete workflow. Ideal for teams that already have a visual identity but need the agent to respect it.
4. DESIGN.md
The most explosive phenomenon in the ecosystem. Launched on March 31, 2026, it accumulated 40,700 GitHub stars in 10 days. The fork-to-star ratio of 12.6% shows developers aren't just looking — they're integrating DESIGN.md into production.
DESIGN.md is a standardized markdown file with 9 sections that define a project's complete design system. The agent reads it as an executable design brief.
The 9 standard sections:
- Visual Theme & Atmosphere — emotional and visual intent
- Color Palette & Roles — colors with precise values and semantic roles
- Typography Rules — fonts, sizes, line heights, weights
- Component Stylings — default, hover, active, focus, disabled states
- Layout Principles — grid, spacing scale, container widths
- Depth & Elevation — shadows, z-index, spatial relationships
- Do's and Don'ts — explicit constraints ("Never use more than 3 colors in a card")
- Responsive Behavior — breakpoints, stacking, conditional visibility
- Agent Prompt Guide — direct instructions to the agent
Install:
npx getdesign@latest add stripe # or any other design system
The VoltAgent/awesome-design-md repository has over 60 design systems extracted from real products like Stripe, Linear, Vercel, GitHub, and Figma. All under MIT license.
When to use it: When you need visual consistency across multiple screens and development sessions. It's the solution for teams where multiple people prompt the same agent for UI.
5. Agents with Taste (Emil Kowalski)
More than a tool, it's a philosophy. Emil Kowalski proposed creating design skills by aspect: one file for layout, another for typography, another for motion. The idea is to transfer the developer's "taste" to the agent in modular pieces.
The difference from DESIGN.md is granularity and human control. Instead of a monolithic file describing the entire system, you create small skills that reflect your specific preferences. If you change your mind about how modals should look, you edit a 20-line file instead of rewriting a full specification.
This approach inspired tools like Taste Skill and the modular skill ecosystem that followed.
How to Combine Them
The most common mistake is installing everything at once. Twelve active skills simultaneously generate conflicting instructions that confuse the agent. Tony Lee, who tested dozens of combinations, recommends a 3-4 layer architecture:
Layer 1 — Foundation:
Anthropic's Frontend-Design Skill. Don't negotiate on this. It's the baseline.
Layer 2 — Design System:
Choose between DESIGN.md (if you need multi-screen consistency) or Taste Skill (if you prefer modular, per-aspect control). Don't use both — they compete on the same layer.
Layer 3 — Refinement:
Impeccable for quality passes. /polish before each deployment. /audit for accessibility checks.
Layer 4 — Specialization:
One specific skill for your project's weak point:
- Poor micro-interactions? → Make Interfaces Feel Better
- Inconsistent icons? → Better Icons
- Generic components? → UI Design Brain
- Using Tailwind? → UI Skills with
/baseline-ui
When to Use Each Approach
| Situation | Tool |
|---|---|
| "I want my agent to stop making everything purple with Inter" | Frontend-Design Skill |
| "I need visual consistency across 15 screens" | DESIGN.md |
| "I already have a visual identity, I want fine control" | Taste Skill |
| "The design is okay but feels cheap" | Impeccable /polish + Make Interfaces Feel Better |
| "I want the agent to learn MY preferences" | Agents with Taste (per-aspect skills) |
| "I have a team where everyone prompts the agent for UI" | DESIGN.md + Design Plugin (blocks violations) |
What I Learned Using These
After testing these tools in real projects, three lessons:
1. Design skills are constraints, not suggestions. The agent follows them better when they're explicit rules ("never use more than 3 colors in a card") than when they're vague aspirations ("make it more modern").
2. Layer order matters. If you place a typography skill above a layout skill, the agent may prioritize incorrectly. Foundation → System → Refinement → Specialization. In that order.
3. Less is more. Three well-chosen skills produce better results than twelve competing skills. Two skills on the same layer cancel each other out.
The Future
DESIGN.md is converging toward a de facto standard for agent-readable design specifications. Google Stitch has already adopted it as its native format. The trend points toward every serious frontend project having its DESIGN.md in the repo root, at the same level as README.md or package.json.
Design skills solve a problem that even the best language models still can't solve on their own: aesthetic judgment. It's not a technical capability problem — it's a constraints problem. Give the agent the right constraints, and it will produce interfaces that not only work, but feel good.
And please, remove Inter from your font stack.
Top comments (0)