Build Your Own AI Design Studio in Claude Code

Out of the box, Claude designs from its own defaults — and the result is the same slightly-off gray dashboard every time. The fix is not a better prompt. It is a small system of skills that forces Claude to pick from libraries you chose instead of improvising from memory.

This guide installs that system — a four-skill "Design Studio" that turns Claude Code from a model that guesses at UI into an agent wired to real design sources. The four skills are:

• design-studio — the launcher. Type /design-studio, it asks one question ("What do you want to create today?") and routes the rest.
• design-director — the router. Decides between grabbing a single component/animation vs running the full art-direction-then-components workflow.
• design-stack — 16 component galleries (shadcn registries, Magic UI, Aceternity, Kokonut, Origin UI, Bklit…) with verified endpoints, so Claude installs real source instead of hallucinating it.
• design-packages — your art-direction library: complete design systems (tokens, type, a full CSS system, a preview) that answer "what should this look like?" before a single component is installed.

You install all four with one command each from the ColdIQ skills repo (Step 2). Three of them work the moment they land. The fourth, design-packages, installs as an empty shell — and that is deliberate: it is where your taste and your budget live. This guide shows you the structure and points you at where to get design systems (Uiverse.io is where ours came from). It does not — and cannot — hand you anyone's paid design systems; you bring your own.

The rule that makes the whole thing work, and the reason the output stops looking like AI slop: direction before components. Pick one art direction first, then source components and restyle them into it — keeping the animation timing intact, because that is where the quality lives.