Claude Code Skills: How to Build Interfaces That Convert (Not AI Slop)

There's a problem nobody wants to admit in the generative AI world: the code works, but it looks terrible.

Inconsistent spacing. Random typography. Dissonant colors. Buttons floating in the void. This phenomenon has a name: AI slop — that generic visual output that screams "AI-generated" from a mile away.

For a consultant, a SaaS founder, or a sales team building internal tools with Claude Code, this isn't just an aesthetic problem. It's a conversion and credibility problem.

🎯 Why Your Tools' Appearance Actually Matters

A B2B decision-maker makes their call in under 30 seconds. When your landing page, dashboard, or onboarding tool looks like a student project, the subliminal message is brutal: "These people don't pay attention to detail."

Your competitors often have dedicated design teams. You have Claude Code and determination.

Until now, that was a real disadvantage.

🛠️ Claude Code Skills: The Intelligence Layer Above the Code

A skill is a structured instruction file you give Claude before it starts working. It encodes domain knowledge, constraints, proven patterns. Instead of remembering to say "use an 8px grid, respect WCAG AA, add subtle micro-transitions" in every prompt, the skill handles it automatically.

This is exactly the principle behind commercial skills — encoding complex business rules once, reusing them infinitely. The difference with a design skill? The rules are visual, not commercial.

✨ Impeccable: The Skill That Eliminates AI Slop

Impeccable is a Claude Code skill built by Paul Bakaus, former Google Developer Advocate. It hit 15,000 GitHub stars in days — a signal of massive, suppressed demand.

It encodes the fundamental rules of professional design and applies them automatically to every generated component:

The 8px Rule

All spacings (margins, paddings, gaps) are multiples of 8px. Result: a regular visual rhythm the user perceives subconsciously.

Typographic Hierarchy

Each level has its defined size, weight, and spacing. H1 commands authority, body text stays readable. No more random sizes.

WCAG AA Contrast

Minimum 4.5:1 ratio between text and background. Accessibility, yes — but also the legibility you take for granted on the beautiful interfaces you admire.

Micro-interactions

150ms transitions on hovers. These infinitely small details separate an interface that "works" from one that "feels right."

💡 What This Changes for Your Sales Machine

Prospecting landing pages: Generate a page for each prospect segment in 10 minutes that looks professionally designed. No cognitive dissonance when they click from your cold email.

Internal commercial dashboards: Your lead tracking tools, n8n dashboards, AI agent interfaces — they all have that "rushed internal tool" look. Impeccable makes them presentable for a board, a client, a demo.

Investor pitch prototypes: Transform a functional MVP into something that looks production-ready in hours.

⚙️ Installation in 3 Lines

git clone https://github.com/pbakaus/impeccable.git
cd impeccable
claude skill add ./impeccable

Customize with your brand's design tokens:

{
  "brand": {
    "colors": { "primary": "#2563EB" },
    "typography": { "fontFamily": { "heading": "Inter" } },
    "spacing": { "unit": 8 }
  }
}

⚠️ Known Limitations

• Claude Code only — won't work with Cursor, Windsurf, or other AI IDEs
• React + Tailwind primarily — limited support for Vue, Angular, or vanilla CSS
• Opinionated design — constraining if you have a strong, unconventional creative direction
• Young project — frequent updates, possible breaking changes

For most SME use cases — internal tools, landing pages, dashboards — these limitations are negligible against the gain.

📊 The Math

A 3-person team generating 15 components per week previously needed 20 minutes of visual corrections per component.

Without Impeccable: 5 hours of visual fixes per week → 20 hours per month. With Impeccable: Those 20 hours disappear. Every month.

That's more than a full month of development recovered per year.

🧠 The Bigger Lesson: Encode Domain Expertise Into Your Skills

Impeccable illustrates a principle I apply systematically with clients: the best skills encode expertise that would take years to acquire.

Paul Bakaus spent years at Google working on web and design standards. He distilled all of that into a structured rules file. You now benefit from that expertise without needing to deeply understand it.

The question isn't "should I use skills?" but "what expertise should I encode first?"

For your Sales Machine, the answer starts with two categories: business rules (how to qualify a lead, how to structure a message) and execution rules (how to style an interface, how to structure a workflow).

Impeccable handles the second category for you. For free.