Impeccable: A Design System Built for AI Coding Agents

If you've ever tried to get an AI coding agent to generate consistent, good-looking UI, you know the pain. They tend to produce messy, inconsistent layouts with random spacing, mismatched colors, and components that look like they fell out of a design toolbox from 2010.

That's where Impeccable comes in. It's not another design system for humans. It's a design system built specifically for AI agents to use when generating code. And it might just be the missing piece in making AI-generated UIs actually look decent.

What It Does

Impeccable is a lightweight, token-based design system that lives in a single CSS file. It defines a complete set of design tokens — colors, spacing, typography, shadows, radii, and more — that are easy for an AI model to reference and apply consistently. The system is intentionally minimal, with no complex build steps or dependencies. You drop it in, and agents can generate UIs that follow a coherent visual language without hallucinating random values.

The repo includes the core CSS file, a small HTML demo page showing all tokens in action, and a concise README documenting the design decisions. Think of it as a "design system as a single CSS file" that's optimized for machine readability, not just human consumption.

Why It’s Cool

What makes Impeccable unique is its focus on developer and AI UX together. The token names are descriptive but short enough for an AI to reliably reference (e.g., --color-primary, --space-sm, --font-body). The system enforces a strict 8px grid, so agents can't accidentally produce layouts with weird non-aligned spacing. Colors are limited to a purposeful palette — no overwhelming 200-color system that confuses agents.

Another smart touch: the system exposes both semantic tokens (like --color-text-primary) and raw utility tokens (like --color-blue-500). This gives agents the flexibility to either "think" in design language or fall back to direct values when needed. It's a small but practical design choice that significantly improves consistency in the generated output.

There's also a subtle but important detail — the system includes tokens for interaction states (hover, active, disabled) out of the box. Most agents forget to handle these, resulting in dead-feeling UIs. Impeccable makes them as easy to use as any other token.

How to Try It

Getting started takes seconds. Clone the repo:

git clone https://github.com/pbakaus/impeccable.git

Then open index.html in your browser to see the token reference. If you want to use it with an AI coding agent, simply include the CSS file in your prompt or link to it directly. You can drop the impeccable.css file into any existing project — it's framework-agnostic.

Alternatively, just browse the repo on GitHub and read through the token list. It's short enough to understand in a few minutes, but deep enough to cover most UI needs.

Final Thoughts

Impeccable feels like the right kind of tool for the current AI coding moment. It doesn't try to be a "design system for everything." Instead, it solves a concrete, annoying problem — agents generating inconsistent, garbage UIs — with a simple, pragmatic solution.

If you're building with AI coding agents (or training models to generate code), give Impeccable a look. It won't replace human designers, but it might save you from having to manually fix spacing and color values on every AI-generated page. For a single CSS file, that's a pretty good return on investment.

— from @githubprojects