The AI Slop Problem

You ask Claude Code to build a dashboard. It gives you Tailwind defaults: blue buttons, white backgrounds, shadows everywhere, rounded-lg on everything. It works. It also looks exactly like every other AI-generated interface.

This is AI slop. Not broken, just generic. No personality. No intention. No reason behind any visual decision.

The fix isn’t prompting harder. It’s encoding your design system into a skill that runs automatically.

Why Prompts Fail for Design

I tried the obvious approach first: detailed prompts describing exactly how I wanted components to look. It worked for one component. Then Claude forgot everything on the next request.

The problem is context. Claude doesn’t carry your design preferences between conversations. Every new session starts fresh. You end up re-explaining your color system, your spacing scale, your typography choices—every single time.

Skills solve this by injecting your design system automatically.

Building the Design System Skill

Create this file at .claude/skills/design-ui/prompt.md:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# Design System (Enforced)

Apply these rules to ALL UI code generation.

## Color Foundation (Dark Mode First)

--bg-root: #0b0f1a;
--bg-surface: #0f1422;
--bg-elevated: #141a2c;

--border-subtle: rgba(255, 255, 255, 0.06);
--border-default: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.12);

## Single Accent Color

--accent-primary: #7c7cff;
--accent-hover: #8b8bff;
--accent-muted: rgba(124, 124, 255, 0.15);

Use ONLY for: primary actions, active states, focus rings.
No secondary accent colors. No gradients.

## Typography

Font: Inter, system-ui, sans-serif
Mono: ui-monospace, SFMono-Regular, Menlo

Sizes:
- Page title: 16px, weight 600
- Section header: 14px, weight 600
- Body: 13px, weight 450
- Labels: 12px, weight 500
- Meta: 11px, weight 450

## Spacing (4px grid only)

4px, 8px, 12px, 16px, 24px, 32px
No exceptions.

## Forbidden Patterns

- Pure black (#000)
- Neon colors
- Decorative gradients
- Heavy shadows (use borders instead)
- Large radii (max 12px)
- Multiple accent colors
- "Marketing UI" patterns in operational tools

This isn’t a suggestion—it’s a constraint system. Claude now has rules it must follow.

The Difference in Output

Before the skill, asking for a status card got me this:

1
2
3
4

<div className="bg-white shadow-lg rounded-xl p-6 border border-gray-200">
  <h3 className="text-xl font-bold text-gray-900">Pipeline Status</h3>
  <p className="text-gray-600 mt-2">Running successfully</p>
</div>

Generic. Light mode. Shadows. Large padding. Could be any SaaS marketing site.

After the skill:

1
2
3
4

<div className="bg-[#141a2c] border border-white/8 rounded-lg p-4">
  <h3 className="text-[14px] font-semibold text-white/92">Pipeline Status</h3>
  <p className="text-[13px] text-white/72 mt-2">Running successfully</p>
</div>

Intentional. Dark mode. Border-based separation. Proper type scale. Looks like it belongs in a professional data tool.

Extending the Skill for Components

The base skill handles colors and spacing. For specific components, add patterns:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

## Button Patterns

Primary:
- Background: var(--accent-primary)
- Text: white
- Padding: 8px 12px
- Border-radius: 8px
- Font-weight: 500

Secondary:
- Background: transparent
- Border: 1px solid var(--border-default)
- Text: rgba(255,255,255,0.85)

Never use ghost buttons without visible borders.

## Card Patterns

- Background: var(--bg-elevated)
- Border: 0.5px solid var(--border-default)
- Border-radius: 8px
- Padding: 16px or 24px only
- No shadows

Every component type you add reduces the chance of Claude improvising.

1

mkdir -p .claude/skills/design-ui

Why Dark Mode First

Light mode is harder to get right. Contrast ratios, text readability, visual hierarchy—all more complex with bright backgrounds. Dark mode with near-black foundations and subtle borders is more forgiving.

More importantly, dark mode is what developers actually use. If you’re building tools for engineers, meet them where they are.

The skill enforces a cool, near-black foundation with slight blue-violet bias. Not pure black—that’s harsh. The slight color warmth reduces eye strain during long sessions.

Handling Semantic Colors

Status indicators need special treatment:

1
2
3
4
5
6
7
8
9

## Semantic Colors (Desaturated)

--success: #3fbf7f;
--warning: #e6b566;
--error: #e06c75;
--info: #61afef;

All semantic colors are desaturated for dark backgrounds.
Never use saturated red/green on dark surfaces.

AI-generated code loves to use pure red for errors and pure green for success. On dark backgrounds, these are painful. The skill forces muted variants.

The Motion Question

Most AI-generated UI includes no motion or uses defaults like transition-all duration-300. Both are wrong.

Add motion constraints to your skill:

1
2
3
4
5
6
7
8

## Motion

- Micro interactions: 150ms
- State transitions: 200-250ms
- Easing: cubic-bezier(0.25, 1, 0.5, 1)
- No springs, no bounce, no playful animations

Motion should be barely noticeable.

This prevents Claude from adding decorative animations that undermine the professional feel.

When the Skill Isn’t Enough

Skills work for most UI generation, but they can’t handle everything:

Complex layouts still need guidance. The skill defines components, not how to arrange them. You’ll still prompt for layout decisions.

Edge cases require inline instructions. If you need a one-off exception to the system, tell Claude explicitly in your prompt.

External libraries may conflict. If you’re using a component library, its defaults might override your skill’s guidance. Consider whether you need the library at all.

FAQ

The Real Win

The point isn’t just consistency. It’s that your AI-generated UI stops looking AI-generated.

When every component follows the same color system, the same spacing grid, the same typography scale—the result looks like a human designer made intentional choices. Because you did. You just encoded those choices into a skill.

AI slop happens when you let the AI make aesthetic decisions. A design skill takes those decisions back.

Conclusion

Stop accepting AI defaults. Your design system exists for a reason. Encode it into a skill, and Claude Code becomes an extension of your design intent instead of a random generator.