How I Used Impeccable Design Language for AI to Design My Personal Site

Anyone can prompt an AI to design a personal site. The hard part is getting a result that feels like one system: same voice, same rules, no random “AI slop.” I wanted mine to feel sharp, precise, and deliberately minimal. To get there I used Impeccable not as a UI kit but as a design language for AI: a way to teach the model what “good” means for this project and to keep that definition in the codebase.

In short: I ran a one-time, question-driven flow (teach-impeccable), wrote the answers into a Design Context block in CLAUDE.md, and from then on every design decision could be checked against that spec. No re-explaining. No drift.

What Impeccable Is (In This Context)

Impeccable is a set of skills and a workflow for AI-assisted design. The piece that mattered most for me was teach-impeccable: a one-time setup that turns design intent into something the AI can reuse in every session.

You don’t describe look and feel over and over. You run a short process once. The AI explores your codebase (README, tokens, components), then asks UX-focused questions: who uses this, what job they’re doing, brand personality in three words, references and anti-references, light vs dark, accessibility needs. Your answers get written into a Design Context section, in my case, into CLAUDE.md. From then on, that section is the source of truth. Every design decision can be checked against it.

So “Impeccable” here is less “a design system” and more a harness: a repeatable way to capture design language and feed it to the model so it doesn’t drift.

How I Used It on This Site

1. Ran the teach-impeccable flow
I triggered the skill that explores the project and asks the design questions. I already had a rough direction (dark, minimal, one accent), but the questions forced me to be explicit: who visits (clients, peers, investors, recruiters), what they care about (substance over flash), and what the site should not look like (no gradients everywhere, no playful illustrations, no second accent colour).

2. Captured Design Context in CLAUDE.md
The output was a structured block: Users, Brand personality (Sharp · Precise · Sovereign), Aesthetic direction (dark only, amber #d97706, Inter + Playfair Display + JetBrains Mono), and Design principles (e.g. “Signal over decoration”, “Amber is sacred”, “WCAG AA as the floor”). That block lives in my project’s CLAUDE.md, so any AI session that has that file in context sees the same rules.

3. Let the context drive the build
From there, every new section or component was guided by that context. Hero, typography scale, buttons, spacing, and motion were all checked against those principles. The AI didn’t have to guess “is this on-brand?” It could reference the Design Context and stay consistent. Dark background, single amber accent, typography doing the heavy lifting, density with breathing room: all of that came straight from the written principles.

What Actually Changed

Single accent: The rule “amber is sacred” prevented accent creep. Every CTA, hover state, and label uses the same amber family; there’s no second colour fighting for attention.
Typography as the main tool: Playfair for headings, Inter for body, JetBrains Mono for labels and code. The Design Context said to create interest with type first, not with extra colour or decoration. That’s what we did.
Signal over decoration: Any element that didn’t carry information or hierarchy was up for removal. That kept the layout clean and intentional.
Accessibility baked in: “WCAG AA as the floor” and “respect prefers-reduced-motion” were in the principles from the start, so contrast and motion were considered by default, not as an afterthought.

Why It Worked

The win wasn’t a fancy component library: it was persistent, explicit design language. Once the Design Context was in place, I could ask for “a new section” or “tweak the hero” and get outputs that matched the rest of the site, because the model had a clear spec. No long re-explaining, no style drift. Impeccable gave me a repeatable way to teach the AI what “good” means for this project and to keep that definition in the codebase.

What to Do First

If you’re using AI to design or refactor a site, run a teach-impeccable-style pass once: write down users, personality, aesthetic direction, and a few principles, then put that block where your AI always sees it (e.g. CLAUDE.md or your tool’s config). Treat it as the design spec. You’ll get more consistent results and a site that feels like one voice, not a patchwork of prompts.

Start with Impeccable on GitHub: the teach-impeccable skill is the one that turns answers into a reusable Design Context.