--- import Base from '../layouts/Base.astro'; import LiveDemoPalette from '../components/LiveDemoPalette.astro'; import Testimonials from '../components/Testimonials.astro'; import LiveDemoGbar from '../components/LiveDemoGbar.astro'; import '../styles/main.css'; import '../styles/sub-pages.css'; import '../styles/home-kinpaku.css'; import '../styles/home-rebuild.css'; import '../styles/testimonials.css'; // Hero background candidates: pulled from /design-system's candidate folders // so the homepage switcher and the design-system gallery stay in sync. The // switcher panel below the hero lets you cycle through them and pick one; // selection persists in localStorage. Remove the switcher block + this loader // once the hero is locked in. // Hero is /assets/neo-kinpaku/candidates/finalists/m-01-v2-01.png (referenced from CSS). // Previous hero: /assets/neo-kinpaku/kintsugi-hero-v3.png ---

The missing design
vocabulary for agents.

It's why AI frontends all share one look: no words for hierarchy, contrast, or restraint. Impeccable gives your agent the designer's vocabulary, and gives you the same commands, so you both stop guessing and start directing, live, in your production codebase.

Get started How it works
localhost:3000
Generating variants…
1 / 3
Variant 3 written to source

Desloppification

Impeccable strips the AI slop tells and bad defaults out of every design discipline, from type to motion to copy. A skill can't make the model a better designer; it can clear the reflexes that make its output look generated.

Browse the full catalog npx impeccable detect src/

The Language

23 commands give you a shared design vocabulary with your AI. Each maps to one discipline (/typeset for type, /colorize for color, /animate for motion), so you can ask for the exact thing without explaining it. Pick any to see it in action, or browse the full reference →

Ready to drop in

01

Respects your design system.

Inherits your tokens, components, and conventions instead of overwriting them. New work fits the system, not the model's defaults.

/impeccable polish : scanning codebase
› Walking src/…
✓ src/styles/tokens.css  14 colors, 6 font sizes, 7 spacing steps
✓ tailwind.config.ts  theme.extend merged
✓ src/components/  34 components
    · Button: primary, secondary, ghost, destructive
    · Card: 3 variants, 8px / 16px radii
    · Input, Select, Dialog, Toast, Table…
✓ DESIGN.md  brand rules loaded
→ Matching your system. Not inventing one.
02

Real product context.

Captures the brief once, in PRODUCT.md. Every command reads it before designing.

PRODUCT.md Loaded on every command
Users SREs on call, reading fast, often in the dark.
Register Product. Design serves the task.
Brand voice Calm, clinical, no hype.
Anti-references Purple gradients. Glassmorphism. "Boost your productivity."
03

Travels as DESIGN.md.

/impeccable document writes one in the Google Stitch format. Your visual system becomes portable.

DESIGN.md Google Stitch spec
Primaryoklch(78% .12 82)
WordmarkSpaced 400
IM
Avenir Next
BodyRegular 400
Aa
Avenir Next
Components34
Primary Ghost
Email address
Readable by every DESIGN.md-aware tool.
04

Tuned to the agent you actually use.

Plays to each agent's strengths and around its weaknesses. Below: Codex used image generation to draft Neo Mirai before /impeccable craft turned it into shipped code.

01 · Visualize Auto-generated hi-fi landing-page mock in editorial warm-paper style.
02 · Shape Auto-generated brand toolkit: identity lockups, palette, type, icon system, and application mocks for a fictional AI design conference.
03 · Live build Finished Neo Mirai website hero and agenda, implemented from the generated conference mock.

Read the case →  ·  Open the live build →

05

Brand work is not product UI.

A landing page and a dashboard play by different rules. Impeccable runs in two registers, brand or product, and every command knows which.

Brand mode
Issue 04
Shape the story.
Product mode
Users12,482
Active now1,207
Conversion4.8%
06

Block slop before it ships.

A detector you can wire into PR checks. 44 deterministic rules, no LLM, exit codes the build can read.

feat/pricing-page ✗ failing
$ npx impeccable detect src/
✗ src/Hero.tsx:42 gradient-text
✗ src/Card.tsx:8 side-stripe-border
✗ src/Button.tsx:17 ai-color-palette
3 anti-patterns · exit 1
07

Iterate in your live app. BETA

Pick any element in your running dev server, leave a comment or a stroke, hit Go. Three production-quality variants swap in via your framework's HMR.

localhost:3000
section.hero more elegant
h1
bolder ×3

See how Live Mode works →

08

Accept writes to source.

Variants land in your real file as an ordinary edit, not a throwaway mock. A diff you can review, commit, or undo.

✓ Wrote src/Hero.astro
- "Welcome to Our Hotel"
+ "Where the coast forgets time"
- "Book Now"
+ "Reserve your stay"

Get started

Install
npx impeccable install
First run
/impeccable init
Update
npx impeccable update

Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness. install sets up the build for your harness. Then run /impeccable init inside your AI tool so the skill can save your design context. update pulls the latest version. Run npx impeccable check to see if you're behind. Installed the Claude Code plugin? Update it from the /plugin menu instead.

Other install methods
Claude Code plugin
/plugin marketplace add pbakaus/impeccable
Then open /plugin in Claude Code and install Impeccable from the list. Claude Code only.
npx skills
npx skills add pbakaus/impeccable
The general-purpose skills installer. For now it installs one shared build for all harnesses rather than the build compiled for yours. Prefer npx impeccable install above for the correct setup.

Read the setup guide · See what's new · Got questions?

Learn more: Getting started · Designing with Impeccable · command docs