Problem
Every time you ask an AI to build a UI, you get the same thing: Inter font, a purple gradient somewhere, cards nested inside cards. It does not look bad exactly, but it is the new generic. Claude is not doing anything wrong. It has just been trained on millions of web projects and learned what the average one looks like.
I was rebuilding this site and did not want average. The question was whether I could give Claude better taste before it started generating.
Solution
I came across a project called Impeccable (github.com/pbakaus/impeccable), a design system built specifically to fight Claude’s default aesthetic reflexes. It consists of reference files and steering commands that you load into context before asking Claude to do any design work.
Rather than use it directly, I used it as raw material. My OpenClaw research agent audited it alongside a few other design resources and synthesized everything into a single file: CLAUDE_DESIGN.md. That file lives in my agent workspace and gets loaded into context whenever design work starts.
The structure: anti-patterns first, then principles by domain. Typography, color, spacing, interaction. Each section leads with what Claude gets wrong by default, not what good design looks like in the abstract.
Learnings
Leading with anti-patterns is more useful than leading with principles. Claude already knows design principles. It just defaults to the most common implementation of them. Telling it “never nest cards inside cards” or “never use pure gray, always tint neutrals toward the brand color” changes output in a way that “use thoughtful spacing” does not.
On OKLCH vs HSL, because I had to look this up. HSL (Hue, Saturation, Lightness) is how most designers have defined colors for years. The problem is that equal steps in HSL numbers do not look equal to your eyes. A small lightness change at the dark end of the scale barely registers visually, while the same change in the middle looks dramatic. OKLCH is a newer color space built to be perceptually uniform: equal steps in the numbers produce equal-looking steps on screen. For building a dark mode palette this matters a lot, and it was one of the more practical things in the reference file.
Finding and using good references is itself a skill. I am not a web developer by trade and I did not need to become one to get a well-designed site out of Claude. What I needed was a good source of design knowledge formatted in a way Claude could use. Knowing how to find that, evaluate it, and load it into context is exactly the kind of thing that separates useful AI output from generic AI output.
Next Steps
- Test the reference file on other design work like dashboards and data visualizations to see where it holds up
- The anti-patterns section will need updating over time as AI design defaults shift