The Preflight Gate That Stops Generic AI UI

Every developer who has used Claude Code to build a UI has seen the same output: a hero section that looks like it came from a 2022 Tailwind UI demo, three slightly different blues across the same page, forms with no visual hierarchy, and empty states that just say "No data."

The problem isn't the model. The problem is that the model has no context. It doesn't know your brand. It doesn't know your anti-references. It doesn't know whether this surface should feel dense or airy, loud or restrained. It fills the vacuum with the most statistically common design decisions it has seen. You get generic output because you gave it generic input.

We built /impeccable to fix this at the source.

What the Skill Does

/impeccable is a Claude Code skill with a four-command workflow: teach, shape, craft, and critique. Each command has one job. None of them are optional.

$impeccable teach generates a PRODUCT.md file from your project. It pulls out your users, your brand voice, your anti-references (what you explicitly don't want to look like), and your strategic principles. This is the context file the skill loads before it makes any design decision.

$impeccable shape produces a confirmed design brief for the specific surface you're building. You read it. You approve it. The skill will not write code until you sign off on the brief. That's not a feature, it's a hard block.

$impeccable craft implements against the confirmed brief. It runs with your dev server up and iterates against what's actually rendering in the browser, not a mental model of what might render.

$impeccable critique audits the finished surface against the brief. It flags alignment drift, anti-patterns, accessibility problems, and motion that feels like it came from a component library starter kit.

The Preflight Gate

The part that actually changes the output quality is the preflight gate inside craft. Before any file gets edited, the skill checks five gates:

1. Has a PRODUCT.md been loaded?
2. Has a DESIGN.md system been provided?
3. Has the command (what to build) been clearly stated?
4. Has the shape brief been approved?
5. If the task involves visual reference or motion, has an image or description been provided?

If any gate fails, the skill surfaces the gap and stops. No code ships. This is non-negotiable in the skill definition.

This is the entire reason the output doesn't look generic. Generic output comes from a vacuum. The gates ensure there is no vacuum.

Why a Skill File Instead of a Prompt

A Claude Code skill is a SKILL.md file that Claude Code loads as persistent context. You install it once, and $impeccable becomes a slash command in every session. You don't have to paste instructions on every call. You don't have to remember the workflow. The preflight logic runs the same way every time.

We ship /impeccable with two template files: PRODUCT.md and an optional DESIGN.md cheat sheet covering color, typography, elevation, and component conventions. You fill them out once per project. Every craft run after that has full context from the first token.

The Install Paths

The skill works with Claude Code, Codex, Junie, Mux, and Kiro. Three install paths: the Claude Code one-line plugin install, a direct git clone into ~/.claude/skills/, or a drop-in into .agents/skills/ for other harnesses.

We give it away free. The /ai/impeccable page on our site has the lead form. You get the skill file, the templates, and the install instructions in your inbox.

What It Solves in Practice

The before and after comes down to one shift: you have a confirmed design brief before any pixel ships. Not a vague description of what you want. A document you read, amended if needed, and approved. The craft command is implementing that document, not interpreting a three-word prompt.

Forms stop having no hierarchy because the brief specifies hierarchy. Cards stop breaking on mobile because the brief specifies the grid. The color system stops drifting because the brief names the tokens.

The skill doesn't make decisions for you. It makes sure you've made the decisions before the code starts. That's the whole thing.