How to Give Claude a Design System (So It Stops Making Generic UIs)

Claude builds apps fast. Getting them to look good is a different story.

The default output — grey background, Inter font, rounded cards, blue primary button — is fine, functionally. Visually, it looks exactly like every other app Claude has ever built. Same as Cursor. Same as Lovable and Bolt. Every AI coding tool falls back on the same safe, forgettable aesthetic when it doesn't have anything better to go on.

The tools do exactly what they're built to do — write code. Design direction has to come from you. Without it, they improvise, and improvised design always looks improvised.

The fix is to give Claude a design system before it starts building.

Claude doesn't know what your app should look like. Without direction, it'll produce something reasonable — Tailwind defaults with a hint of shadcn. Functional. Forgettable.

Think of it like briefing a developer. You wouldn't hand a dev a spec and expect them to invent your brand from scratch. You'd give them colors, fonts, spacing rules, component guidelines. Claude works the same way. It just needs you to actually brief it.

Two files do the heavy lifting here.

A SKILL.md is what the AI reads. It has your design guidelines and specific instructions for how to apply them — not just "use this color palette" but how components should be built, what patterns to follow, and what to avoid. Drop it into your Claude project instructions and Claude builds to those specs on every component it touches.

A DESIGN.md is your project reference. Same design guidelines, but it lives in your repo and gets referenced by the AI every time it builds a new page — keeping the visual language consistent across your whole project. You can refer back to it too when you need to remember why you made a certain decision.

Both files cover the same core territory: exact hex values for colors, which fonts at what sizes, a consistent spacing scale, how buttons and cards and inputs should look, and what to avoid — just as important as what to include.

Without a skill file, ask Claude to build a settings page and you'll get something that looks like every SaaS dashboard from 2021. White content area, default form fields, a sidebar that could belong to any app.

Drop in a Glassmorphism SKILL.md first, and the same prompt produces frosted panels, blurred backgrounds, and a UI that actually has a visual identity.

The skill file does the work. Your prompt stays exactly the same.

You don't have to write a SKILL.md from scratch. Skills UI has a library of ready-made skill files for different design styles — Glassmorphism, Neobrutalism, Dark Luxury, Bento Grid, and more.