Zkitszo - The Real
October 04, 2026

Same Same, but Impeccable- Breaking the AI Look

I've got some apps on the go right now. What they are doesn't matter for this one... Every time we got to the design part it went the same way- describe what the screen needs to do, hand it to the AI, get back something generic. Very "AI". Same same as everybody else's.

The real problem was grounding. I couldn't find any on style. Playful or serious? Dense like a tool, or roomy like a magazine? When you can't answer that, the agent answers it for you.. the same way, every single time.

What finally broke us out of that loop is a free, open source skill called Impeccable. I'm writing down how it works mostly so I remember it.... and because I doubt we're the only ones staring at the same screen everybody else is.

You've Seen This Page Before

You know the one.. a big headline with a soft purple-to-blue gradient glowing behind it, a tiny all-caps label perched on top of the heading, three same-size cards in a row with a rounded-square icon in each, Inter as the font because of course. Can you picture it? Yup.

Impeccable's README opens on pretty much that list- Inter on everything, gradients running purple into blue, cards stacked inside cards, gray text sitting on colored backgrounds, that little icon tile over every heading. Its explanation is one line long: every model learned from the same pile of SaaS templates (SaaS being software-as-a-service.. the subscription web apps).

Anthropic, the company behind Claude, has a name for it- "distributional convergence." Fancy way of saying the model goes with what's most likely. The safe design choices, the ones that offend nobody, are the most common thing on the web it learned from... with no direction, it reaches for the middle of that pile. Their own example of what you get from "build me a landing page" with nothing else to go on? Inter, purple gradients on white, barely any animation.

Quick detour- the purple has a backstory, sort of. Back in August 2025 Adam Wathan, one of the people behind Tailwind CSS (the styling toolkit a huge chunk of these apps are built with), posted a joke apology on X. He'd made the buttons in Tailwind UI (their component kit, Tailwind Plus these days) indigo- bg-indigo-500, to be exact- about five years before. His joke: that's where all the indigo in AI-built interfaces comes from. That post did over a million views. Then the word nerds piled on- Australia's Macquarie Dictionary picked "AI slop" as its word of 2025, Merriam-Webster went with plain "slop" (their definition boils down to low-quality stuff AI churns out in bulk), and the American Dialect Society voted for "slop" too, in January 2026. So yeah... it has a name now. -OK, back on topic.

Impeccable doesn't stop at the purple stuff, either. It names three other looks AI-made pages keep collapsing into, whatever the subject- cream backgrounds under big contrasty serif headlines with a terracotta or red accent... near-black pages with a single neon color and glowing edges.... or newspaper-ish thin rules, an italic serif and tiny spaced-out mono labels. Any of those ring a bell?

It also keeps a list of fonts it treats as a sign you stopped looking: Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, Space Grotesk, Space Mono, IBM Plex, Inter as a display face, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans. It'll still use one, but only with a reason no other font could cover. How many of those have you shipped lately? Be honest....

Now the funny part... go look at what Anthropic handed out as the cure. Their November 2025 post told Claude to quit Inter, Roboto and friends, and offered nine replacement fonts instead. Five of the nine are on Impeccable's list now- Space Grotesk, Playfair Display, Crimson Pro, IBM Plex, Newsreader. The October cookbook version of that same prompt adds Fraunces, which is on it too. Their whole "editorial" row made it, in both versions. Impeccable's detector even sorts its overused fonts into an older wave (Inter, Roboto, Arial and co.) and a newer one. A comment in its source code pins the newer wave on the Anthropic skill, Vercel and GitHub defaults.

Anthropic half saw it coming. That same November post admits the swap didn't fully stick (Space Grotesk is their example). The prompt ends with a nudge to keep Claude from settling into a new comfy default- a "local maximum," in their words. My guess, and it's only a guess: the fix for the first AI look helped build the second one. Anthropic seems to have noticed something too- their updated frontend-design skill now lists the warm cream, big serif, terracotta look as an AI tell of its own. It even points out that the terracotta sits right next to Claude's own accent color. Ha!

Grounding First, Style Later

Impeccable's first move isn't style at all. You run /impeccable init, it pokes around the project, then asks a few questions- who is this for, what are they doing when they use it, what does it do that a competitor couldn't honestly claim- and writes the answers into a plain markdown file called PRODUCT.md. (Markdown being the simple text format with # for headings... I went on about it here.) Every command after that reads the file before it does anything.

During init it's specifically told NOT to ask about colors, fonts, the feel, visual references.. none of it. Product first. Who's using this, where, doing what? Grounding, the thing I couldn't find on style, starts there. The look gets decided later, one screen at a time, with those answers already on the table.

The visual side gets its own file, DESIGN.md, written in an open format out of Google Labs (Impeccable calls it the Stitch format, after Google's AI design tool) so other tools can read it too. On a brand new look, DESIGN.md comes last, from what actually got built. Their reasoning: a rulebook written up front gets defended instead of updated when the real thing disagrees with it.

Roll the Dice

For a whole new look there's a process, with the dice right in the middle of it. Let's walk it.

First it pins down what the product does that nothing else does, and the real scene its audience lives in. It writes down the page this category always ships, plus that page's predictable opposite. Both of those count as "the rut".. neither one is allowed on the list that comes next.

The list is seven candidates pulled from the audience's own world- objects, places, rituals, publications, the screens those people know inside out- each with a line on why it fits. If more than three of the seven are made of the same stuff, it has to keep digging.

Then a script rolls dice. The roll picks which of the seven leads. It's rigged on purpose- never the agent's top two, only somewhere from third to seventh. Why rig it? When a model ranks its own ideas, the safest one tends to float to the top... the roll is there to knock it off. It also deals in a few "challengers" from a catalog of reviewed design worlds (188 of them when version 4 shipped). Those get judged on two things only- would the audience see themselves in it, and is the product still clear?

You still make the call. The roll's pick, the agent's own favorite (it gets a card too), a challenger.. or the boring option, on purpose. Every round includes the category standard, done straight, as a "standing exit"- the instructions say outright that familiar and effective is a fine place to land. The difference is you pick it...

Two ways to get a design out of an agentThe rut"Make it nice"a prompt with noproduct in itThe top guessthe most average answerthe model knowsThe defaultInter, purple gradient,a grid of same-size cardsThe roll, with ImpeccablePRODUCT.mdwho it's for, why,what's trueSeven worldsfrom theaudience's life,not the categoryThe rolllands on #3 to #7,deals inchallengersYou choosethe roll's pick,the agent's own,a challenger, orthe plain defaultBuild + checkcraft floor,build, review,then DESIGN.md

It also works out what kind of page this is- not what the product is. Four modes: Persuade (landing pages, pricing), Operate (app screens, dashboards, settings), Read (docs, articles) and Experience (portfolios, galleries). The landing page for a dev tool is Persuade.. the help docs for a fashion label are Read. App screens lean familiar on purpose- the "world" you picked only gets to lend type, palette, density and one signature move. Navigation and controls stay the standard ones people already know how to use. That font list from earlier? It's aimed at the expressive pages. For app and docs screens, plain system fonts and workhorse UI faces are fine (the detector still grumbles at Inter, mind you).

The Refuse List

Before the agent touches any UI it has to read a short file called the craft floor. Half of it is checks: body text contrast of at least 4.5 to 1 (contrast ratio being how hard the text stands out from what's behind it), lines of body text around 65 to 75 characters wide, real hover, disabled, loading, error and empty states, buttons named for what they do. The other half is things to refuse unless the brief actually asks for them- gradient text, glass blur as decoration, a thick colored stripe down one side of a card, hard offset "brutalist" shadows, emoji standing in for icons, monospace worn as a "techy" costume, the big-number-small-label hero stat, 01/02/03 section numbers, a modal for something that doesn't need one, the grid of same-size cards (cards inside cards are always wrong, per the file).

One item isn't up for debate at all. The eyebrow- that tiny label sitting above a heading- is banned outright. The heading is supposed to carry itself.

Then there's a bit about the parts of a page nobody designs: the text selection color, the blinking caret, scrollbars, focus rings, the numbers in a data table. Left alone, they're browser defaults. The craft floor calls theming them "the cheapest signal that a page was built rather than assembled." How many sites have you seen bother?

If that list feels familiar, it's the same move as negative prompting for AI art- the more you spell out what you don't want, the better the output gets.. up to a point. See Space Grotesk, above.

The words are backed by a detector, too- 61 rules that scan HTML and CSS for these tells with no AI involved and no API key. The rule names alone are worth a read: side-tab (that colored stripe down the side of a card), icon-tile-stack, cream-palette, marketing-buzzword (streamline, empower, supercharge...), pulsing-dot, even em-dash-overuse. Eyebrows get two rules all to themselves! The full catalog lives on their slop page, with examples sorted by era and by model.

Thirteen of those rules (broken images, overflowing text, low contrast, gradient text and friends) run as a hook- a little script the agent fires off automatically- right after each edit. That's the setup on Claude Code and Codex, anyway.. Copilot runs every rule on every edit, Cursor checks a change before it lands, and Grok saves it all for the end. The rest of the rules wait for a deeper pass when the agent's done. There's a Chrome extension too, about 60,000 users, that runs the same rules on whatever page you're looking at and keeps it all local.

Twenty-Four Commands

Everything goes through one command- /impeccable plus a word. Twenty-four words, technically, in six families:

24 commands, one shared vocabulary/impeccable <command> <target>, grouped the way the skill groups themBuildplan it, record itshapeinitdocumentextractcraftEvaluatescore what's already therecritiqueauditRefineturn it up, down, or tightenpolishbolderquieterdistillhardenonboardEnhancetype, color, motion, the wowtypesetcolorizelayoutanimatedelightoverdriveFixcopy, devices, speedclarifyadaptoptimizeIteratevariants live in the browserlivegeneratecraft (dashed) is now just an alias for ordinary new work

The one to try first is critique. It runs two separate reviews that can't see each other's notes- a design review, and the detector plus a pass in the browser- then scores the page 0 to 4 on each of Jakob Nielsen's ten usability heuristics (rules of thumb, basically). Its own scoring guide says most real interfaces land somewhere around 20 to 32 out of 40.. so don't panic. Then it picks two or three of its five personas and walks the page as them- Alex the impatient power user, Jordan the confused first-timer, Sam on a screen reader, Riley trying to break things on purpose, Casey one-handed on a phone. It finishes by asking what you want fixed first.

Want the technical side? audit covers accessibility, performance, theming and responsive, plus whether the build hangs together as one system, scored out of 20. A section feels timid? bolder turns it up without touching anything else on the page... and I mean anything. Too loud? quieter goes the other way. typeset, colorize, layout and animate do what they say on the tin. harden throws the ugly stuff at it: hundred-character names, emoji, right-to-left text, no connection. Then there's overdrive, the wild one (shaders, spring physics, scroll-driven everything).. it has to pitch you two or three directions and get a pick before it writes a single line. live lets you click an element in your browser and flip between three variants it hot-swaps in.

Lost? Type /impeccable on its own. It looks over the project and suggests the two or three things most worth running next.

Their way in is two steps from your project folder: npx impeccable install, then /impeccable init inside your agent (more on that installer below). Seventeen agents are supported- Claude Code, Cursor, Codex, Gemini CLI, GitHub Copilot and a dozen more.

Who's behind it? Paul Bakaus- the jQuery UI guy, if you were building websites back then. Impeccable started out building on Anthropic's frontend-design skill. It's a whole company now. You'll even find it built into the GitHub Copilot app (you switch it on under Experimental). About 75,000 GitHub stars too.. we're hardly early to this one.

Heads up on size. The reference files run to about 430 KB of markdown, though it only pulls in what the command you're running needs. Even a fan opened an issue asking them to slim down the part that loads into every session... If tokens are a thing for you (they're a thing for everybody..), here's where they actually go.

Read It Before You Run It

We read every instruction file before installing it. No funny business in the text.

The part worth knowing about is the "engine." The skill is mostly markdown, but the heavy lifting- the detector, the dice, live mode, the measuring- runs through a compiled program that gets downloaded from the project's GitHub releases. A compiled program you can't read the way you read markdown.. it's pinned to a version and checked against a checksum (a fingerprint of the file), but that checksum comes from the same release. It catches a broken download, not a swapped one.

The engine's source code is on GitHub, though. In there, something else turns up.. it phones home a little. When you lock in a direction the dice dealt, the engine has your agent report back to impeccable.style which kind of card won (and which catalog world, if it was one of theirs), the roll's key, scope and page mode, and whether you'd asked for a safer or bolder hand. Your project name, files, prompt and your own candidate ideas stay on your machine. It's on by default. The README never mentions it.. their privacy policy does, to be fair. It's upfront about the rest too- a daily version check, the dice requests themselves, the analytics on their website.

Turning the choice report off is one line in your environment:

export IMPECCABLE_NO_TELEMETRY=1

Put it somewhere your agent actually picks it up.. an app you launch from the Dock won't see your shell profile. The general-purpose DO_NOT_TRACK=1 works too. IMPECCABLE_NO_UPDATE_CHECK=1 stops the version check. None of these stop the dice from fetching their challenger worlds and preview images... that's the feature, after all. Those challengers arrive from their server as text your agent reads and follows. Worth knowing. If an OpenAI key is sitting in your environment, the image generation it uses for mockups falls back to it- billed to you- and sends your prompts and reference images (screenshots of your pages included) to OpenAI. More moving parts than "a skill" sounds like, right?

We all do it.. skim the README, paste the one-liner, find out later what it actually did. We didn't use the npx installer- we copied the skill in by hand after reading it. If you do use it, the engine comes along: the installer downloads it into the skill folder, with no flag to skip that part. It also wires hooks into your project. Per their README, the first edit can pull the engine down by itself even if you said no to the command (the installer's --no-hooks flag skips the hooks).

For now we've left the engine switched off. Without it the detector, the dice and live mode don't run- the design guidance itself still does. We rigged up a stand-in roll of our own.. a random pick from third to seventh, no catalog.

Not Everybody's Sold

Now the other side. When Impeccable first hit Hacker News back in January it got roasted. People said some of the "after" examples looked worse than the "before" ones, and a few argued taste can't be stuffed into a pile of markdown files- knowing the words isn't the same as knowing how people react to a page. The author showed up in the thread, said the examples had been rushed, and pulled them. Even now there are comments saying everything still drifts toward the same look unless you're very specific about what you want.

And in defense of "generic" itself.. there's a reason familiar works, at least for how things behave. Jakob Nielsen's "Jakob's Law" boils down to this: your visitors learned how websites work on everybody else's site.. they expect yours to behave the same. Impeccable agrees, for app screens anyway- there, familiarity is often the point. The tool is supposed to disappear into the task.

OK.. go write your PRODUCT.md.

Oh- one more thing. With the engine off, nothing flags that tiny all-caps eyebrow sitting over your headings.. you'll have to catch it yourself. Go look. I'll wait....

What's the tell for you.. the one detail that makes you go "yep, an AI made this"? Drop it in the comments- the weirder the better.

Links-
https://github.com/pbakaus/impeccable
https://impeccable.style

Glossary

  • Agent — an AI tool that reads your project's files and runs commands for you. Claude Code, Cursor and Codex are agents.
  • AI slop — low-effort content that AI pumps out in bulk. In design, it's the look you get when nobody steers.
  • Challenger — a ready-made design world from Impeccable's catalog that the dice deal in to compete with your own candidates.
  • Checksum — a fingerprint of a file, used to check that a download arrived intact.
  • Contrast ratio — how strongly text stands out from its background. 4.5 to 1 is the usual floor for body text.
  • Craft floor — Impeccable's short file of quality checks and refusals that the agent reads before touching any UI.
  • DESIGN.md — the file where Impeccable records a project's visual system: colors, type, spacing, components.
  • Detector — Impeccable's rule-based scanner. It flags AI-design tells in HTML and CSS without using an AI model.
  • Distributional convergence — Anthropic's name for a model drifting toward the most common, safest choices in its training data.
  • Engine — Impeccable's compiled helper program. It runs the detector, the dice and live mode.
  • Environment variable — a named setting your shell hands to every program it starts, like DO_NOT_TRACK=1.
  • Eyebrow (kicker) — a small label, usually all caps, sitting above a heading.
  • Glass blur — the frosted-glass look ("glassmorphism"), made with a background blur and some transparency.
  • Hero — the big first section at the top of a page.
  • Hook — a script an agent runs automatically when something happens, like after every file edit.
  • Hot-swap — replacing part of a running page without reloading the whole thing.
  • Inter — a free sans-serif typeface designed for screens. It's on everything. That's the joke.
  • Jakob's Law — people expect a new site to behave like the ones they're used to.
  • Local maximum — the best spot in the immediate neighborhood, but not the best overall. Here, a new default a model settles into.
  • Markdown — plain-text formatting: # for headings, * for lists.
  • Modal — a box that pops up over the page and blocks everything else until you deal with it.
  • Monospace — a typeface where every character takes the same width, like in a code editor.
  • Negative prompting — telling a generator what you don't want in the output.
  • Nielsen's heuristics — Jakob Nielsen's ten rules of thumb for usability, things like visible system status, error prevention and consistency.
  • Persona — a made-up but specific user, like Casey one-handed on a phone, used to walk a design through someone else's eyes.
  • PRODUCT.md — Impeccable's plain-text file of product facts: who it's for, what it does, what's true about it.
  • SaaS — software as a service. Apps you use in a browser, usually on a subscription.
  • Standing exit — Impeccable's always-there option to go with the plain category standard, on purpose.
  • Skill — a folder of instructions, sometimes with scripts, that an agent loads when a task calls for it. Impeccable is one.
  • Tailwind CSS — a CSS framework where you style things by stacking small classes, like bg-indigo-500, right in the HTML.
  • Tailwind UI — Tailwind's official kit of ready-made components, sold as Tailwind Plus these days.
  • Telemetry — usage data a program sends back to the people who make it.

Sources

Comments

Post a Comment

← Newer