DEV Community

Cover image for Impeccable: The Open-Source Design Skill That Stops AI Websites Looking AI-Generated
Muhammad Tayyab
Muhammad Tayyab

Posted on Originally published at devpik.com

Impeccable: The Open-Source Design Skill That Stops AI Websites Looking AI-Generated

Every AI-built website looks the same: Inter everywhere, purple gradients, cards inside cards. Impeccable is the open-source design skill that teaches your AI coding agent real design: 24 commands like polish, bolder and delight, 62 deterministic checks that catch AI-looking design, and live iteration in the browser. It works inside Claude Code, Cursor, Codex and more, and it is free under Apache 2.0.

What Is Impeccable?

Impeccable is design guidance for AI coding agents, in the form of a skill your agent can actually use. One skill, 24 commands, live browser iteration, and 62 deterministic detector rules, all aimed at one problem: AI-generated frontend design looks the same everywhere. If you have opened a few AI-built sites lately, you know the look. Inter for every font. Purple-to-blue gradients. Cards nested inside cards. Gray text sitting on colored backgrounds. The little rounded-square icon tile above every heading. Every model trained on the same SaaS templates, so without guidance they all converge on the same handful of tells.

Impeccable started from Anthropic's frontend-design skill, the first widely used design skill for Claude, and pushed it further. Instead of a document your agent reads once and forgets, it gives the agent a shared design vocabulary: commands it can run, checks it can execute, and a live mode where it iterates on real elements in the browser. The goal is not to make the agent a designer. It is to stop the agent from shipping the default look every single time.

The 62 Rules That Catch AI Slop

The part that makes Impeccable different from a prompt full of taste is the detector rules. Sixty-two of them are deterministic, which means the CLI and the browser extension can run them with no language model and no API key. They check for the tells directly: overused fonts like Arial, Inter and system defaults, gray text on colored backgrounds, pure black or gray that should have been tinted, everything wrapped in cards or cards nested in cards, and bounce or elastic easing that feels dated. On top of those, there are LLM-only critique checks for the things a rule cannot judge, like hierarchy and emotional resonance.

That split matters. Deterministic checks are fast, repeatable and free to run, so they can sit in the loop every time the agent touches a surface. The agent does not have to remember the rules or feel inspired by them. The rules just run, and the design either passes or it does not.

24 Commands, One Shared Vocabulary

The skill itself is one install, and everything hangs off a single slash command. Run npx impeccable install from your project root, then run /impeccable init inside your AI coding tool. Init inspects the project, asks only about the material gaps, and writes PRODUCT.md: durable product truth like the audience, purpose, operating context, constraints, voice and evidence. Visual direction lives separately, in DESIGN.md, so the agent stops confusing what the product is with what it should look like.

From there the vocabulary opens up. Shape plans the UX and UI before code exists. Craft runs the full shape-then-build flow with visual iteration. Critique reviews hierarchy, clarity and emotional resonance. Audit runs the technical checks for accessibility, performance and responsiveness. Polish is the final pass before shipping. Bolder amplifies a boring design, quieter tones down an over-the-top one, distill strips a design to its essence. Animate adds purposeful motion, colorize introduces strategic color, typeset fixes font choices and hierarchy, layout fixes spacing and rhythm, delight adds moments of joy, overdrive adds technically extraordinary effects. Harden covers error handling, internationalization, text overflow and edge cases. Onboard handles first-run flows and empty states. Clarify improves unclear copy, adapt adjusts for different devices, optimize improves performance. Live and generate iterate on elements directly in the browser, with generate picking variants without manual selection. And pin turns any command into a standalone shortcut, so pin audit gives you /audit on its own.

How It Fits Your AI Coding Tool

Impeccable is built for the harness you already use. The installer detects the folders and CLIs on your machine, from Claude Code and Cursor to Codex, GitHub Copilot, Gemini CLI, Grok Build, Hermes Agent and Veto, and installs into the project or globally, whichever you choose. The skill itself needs no runtime of its own. Every copy ships a small launcher that runs a self-contained engine binary, downloaded once on first run. Node only enters the picture if you use the npx installer, which is a shim around the same binary. Manual and Git installs work without it.

The project is also honest about what it is for. The docs point to a real before-and-after case study, the Neo Mirai project, transformed with Impeccable commands. That is the pitch in one image: same project, same agent, different design judgment. And it is a big part of why the numbers look the way they do.

Why It Blew Up

Impeccable launched in November 2025 and, less than a year later, passed 86,000 GitHub stars with over 5,000 forks, and it is still being updated, with commits landing days ago. The timing explains a lot of it. AI coding agents got good at writing working code faster than they got good at making it look considered, and everyone shipping with them hit the same wall: the product worked, but it looked generated. Impeccable names that gap and gives the agent something concrete to do about it, in the tools developers already live in, for free under Apache 2.0. If your agent's output looks like every other agent's output, this is the skill that breaks the pattern.

Links

Top comments (0)