What is Claude Design, and how do you give it your brand?

You open Claude Design at 11pm. You type "build me a settings page for a fintech dashboard." Thirty seconds later, something real renders: a live, interactive prototype. It works. It's also fine. It looks like every other B2B SaaS settings page on the internet.

That's not a Claude Design failure. It's a context failure. Claude Design can build almost anything you describe, but it can't build your brand unless you've told it what your brand is.

This post lays out what Claude Design actually is, what it knows about you by default (nothing), and how to give it the context it needs to stop producing generic shadcn and start producing your product.

What Claude Design is

Claude Design is Anthropic's visual prototyping tool, launched in January 2026. You describe an interface in natural language and it generates a live, interactive prototype. Not a mockup. Actual React code rendered in a browser canvas. You can click it, iterate on it by editing the prompt or drawing on the canvas, then export the code.

It sits in the same category as v0, Lovable, and Figma Make: AI tools that collapse the distance between idea and interface. But two things make Claude Design different from the previous generation:

1. Real code, not mockups. What you see is running React with Tailwind. You can inspect it, export it, and paste it into your codebase. No proprietary format.
2. Stateful context via Skills. Claude Design supports a concept called Skills: portable brand or technical context that applies to every generation in a workspace. This is the piece that matters if you care about what gets produced.

Under the hood it's running Claude (Sonnet or Opus, depending on your plan) composing real React and Tailwind with shadcn-style primitives. Output is clean, export-ready, and live.

What Claude Design knows about you out of the box

Nothing.

Without context, Claude Design defaults to the statistical mean of everything it was trained on. That means shadcn components, Tailwind's default palette, Inter for headings and body, slate grays, blue-600 primary buttons, generic form fields. Every generation ends up looking like it came from the same template, because statistically, it did.

This isn't a bug. It's the "helpful average" problem: without specifics, the tool gives you something that works for the most common use case. The problem is that your brand isn't the most common use case. Your brand is you. The thing that makes it recognisable is exactly the thing the average strips away.

Prompt Claude Design for "a settings page for a warm, approachable fintech brand" without any context loaded, and you get:

• Slate-100 background
• Inter headings, Inter body
• Blue-600 primary button
• A sidebar you didn't ask for
• shadcn form fields, rounded-md corners

None of that is warm. None of it is approachable. And none of it has anything to do with your brand, because you haven't told the tool what your brand is.

The fix: Claude Skills

Claude Design has a first-class mechanism for loading persistent context: Skills.

A Claude Design Skill is a small package (Markdown plus a handful of pointers to assets) that loads as context for every session in a workspace. Think of it as an onboarding document. You write it once, Claude Design reads it on every prompt, and your output stays on-brand from the first generation forward.

A good brand Skill for Claude Design contains three things:

1. Narrative. What your brand is, who it's for, what it rejects. This is your DESIGN.md, the AI-era brand guide. If you haven't read that post yet, read it first. The rest of this one assumes you have.
2. Tokens. Your colors, typography, spacing, shape, elevation, in a machine-readable format. tokens.json (W3C DTCG standard) plus tokens.css generated from it.
3. The Skill manifest. SKILL.md, a small file that tells Claude Design how to load the first two and what context they represent.

Those three files, sitting in a folder, take your brand from invisible to the tool to the default for every generation.

design-system/
  DESIGN.md       ← brand narrative, voice, principles, nevers
  SKILL.md        ← Claude Design skill manifest
  tokens.json     ← W3C DTCG tokens
  tokens.css      ← CSS variables generated from tokens.json

What changes when you load one

Same prompt, "generate a settings page for a fintech dashboard", now produces:

• Your warm accent palette, not slate-100
• Your type pairing (maybe a serif for headings because that's what your brand is)
• Your shape language (maybe rounded-2xl because you're warm, not rounded-md)
• Your copy voice in any filler text Claude Design invents
• Components themed to you, not to shadcn defaults

The quietly important part: you didn't micro-manage the prompt. You loaded a brand file once. Claude Design applied it to every generation after.

The other important part: every generation you produce from that point on pulls from the same source. Update tokens.json to shift your accent warmer tomorrow and every future prompt uses the new palette. No retraining. No prompt-rewriting. The Skill is the single place your brand lives, and it propagates everywhere.

How this compares to v0, Lovable, and the others

Claude Design is not the only tool that can generate interfaces. v0 does it, Lovable does it, Replit's build tools do it, Figma Make does it. They all converge on a similar end-state: describe a screen, get a prototype.

Where they differ is how you give them brand context:

• Claude Design uses Skills, loaded at the workspace level. Persistent across sessions.
• Cursor and Claude Code read DESIGN.md and tokens.json automatically from the project root. No explicit setup.
• v0 and Lovable use per-project context fields or in-session prompts. You paste in the files once per project, or upload them.
• ChatGPT has no durable context for this. You paste DESIGN.md at the start of each session and it gets used for that chat.

The quiet win: the same three files work for all of them. Write your DESIGN.md, SKILL.md, and tokens.json once, then hand them to whatever AI tool you're using. Claude Design today. v0 next month. Whatever launches in June. One brand format, every tool.

That portability is why we think of DESIGN.md plus tokens as the new brand guide rather than as Claude Design-specific artifacts. Claude Design is where it lands most natively right now, but the files outlive any single tool.

What you actually need to do

If you want your next Claude Design session to open with your brand already loaded, you need:

1. A DESIGN.md that describes your brand (see the previous post for the structure).
2. A tokens.json in W3C DTCG format with your colors, type, spacing, shape, and elevation.
3. A SKILL.md that wraps both into a Claude Design Skill.
4. An install step that loads the Skill into your Claude Team workspace. A one-time setup.

That last step deserves its own post (and gets one next in this series). In short: you either follow a written walkthrough and install the Skill yourself, or you invite the person who made the files into your Claude Team and they set it up. Anthropic hasn't shipped a one-click brand install flow yet, so for now it's a manual step.

If you don't have those files yet

Two paths.

Write them yourself. An afternoon gets a DESIGN.md draft. Another half-day pulls your existing brand into tokens.json. Writing SKILL.md is a 15-minute job once the first two exist. You'll iterate for a week before it feels right, but nothing about this is hard. It just takes the discipline to actually sit down and name what makes your brand your brand.

Either path, the endpoint is the same: Claude Design generating work that actually looks like your product, from the first prompt.

Where this is heading

Right now, installing a Skill is a manual step. Anthropic hasn't shipped a "Brand" settings panel in Claude Design yet. It will come, probably sooner than we think, but the exact flow isn't in the roadmap publicly.

That gap closes fast. Every AI design tool (Claude Design, Cursor, Lovable, v0) is moving toward first-class brand-context support because it's the obvious next problem to solve. The teams shipping on-brand work first are the ones who already have the brand-as-a-file figured out. The tools converge around them.

If you've been waiting for a native "Brand" settings panel in Claude Design, it's not coming in the form you're picturing. It's already here. It just looks like a folder of Markdown files sitting in a repo.

More in this series: DESIGN.md is now an open standard, where Google Labs just published the spec and Taste Profiles conform to it out of the box. And DESIGN.md: the AI-era brand guide for the foundational piece on the format itself.