Claude won't guess your brand - here's how to give him your design system and your voice (2026)
"Make it modern and premium" is generic. The real leverage is to give Claude your real system: tokens via MCP, voice by example, and a CLAUDE.md that serves as a contract. A practitioner's guide.
Claude won't guess your brand
The scene is repeated with almost all my customers who are just starting out with AI. They open Claude, write "make me a modern, premium homepage for my brand", and receive something... correct. Clean, competent, and completely interchangeable with what ten thousand other companies would get with the same prompt. The problem isn't Claude. The problem is that he's been asked to guess a brand he's never been given.
This is exactly the shift I've described elsewhere between prompt engineering and context engineering: in 2026, the quality of what AI produces depends less on the formula of the prompt than on the context it's given. And a brand can't be summed up in three adjectives. It's a system of tokens, a voice with its tics and prohibitions, and a set of constraints. Giving Claude these three things, correctly, turns a generic generator into a collaborator who sounds just like you. Here's how I do it.
Three things to give, through three different channels
The most common mistake is to dump everything into one giant prompt. In reality, the three components of a brand are transmitted through distinct channels, and each has its own proper method.
| What you give | The right channel | The trap to avoid |
|---|---|---|
| Design system (colors, spacing, components) | real tokens via MCP / Code Connect | describe "corporate blue" instead of supplying tokens |
| Brand voice (tone, vocabulary) | concrete few-shot examples | stack adjectives ("warm, expert") |
| Constraints (conventions, prohibitions) | a permanent CLAUDE.md file | repeat them in every conversation |
The common thread among the three: show, don't tell. An adjective is an interpretation; a token, example or rule is data. AI works infinitely better with data than with impressions.
The design system: give the real tokens, not their description
This is the channel that made the most progress in 2025. Instead of explaining your palette to Claude, you give him access to your real system. Figma's MCP server, now in general availability, allows Claude to directly read the structure of a model: components, variables, spacing. Coupled with Code Connect, which maps each Figma component to its coded equivalent, Claude no longer generates an approximate button - he uses your Button component, with its real variants.
But all this rests on a prerequisite that I hammer home with every mandate: the quality of AI generation is capped by the quality of your tokenization. If your colors are called blue-2 and blue-final-v3, no agent will guess which is your action color. If they're called color/action/primary, he'll find it - and so will a human. Giving Claude his design system begins, paradoxically, by putting his design system in order. A clean semantic naming convention is no longer a designer's fancy: it's what makes your system machine-readable.
Brand voice: show it, don't describe it
This is where most attempts fail. You write to Claude "our tone is professional but accessible, warm but expert" - and you get a lukewarm mush, because these words mean everything and nothing. Voice can't be described, it has to be demonstrated. My method is the few-shot: I give three to five pieces of real text that the team deems excellent, representative of the brand, and I ask Claude to write in the same register. The model captures what no adjective can convey - the length of the sentences, the level of familiarity, the use of humor, the rhythm.
I accompany these examples with a short voice document structured not in qualifiers, but in observable rules: formulations we use, those we ban, before/after pairs. "We never write 'innovative solutions', we say what the product does. "We're on first-name terms. "We avoid corporate jargon: no 'synergy', no 'levers'. These prohibitions are often more useful than permissions, because they eliminate the generic reflexes of the model. The final test is simple: I have three variants generated and ask someone on the team "does this sound like us?". If the answer is hesitant, the voice context has not yet been nurtured enough.
CLAUDE.md: the permanent contract
The highest productivity lever, and the most neglected, is the permanent context file. With Claude Code, as with any structured project, a CLAUDE.md file at the root is automatically read at each conversation. This is the brief you'll never rewrite. In it, I encode technical conventions, tone, token names and prohibitions - everything that should be true every generation.
# CLAUDE.md - Brand & conventions
## Voice
- Tutoiement. Short sentences. No corporate jargon.
- Ban: "innovative solutions", "synergy", "levers".
- Reference examples: see /brand/voice-samples.md
## Design system
- Tokens in tokens.json (DTCG format). Never hard-code a color.
- Action color: color/action/primary
- Components: use those in /components, never reinvent the wheel.
## Technique
- Server Components by default; use client for interactive use only
- Validate inputs with Zod
```
This file prevents drift: without it, each new session starts from scratch and reintroduces generic elements. With Zod, the brand is an asset of the project, not an instruction that we hope the AI will respect.
## Industrialize: skills, agents and versioning
Once these three channels are in place, the next step is to package them so that they can be reused without copying and pasting. This is the role of skills and agent configurations: we encapsulate the design system, voice and constraints in a module that Claude loads when the context calls for it. On my own projects, this is exactly what I do - a skill that carries the brand guidelines is activated as soon as it's time to produce content, without me having to re-explain anything.
:::callout{type="note" title="Version your brand context"}
Treat your brand context like code: version it. The CLAUDE.md, the voice samples, the exported tokens live in a Git repository, evolve with the brand, and are revised as a team. A brand given to AI isn't a fixed document that you write once - it's a living asset that improves as you observe what the model produces.
:::
## The real challenge: escaping uniformity
If you give Claude just one vibe, he'll give you the statistical average of the web - exactly what makes so many brands interchangeable in 2026. Similarity has become the most expensive strategy, and malnourished AI accelerates it. Conversely, a model fed with your real system - your tokens, your demonstrated voice, your explicit constraints - produces something that resembles you, because it works from you, not from an approximation of you.
There's one last truth I always remind people of: giving Claude your mark doesn't mean you don't have to run it. The model executes the system you provide him with remarkable fidelity, but he won't decide for you what your mark should become. The judgment, the vision, the "no, not like that" - that's your job. AI is not the author of your brand. It is, when you feed it well, the fastest and most consistent megaphone you've ever had.Your design system now talks to an AI: what's really changing in Figma in 2026
In 2026, a design system is no longer a library of components: it's the layer that AI reads to understand your product. What Figma really delivered in 2025, and how to build without a gas factory.
Prompt engineering for design is already outdated - make way for context engineering
Fine-tuning the wording of a prompt in 2023. In 2026, AI-assisted design is all about context: system prompt, few-shot, MCP and tool use. A practitioner's guide.
From Figma to React component in 5 steps - and half the glue from before is no longer needed
The token→component pipeline that everyone copies is half out of date. Since Tailwind v4 and the Design Tokens stable spec, here are the 5 steps that really matter when moving from Figma to React.