The Problem With AI-Generated UI

You ask your agent to build a settings page. You get Inter font, purple gradient, rounded cards, drop shadows. You ask for a dashboard. Same thing. Landing page. Same thing. Every screen looks like it came off the same Tailwind UI template because the model defaults to whatever it's seen most in training data. No brand. No consistency across screens. Just vibes.

Three skills fix this. Then you build your own. Then you never think about it again.

The Stack

1. UI/UX Pro Max gives your agent design taste. 60,000+ stars. 50+ UI styles, 97 colour palettes, 57 font pairings. Instead of improvising, the agent picks from curated options. This is your "what good looks like" reference.

2. Impeccable tells your agent what NOT to do. 7 reference files covering typography, colours, layout, spacing, and the anti-patterns that make AI output look like AI output. Inter font as default? Blocked. Purple gradients on everything? Blocked. Cards nested inside cards nested inside more cards? Blocked. Think of it as the linter for design.

3. Google Stitch with DESIGN.md encodes your actual design system as a markdown file your agent reads. Colour tokens, typography scale, spacing values, component specs. Every screen the agent generates uses YOUR brand, not the model's generic defaults.

That's the stack. Style library, anti-pattern guard, design system contract. You don't need anything else.

The Workflow (This Order Matters)

Most people install the skills and start prompting. That's backwards. You end up with nice-looking screens that don't cohere as a product. The order matters.

Step 1: Build your design system first. Before you generate a single component, get your tokens sorted. Colours (primary, secondary, surface, error, text). Typography (font families, size scale, weight scale, line heights). Spacing (base unit, scale). Border radius. Shadows. Write it into a DESIGN.md file. Stitch can generate one from an existing URL if you've got a reference site, or you build it from scratch.

This is the bit people skip. Don't. Every decision you don't make here is a decision the model makes for you, and it'll make it differently every time.

Step 2: Pick a design system and stick with it. Shadcn. Radix. Material. Ant. Whatever fits your project. The point is committing. If you let the agent mix component libraries across screens, you get a Frankenstein UI where the settings page uses Radix primitives and the dashboard uses Material cards and nothing feels like the same product.

Lock it in your DESIGN.md. "Components: shadcn/ui. Do not use other component libraries." The agent will follow it.

Step 3: Build a Storybook of components. Before you build pages, build your component library. Buttons, cards, inputs, modals, tables, navigation. Each one as a Storybook story with all its variants. The agent generates components against your DESIGN.md tokens, you review them in Storybook, and once they're approved they become the building blocks for everything else.

This is where consistency compounds. When the agent builds a page, it pulls from components you've already approved instead of generating new ones from scratch. The settings page and the dashboard use the same button, the same card, the same spacing. Because they're the same component, not two independently generated approximations.

Step 4: Build your own brand skill. Take your DESIGN.md, your Storybook component inventory, and your project's specific patterns (how you handle empty states, loading states, error states, navigation, responsive breakpoints) and wrap it into a custom skill with /skill-creator. Now every agent session starts with your brand loaded. No re-explaining. No drift.

Why This Order

Design tokens before components. Components before pages. Pages before features. Each layer constrains the next. If you skip straight to "build me a dashboard," the agent has no constraints and you get generic output. If you build tokens first, then components against those tokens, then pages from those components, every screen belongs to the same product.

It's the same principle as building a house. Foundation, frame, walls, paint. Nobody tiles the bathroom before the frame is up. But that's exactly what most people do with AI-generated UI. They ask for the bathroom and wonder why it doesn't match the kitchen.

The Minimal Version

If you can't be arsed with the full workflow (fair enough), at minimum:

1. Install UI/UX Pro Max and Impeccable
2. Write a DESIGN.md with your colours, fonts, and spacing
3. Drop it in your repo root

That alone gets you 80% of the way. The Storybook and brand skill are what take you from "looks decent" to "looks like a product." Worth the investment if you're building something real. Overkill if you're prototyping.