Set up your design system in Claude
Ask Claude for a deck or a page and you get something capable, but generic. Wrong colours, wrong type, a look that is not yours. In 45 minutes I walk you through Claude Design, the official flow, so Claude reads your brand once, builds your design system, and produces every output on brand.
Bring your own brand, or borrow mine to follow along. You leave with a published design system in Claude.
What you will learn today
- What Claude Design is, and why a design system beats a better prompt every time
- The assets to upload so Claude can read your brand and build the system
- The official flow, live in claude.ai/design, from organisation to published system
- How to review, validate, and publish so every project comes out on brand
- Why your design system is a context layer, the foundation every agent sits on
What Claude Design is
Claude Design lets you create designs, prototypes, and presentations by having a conversation with Claude. It is available on Pro, Max, Team, and Enterprise, at claude.ai/design or in the Claude Desktop sidebar.
Chat on the left, canvas on the right
You describe what you want in plain language, and Claude designs it live on the canvas. Designs, interactive prototypes, presentations, and marketing pieces, all from a conversation.
It reads your brand
Point it at your codebase and design files, and Claude builds a design system for your team: your colours, your type, your components, applied automatically to every project.
It exports anywhere
Hand off as HTML, PDF, or PPTX, or send it straight to Canva. Prototypes hand off to Claude Code. Your work leaves in the format you actually need.
Who I am
Grace Man
Founder, AI Strategy League
- 1
Creative Director
Hyundai
- 2
Digital Marketing Manager
Pfizer
- 3
Marketing for M365, Surface, and Xbox
Microsoft
- 4
AI Adoption Lead and Data Analyst
Canon
- 5
Founder, agentic AI for marketing, growth, and CRM
AI Strategy League
You do not design the system. You give Claude your brand, and it builds it.
A design system in Claude is not one good prompt, and it is not a screenshot you paste in. You upload the assets that define your brand, Claude reads them and builds the system, and you publish it. Set it up once, and it quietly powers everything you produce after.
“A prompt fades with the chat. A published system persists, and every new project starts from it. That is the difference between fixing the design every time and never fixing it again.”
What you upload, and what Claude builds from it
You bring the assets. Claude reads them and builds one system: your palette, your type, your components, your layout. Then it produces on brand, for every format. Here is the whole shape before we build it.
Upload once. Claude extracts your palette, type, components, and layout, and every project after inherits them.
Your codebase or live site
Link or upload the repository and Claude reads the components and styles directly, the system as it already runs in real code.
In practice. For me this is the asl-website repo. It is the most accurate source, because it is the brand actually built, not just described.
A branded deck or document
A PowerPoint or PDF that reflects your brand. Claude reads the layout, colour, and type you already use.
In practice. One real deck teaches Claude more about your taste than a page of rules. Give it your best existing example.
Logos and palette
Your logos in full colour, black, and transparent, plus your colours as a palette Claude can extract.
In practice. Mine is Butterfly Dusk: a Notion-white canvas with Dusk Periwinkle as the single accent, teal and mauve only as rare decoration. The one locked rule is no pink.
Typography
Your typeface and the weights you use, so Claude sets type deliberately instead of guessing.
In practice. Noto Serif for display headings and Roboto for body, sentence case. Name the fonts first; upload the files only if it asks.
Screenshots and design files
Prototypes, web flows, and existing design files. Anything that shows the look you are aiming for.
In practice. Use the web capture tool to pull elements from a site you like, or drop in screenshots of your own product.
The brand guide, as the source of truth
One written document that holds the whole system, and a link to it running in code. This is the same principle you use to build any agent. You give Claude memory and context so it understands you and produces work that looks like you. A design system is that same context, for how your work looks.
In practice. Keep the brand guide as the one canonical doc. Change the brand there first, then let everything else follow. The more real context you give Claude at setup, the more every output comes back on brand, the same way context makes an agent sound like you.
We set it up together, live in Claude
This is the flow straight from the Claude Design docs. Open claude.ai/design and follow along. Six steps, in order, from creating your organisation to a published system on your own account.
- 01
Open Claude Design and switch to your organisation
Open Claude Design at claude.ai/design, or from the Claude Desktop sidebar. In the lower-left corner of the project picker, click the current organisation name, then select your organisation or create a new one and run the onboarding. This matters because design systems live at the organisation level, so everything you set here applies to every project your organisation creates. About 2 minutes.
- 02
Upload the assets that define your brand
Link or upload your codebase or live site, then add a branded deck or PDF, your logos, your palette, and your typography. This is where your kit comes in: for me it is the asl-website repo, the Butterfly Dusk palette, Noto Serif and Roboto, and the logos. You can also use /design-sync to attach a system, or the web capture tool to pull elements from a site. The more real your assets, the more the system sounds like you. About 5 minutes.
- 03
Let Claude read them and build the system
Claude reads your files and generates the design system for you: your colour palette with primary, secondary, and accent, your typography with families, sizes, and weights, your components like buttons, cards, and navigation, and your layout patterns for spacing and grids. The shift to notice here is that you are reviewing what Claude built from your brand, not defining every token by hand. About 3 minutes.
- 04
Review and validate it
Create a couple of test projects with sample prompts, a slide and a landing page section, and check they come back in your colours, your type, and your components. This is the step that catches anything off before it spreads. Refine as you go with chat for broad changes, inline comments for targeted edits, direct canvas edits, and the adjustment sliders. About 4 minutes.
- 05
Publish it so every project uses it
Turn the Published toggle on. Once it is on, every project created from the Claude Design home screen while you are in your organisation uses your design system automatically. This is the moment being on brand becomes the default instead of something you fix each time, and it is why the setup pays for itself immediately. About 2 minutes.
- 06
Remix and export over time
To evolve the whole system, open it from your organisation settings and click Remix to change it by chat, so the brand stays one source of truth as it grows. Then ship: export any design as HTML, PDF, or PPTX, send it to Canva, or hand a prototype off to Claude Code. Set the system up once, and it keeps producing on brand for everything you make after. About 4 minutes.
The official steps are documented at support.claude.com. Set it up once, and it holds for everything you make after.
Your design system is context, and context is the foundation
This is the layer everything else sits on. A design system is context for how your work looks, the same way a voice file is context for how your writing sounds. Claude reads it before every deck, page, or post, so the work comes back looking like you without you fixing it each time.
That is your design system. Set it up once, and every deck, page, and agent you build on top stays on brand.
Context is the most important layer in any agentic AI workflow. Get it right once, and everything you build on top inherits it. Skip it, and you get generic AI that you spend hours editing back into shape.
“Before you produce a single deck, you set up your design system. That is the foundation everything else sits on.”
What we covered, and what you walk away with
The whole session on one screen. This is what you take with you.
- 01
What it is
Claude Design: chat on the left, canvas on the right. You describe what you want, Claude designs it, and it exports to HTML, PDF, PPTX, or Canva.
- 02
What you upload
The assets that define your brand: your codebase or live site, a branded deck, logos, palette, and type. The real context Claude reads to learn your look.
- 03
What Claude builds
Your palette, typography, components, and layout patterns, generated from your assets. You review what it built, rather than defining every token by hand.
- 04
Publish and remix
Turn Published on so every project in your organisation uses it, then remix over time. Set it up once, ship on brand forever.
“Set it up once. Ship on brand forever. That is a system, not a style.”
The session is the setup. The workshop is the build.
Your design system is the foundation every agent sits on. When you want to build the growth agents that run on top of it, live and no code, the workshop is where we do it together. Scan to enrol, and your code LS06 is applied for you.
Master Growth Agents · code LS06 applied
Scan the code or open the link, and your session code LS06 is applied for you. Three hours live, no code, and you leave with agents running on your own account.
maven.com/grace-man/master-growth-agents
Grace Man
I run this exact design system across everything AI Strategy League produces, decks, landing pages, social, and documents, all from one palette, one type system, and one set of components. Before this I drove growth and marketing at Microsoft, Canon, and Pfizer, influencing more than $2B in revenue, and I have trained and coached over 3,000 professionals in AI-first product growth, with learners from Google, Microsoft, and Meta.