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. 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. 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 and Impeccable
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.
SOCIAL SHARE CARD GENERATOR