Unlimited 1:1 consulting on the Scale plan*
Claude Code x Design

Build Your Own AI Design Agent in Claude Code

Claude doesn't build gray dashboards because it's a weak model. It builds them because nobody told it what to look at. Three skills fix that — 44 art directions, 16 component galleries, and 1,600+ components it can actually reach.

6 steps · ~20 minClaude Code · shadcn registries · Context7 MCP · llms.txt
What you will build

AI slop was never a model problem. It is a context problem.

Ask any model for a dashboard and you get the same page: gray-100 background, white cards, default recharts purple, an emoji in the title, a blue Submit button. Not because the model can't do better — because you gave it nothing to look at, so it fell back to the statistical average of every tutorial screenshot ever written.

Fix the context once, and everything you build after that looks designed. The fix is three skills that sit between you and the model:

  • The design manager (design-packages) — what it should look like. 44 complete art directions, stored locally.
  • The sourcer (design-stack) — where the building blocks come from. 16 galleries, every endpoint verified.
  • The director (design-director) — which of the two runs first, and whether either should run at all.

One rule holds the whole system together: direction before components. Install components first and the page is anchored to their default palette; you then restyle everything twice. The director exists mostly to enforce that order.

There is an optional fourth — a launcher — in Step 06. It is a front door, not a brain. Every number on this page was re-checked on 17 September 2026, and the component count is broken down gallery by gallery in Step 03: no headline figure you can't reproduce with curl.

Prerequisites

What you need before you start

01 · Claude Code installed

npm i -g @anthropic-ai/claude-code

02 · A shadcn or Tailwind project

No components.json yet? Run: printf '\n' | npx shadcn@latest init -y -b radix

03 · The shadcn and Context7 MCP servers

claude mcp add shadcn -- npx shadcn@latest mcp — then: claude mcp add context7 -- npx -y @upstash/context7-mcp. You no longer need to bring your own design systems: Step 02 hands you 44.

Unlock the full guide

Enter your email to read the rest of the tutorial.

Copy-paste code. Any email works. Unlocks in your browser, so you only do this once.

Protected by Turnstile. No spam - one email per guide and you can unsubscribe any time.

Step 01

Understand the three-skill architecture

The director asks one question — does a visual direction already exist for this surface? If no, the design manager picks a direction and ports its tokens, then the sourcer installs real components into it. If yes, the sourcer runs alone and matches what is already there. That last row of the table matters more than it looks: a skill that will not run is worth as much as one that will. A brand guard that loses to a generic art direction is how you ship an off-brand page.

Step 02

The design manager — 44 art directions

Each direction is a complete design system, not a component pack. The reasoning inside DESIGN.md is the part that matters: tokens alone give you colors, but the spec tells the model why the type is paired that way — and that is what survives being ported into your stack. The workflow: browse INDEX.md (one line per direction), shortlist 2-3 contrasting ones against the brief's tone, read their DESIGN.md, open the preview, then port the tokens while keeping proportions, type pairings and motion constants intact.

Unlock above to read the full guide
Want us to build agents like this for you?

Want us to build agents like this for you?

This is one system, built in a working session. The same method — find where the model's context is empty, fill it with something verified, then force the checklist — applies to sales research, reporting, and every internal process where the output is "fine, but generic". ColdIQ builds that for B2B teams every day.

Talk to us

Your GTM stack. One API key.

Stop managing 39 tools. Start shipping GTM from code.

Get StartedOr try the playground first

Free to start. No credit card required.