Impeccable: The Open-Source Skill That Gives AI Coding Agents a Real Design System

Without Impeccable	With Impeccable

I've noticed a recurring problem with AI-generated websites. The code can be perfectly functional, the components can be well structured, and the application can even pass its basic tests — but the design still looks strangely familiar.

The same fonts. The same purple gradients. The same rounded cards. The same dashboard layout. Different project, different developer, same visual result.
This is what Impeccable is trying to fix.

Impeccable is an open-source design toolkit for AI coding agents. It gives agents a structured way to create, review, refine, and improve frontend interfaces instead of relying entirely on vague instructions like "make it modern" or "make it look professional."

I went through the repository and its documentation. There is considerably more to it than a collection of design prompts: it includes a reusable design skill, 24 commands, browser-based iteration, automated design hooks, and a detector with 62 deterministic rules.
Let's look at how it actually works.

Why do AI-generated websites keep looking the same?​

The problem isn't necessarily that AI models cannot write frontend code. They can generate React components, CSS, responsive layouts, animations, and entire application interfaces.
The problem is that generating a working interface and making a good design decision are two different tasks.
Consider this prompt:

Build a modern SaaS landing page with a professional appearance.

There are thousands of ways to interpret that instruction. An AI agent has to make decisions about typography, spacing, layout, color, visual hierarchy, imagery, and interaction.
Without a strong design direction, it often falls back to patterns that appear frequently in its training examples.
You know the result:

• Inter or another familiar sans-serif font everywhere.
• Purple-to-blue gradient backgrounds.
• Rounded cards nested inside other rounded cards.
• A little icon inside a rounded square above every section heading.
• Generic hero sections with a heading, subtitle, and two pill-shaped buttons.
• The same three-column feature layout.

None of these elements is inherently bad. The problem is when they become the default answer to every design problem.
Impeccable approaches this by giving the coding agent a vocabulary for making more intentional design decisions.
Instead of saying "make it look better," you can ask it to make a particular section bolder, simplify a layout, improve typography, critique a user journey, or audit accessibility.
That changes the interaction from vague prompting into a more structured design process.

What exactly is Impeccable?​

Impeccable is a skill and supporting toolchain that integrates with AI coding environments.
Its main interface is a command called:
/impeccable
You can use it to create new interfaces, improve existing ones, review a page, fix design inconsistencies, and prepare frontend code for production.
The project currently provides:

• 1 main design skill.
• 24 design and workflow commands.
• 62 deterministic detector rules.
• Automatic design checks through supported coding-agent hooks.
• A CLI for scanning source files and rendered pages.
• A Chrome extension for visual inspection.
• Live browser iteration for comparing design variations.

The interesting part is how these pieces work together.
Impeccable doesn't replace your coding agent. It gives that agent a more structured design process.

1. Start with /impeccable init​

This is probably the most important command in the entire project.
/impeccable init
Instead of immediately asking the AI to redesign something, Impeccable first tries to understand the project.
It inspects the existing code and asks for information it cannot reliably infer, such as:

• Who is the product for?
• What problem does it solve?
• What should users accomplish?
• What are the product's constraints?
• What is the intended product personality and voice?

It then creates a PRODUCT.md file.
This is a useful distinction: product context is not the same thing as visual design.
For example, imagine we're building a financial dashboard.
The product context might say:

• Target users are small-business owners.
• The primary purpose is tracking cash flow.
• Users need to understand their financial position quickly.
• Accuracy and clarity matter more than decorative visuals.
• The interface must work well on desktop and mobile.

That information should remain relevant even when we redesign individual pages.
Impeccable stores this durable product information in PRODUCT.md, so later commands can use it instead of rediscovering the product's purpose every time.
It also keeps visual-system information separate.

2. PRODUCT.md vs DESIGN.md​

I think this is one of the more thoughtful parts of the project.
Impeccable separates two things that developers often mix together.
[B]PRODUCT.md[/B] — What are we building, and for whom?
This contains the durable product context: audience, purpose, constraints, operating environment, and product voice.
[B]DESIGN.md[/B] — How should the interface look and behave?
This records the visual system, including things like:

• Typography.
• Color palette.
• Spacing.
• Component styles.
• Visual hierarchy.
• Existing design conventions.

You can generate or update the design documentation using:
/impeccable document
The distinction matters when working on an existing application.
Suppose a company already has a recognizable brand with a particular font, color palette, and button style. You don't want an AI agent to redesign the entire identity every time you ask it to improve a checkout page.
DESIGN.md gives the agent a reference to follow.
You can also use:
/impeccable extract
This helps identify repeated interface patterns and pull them into reusable components and design-system conventions.
In other words, the agent gets both the reason the product exists and the rules that make its interface recognizable.

3. The 24 commands: a vocabulary for directing design work​

This is where Impeccable becomes practical.
Instead of repeatedly writing long prompts, you can use commands designed for particular types of design work.
Here are the commands grouped by what they do.

Create and plan​

Command	Purpose
impeccable	Describe what you want to create or improve
shape	Plan the UX and interface before implementation

Review​

Command	Purpose
critique	Review the design and identify the biggest UX problems
audit	Check technical quality, accessibility, responsiveness, and performance

Refine the visual design​

Command	Purpose
bolder	Give a safe or boring design more presence
quieter	Reduce visual noise
distill	Remove unnecessary complexity
colorize	Introduce or improve strategic use of color
typeset	Improve typography and text hierarchy
layout	Improve spacing and visual rhythm
animate	Add purposeful motion
delight	Add meaningful moments of personality
overdrive	Explore more technically ambitious visual effects

Improve usability and production quality​

Command	Purpose
adapt	Adapt the interface to different devices
clarify	Improve unclear interface copy
harden	Handle errors, edge cases, overflow, and internationalization
onboard	Improve first-run experiences and empty states
optimize	Improve loading and rendering performance
polish	Perform a final refinement pass

Work with the design system​

Command	Purpose
init	Establish project context
document	Document the existing visual system
extract	Extract reusable components and styles
generate	Generate and compare element variations
live	Select elements in the browser and iterate on them

A few examples make this easier to understand.
Instead of:

Please make the pricing section more attractive and visually interesting.

You can write:
/impeccable bolder the pricing section
Instead of:

The dashboard feels cluttered. Please simplify it without removing important information.

Use:
/impeccable distill the dashboard
Or, before shipping a checkout page:

/impeccable audit the checkout flow
/impeccable harden checkout
/impeccable polish checkout

The commands load focused design guidance for the task. This gives the agent a more specific direction than a generic request.
You don't have to memorize all 24 commands, either. The documentation allows you to describe the outcome you want in natural language.

4. The interesting part: 62 automated rules that detect AI design patterns​

This is probably the feature that separates Impeccable from a normal design-prompt collection.
The repository includes a deterministic detector with 62 rules.
It looks for common frontend design problems, including patterns associated with generic AI-generated interfaces.
Some examples include:

• Overused fonts.
• Generic gradient text.
• Excessive rounded cards and nested containers.
• Repetitive spacing.
• Poor typography hierarchy.
• Cramped padding.
• Skipped heading levels.
• Low-contrast text.
• Text overflow.
• Layout problems.
• Inconsistent use of the project's own design system.

The detector can also catch certain visual patterns that make interfaces look unnecessarily generic, such as repeated icon tiles, decorative accent stripes, excessive glow effects, and monotonous layouts.
The important technical detail is that these are deterministic checks.
They do not require another LLM call, and they do not require an API key.
This means the detector can run independently of the AI agent.
For example, you can scan a source directory:
npx impeccable detect src/
Or scan a running website:
npx impeccable detect http://localhost:5173
You can also request machine-readable output:
npx impeccable detect --json .
And list the available rules:
npx impeccable detect --list-rules
There is an important distinction between scanning source files and scanning a rendered page.
A JSX or TSX source scan can detect code-level patterns, but some issues only become visible after the browser renders the page.
For example, actual text contrast, tiny text, and certain viewport-related problems require a rendered page to inspect.
That's why scanning your local development server is useful.
npx impeccable detect http://localhost:5173
The CLI can also produce GitHub Actions annotations:
npx impeccable detect --github src/
This makes it possible to include design checks in a development workflow rather than relying on someone remembering to inspect every page manually.
One caveat: a deterministic detector can identify known patterns and measurable quality problems. It cannot decide whether a design is genuinely beautiful, whether a brand direction is appropriate, or whether a particular creative choice makes sense. That's where the AI-based critique and human judgment still matter.

5. Automatic design checks while the AI agent writes code​

Now imagine that you're using Claude Code or Codex to build a dashboard.
The agent creates a component, adjusts some CSS, and moves to the next task.
Normally, you might only notice a design problem when you open the application and inspect it yourself.
Impeccable can install design hooks into supported coding tools.
The workflow looks roughly like this:

1. The coding agent edits a supported UI file.
2. The Impeccable hook runs the detector.
3. It identifies relevant design problems.
4. The findings are passed back to the agent.
5. The agent gets an opportunity to fix the problem or explain why the design choice is intentional.

This is particularly useful because feedback arrives while the code is still being worked on.
It isn't necessary to wait until the entire application is finished before running a design review.
The project documents support for automatic design checks in tools including Claude Code, Cursor, Codex, GitHub Copilot, Grok Build, and Hermes Agent.
The exact timing and behaviour differ between integrations. Some tools check proposed changes, while others provide focused feedback after edits and a broader check when the agent finishes its turn.
You can inspect the hook status using:
/impeccable hooks status
And control it with:

/impeccable hooks on
/impeccable hooks off

You should still review the hook permissions in your coding environment. Hooks can execute outside the model's normal approval flow, so blindly trusting project hooks is not a great idea (especially when working with unfamiliar repositories).

6. Live browser iteration: design directly against the running page​

Another interesting feature is the live workflow.
Sometimes you know that a particular section looks wrong, but describing the problem in text is difficult.
For example:

• The hero section feels too empty.
• The pricing cards don't have enough visual separation.
• The heading is too large.
• The navigation doesn't feel balanced.
• The page has too much visual noise.

Impeccable provides a live browser workflow where you can select an element, explore design variations, and compare the results.
There are two related commands:
/impeccable live
And:
/impeccable generate
live allows you to interact with elements in the browser and iterate on them.
generate produces variations of a named element without requiring you to manually select it first.
This is a useful difference from the normal prompt-and-wait workflow.

Instead of explaining the location of an element, you can point at the actual element and work on that specific part of the page.
The browser extension also provides a visual overlay for inspecting detected problems.
The extension is available here:
https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf

7. Can Impeccable build an entire website?​

Yes.
Although I think it is strongest when improving an existing interface, the project also supports new website creation.
There are two documented approaches.

Code-first
The agent builds the interface directly in code.
This is generally the leaner approach and can produce a more coherent first implementation.

Mockup-first
The agent first creates a full-fidelity visual composition, then translates it into working frontend code.
This can lead to more ambitious visual directions, but it requires additional work to reproduce the design accurately in code.
The project can use image generation for the mockup-first workflow when the coding environment supports it.
A practical example would be:
/impeccable design a modern website for a cybersecurity research company
You can then establish the product context, choose a visual direction, generate the interface, and refine it through browser checks.
The official website includes a case study called Neo Mirai, which demonstrates this process.
It starts with a page mockup and brand toolkit for a fictional conference, then turns those references into a responsive website with navigation, interactive controls, and additional browser-based refinements.

The case study is useful because it shows that the workflow isn't simply about generating a screenshot. The result needs to become a functioning page.
https://impeccable.style/cases/neo-mirai/

8. Installation: how to add Impeccable to your coding agent​

The recommended installation method is straightforward.
Open your terminal from the root of your project and run:
npx impeccable install
The installer detects supported coding tools and lets you choose whether to install Impeccable for the current project or globally.
It also offers the design hook where the selected coding tool supports it.
After installation, reload your coding environment.
Then run:
/impeccable init
If you're using Codex, the command is:
$impeccable init
The project documents support for:

• Claude Code
• Cursor
• Codex CLI
• GitHub Copilot
• Devin
• Replit Agent
• Gemini CLI
• Grok Build
• OpenCode
• Google Antigravity
• Kiro
• Trae
• Rovo Dev
• Qoder
• Mistral Vibe
• Pi
• Hermes Agent
• DeepSeek Harness
• Veto

The exact integration features vary by tool, so check the installation documentation for the latest instructions.
You can update an existing installation with:
npx impeccable update
If you only want the shared skill without the recommended integration setup, the project also documents:
npx skills add pbakaus/impeccable
For Claude Code, there's also a plugin installation option:
/plugin marketplace add pbakaus/impeccable
Documentation:
https://impeccable.style/docs/

9. A few things worth knowing before installing​

There are some details I wouldn't skip.

It doesn't guarantee a good design.
Impeccable gives the agent better design instructions, review workflows, and automated feedback. It doesn't replace a designer, a product understanding, or a proper review process.
A design can pass every deterministic rule and still be visually uninteresting.
Likewise, an intentional brand choice can trigger a detector rule. The project supports documenting exceptions rather than blindly removing every flagged pattern.

Existing design systems still matter.
If you're working on an established product, you shouldn't let an AI agent replace the existing design language just because it wants to try something new.
That's why the project uses PRODUCT.md and DESIGN.md as separate context files.

Not every feature works identically in every coding agent.
The skill, CLI, hooks, browser workflow, and integrations have different requirements. Some tools support automatic checks, while others may only support the skill itself.

There is a small privacy detail worth understanding.
The repository documents that Impeccable fetches visual directions from its online catalog when a new design starts.
Its privacy documentation says that project names, source files, code, and PRODUCT.md are not sent to that catalog. Disabling telemetry stops the anonymous recording of which directions were shown and selected, but does not stop the catalog request itself.
You can disable telemetry with:
npx impeccable telemetry off
Or set:
DO_NOT_TRACK=1
For a project-wide setting, the configuration also supports:

{
  "telemetry": false
}

If you're working with sensitive projects, it's worth reading the privacy documentation rather than assuming that every part of the workflow is completely offline.

The licence
The repository uses the Apache License 2.0.
You can inspect the licence and the project source here:
https://github.com/pbakaus/impeccable

---

What I find interesting about this approach​

I suspect the bigger idea behind Impeccable is more important than the individual commands.

AI coding agents are becoming increasingly capable of writing frontend code. But writing code is only one part of building a good interface.

A developer still needs to make decisions about visual hierarchy, interaction, accessibility, consistency, responsive behaviour, and the overall product experience.

A generic prompt doesn't provide enough structure for all of that.

Impeccable tries to turn those decisions into something an AI agent can work with repeatedly: project context, design documentation, focused commands, automated checks, and visual iteration.

Think of it as adding a design-review layer to an AI coding workflow.
Today, we ask an agent to build a page, inspect the result, and tell it what to change. Tomorrow, I suspect more of this review process will happen continuously while the agent is working — not just for design, but for accessibility, usability, performance, and other aspects of product quality.

That doesn't mean the agent suddenly becomes a great designer. But it gives us a much better starting point than asking it to "make the UI look modern" and hoping for the best.
Explore Impeccable

• GitHub repository: https://github.com/pbakaus/impeccable
• Official website: https://impeccable.style/
• Documentation: https://impeccable.style/docs/
• Command reference: https://impeccable.style/docs/
• Chrome extension: https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf
• Neo Mirai case study: https://impeccable.style/cases/neo-mirai/
• Licence: Apache-2.0

If you're using Claude Code, Cursor, Codex, or another AI coding agent to build websites, this is worth exploring.