How to Use Our shadcn/ui Figma Kit as a Design System for Claude Design

Anthropic just launched Claude Design. It is a new Labs product that lets you prompt Claude to produce polished visual work — prototypes, mockups, landing pages, decks — and refine them through conversation or inline edits.

The part worth paying attention to is buried in the onboarding step:

"During onboarding, Claude builds a design system for your team by reading your codebase and design files. Every project after that uses your colors, typography, and components automatically."

That is a big deal. It means the quality of every future Claude Design output depends entirely on the Figma file and the codebase you hand it on day one.

If you are building on shadcn/ui and Tailwind CSS, our shadcn/ui kit for Figma is the fastest way to give Claude Design something it can actually work with.

What Claude Design ingests during onboarding

Per the announcement, Claude Design has three ingestion paths:

• A Figma file (components, variables, typography, layout)
• A codebase (colors, tokens, component names, import patterns)
• Uploaded references (docs, images, existing screens)

It then builds a team-wide design system. Every prototype, wireframe, pitch deck, or marketing page made inside Claude Design after that step uses that system automatically. You can refine it later, but the initial read sets the tone for everything.

The clearer the inputs, the more consistent the outputs. And clarity, in a design file, is not about how pretty the layers look — it is about whether the structure underneath is real.

Why most Figma files fail this step

Most files were not built to be machine-read. They were built to move fast.

Common problems we see when teams try to feed their existing files into an AI system:

• Color styles instead of Variables — so light and dark modes do not swap cleanly
• Half-detached component instances from three different designers
• Typography done with loose text layers, not tokens
• Component names like "Card v2 (final)" that do not match anything in the codebase
• No radius, spacing, or shadow tokens at all

When Claude Design reads that kind of file, it still produces something. It just produces something generic. The brand does not carry. The components in the generated prototype will not match what your engineers actually have installed. You end up with a design system that is "inspired by" your product instead of being your product.

We wrote more about why AI in Figma depends more on structure than prompts — the same logic applies here.

What a Claude-Design-ready Figma file looks like

A file that onboards cleanly needs a few non-negotiable things:

• Figma Variables, not styles — colors, spacing, radius, typography all bound to variables
• A Mode collection with at least light and dark mapped to the same variable names
• Component names that match the codebase — Button, Card, Dialog, not btn-primary
• Auto-layout everywhere so spacing is legible and editable
• Slots or exposed nested instances so editable regions are obvious
• A typography system built from tokens, not one-off text styles
• A radius and shadow scale that mirrors the Tailwind CSS theme

If you are starting from scratch, building all of this yourself is a multi-week project. That is what our Figma kit is for.

Use the shadcn/ui Figma kit as the source

Three things make our kit a natural fit for Claude Design onboarding:

Components that mirror shadcn/ui 1:1

The kit ships with 2,000+ components and variants. Every component matches a real shadcn/ui React component — same name, same states, same props-to-variants mapping. When Claude Design reads the Figma file and the codebase side by side, it does not have to guess which Figma layer becomes which import. The mapping is already there. See the full list on the components page.

A complete Variables setup

Our kit uses three Figma Variable collections that mirror Tailwind CSS v4:

• Tailwind CSS — spacing, sizing, radius, opacity, line-height
• Theme — shadcn/ui color variables, font families, shadows, breakpoints
• Mode — light and dark color modes on the same token names

This is the structure Claude Design needs to reproduce your brand consistently across every future project. Full breakdown in the variables documentation.

Pro Blocks for whole-page starting points

Individual components get you atoms. Pro Blocks give Claude Design whole sections it can recombine — hero sections, pricing tables, feature grids, dashboards. So when someone on your team prompts "make a pricing page," the output is built from blocks that already match your production code, not generic filler.

Step-by-step: onboard Claude Design with the kit

Here is the workflow we use:

1. Duplicate the shadcn/ui kit for Figma into your team workspace. If you already own it, you have this file.
2. (Optional) Apply your brand tokens. Open the Mode and Theme collections and swap the primary, background, and accent values to match your brand. The rest of the system adapts because every component references those variables. If you want to go deeper, the variables docs explain which variables matter and which are internal.
3. Connect a shadcn/ui codebase. A fresh npx shadcn@latest init project works. An existing one works better. Make sure your globals.css exposes the same tokens the Figma file uses — or use our Figma plugin and Agent Skills to sync variables both directions so the two sides match exactly.
4. Start Claude Design onboarding and point it at the Figma file URL plus the repo. Claude will read the Variables, components, typography, and code tokens and generate a system document you can review.
5. Verify the output. Check that the generated system lists the correct primary color, the correct font, and shadcn/ui component names (not generic ones like "PrimaryButton"). If anything looks off, fix it at the source — in the Figma file or the codebase — and re-run onboarding. Do not paper over it in the Claude Design system editor.

That is the whole setup. The design system generation itself takes minutes on Claude's side. The value comes from the fact that your Figma file and your code already agreed with each other before Claude looked at them.

Prototype faster after onboarding

Once onboarding is done, every Claude Design project inherits the system. That unlocks a few specific workflows:

• Realistic prototypes. PMs and founders can describe a flow in plain language and get an interactive prototype using your actual components. Not filler buttons — your buttons, your radius, your colors.
• Wireframes for engineers. Sketch a feature in Claude Design, hand it to Claude Code, and the generated React code already speaks shadcn/ui because the system it was designed against is shadcn/ui.
• Marketing assets. Landing pages and campaign visuals ship on-brand by default, which matters when non-designers are producing collateral.
• Design explorations. Designers can run a dozen directions in an afternoon without rebuilding the component library each time.

The common thread: the prototype is not a disposable demo. It is a starting point an engineer can pick up in Claude Code without rewriting half of it.

Keep design and code in sync over time

The biggest failure mode for AI design workflows is drift. Design evolves, code evolves, they stop agreeing, and the AI output slowly gets worse without anyone noticing.

Our stack addresses this in two places:

• The Figma plugin can export Figma Variables to Tailwind v4 CSS tokens and import them back. So when design changes a token, the code picks it up on the next sync.
• Agent Skills encode the full design-to-code pipeline as structured instructions your AI agent follows. We wrote about this in detail in Agent Skills: Turn Figma Designs into shadcn/ui Code with AI.

Between those two pieces, the Figma file and the codebase stay in lockstep. Which means Claude Design's onboarding stays accurate for longer than one sprint.

Get started

If your team is rolling out Claude Design this week, the single highest-leverage thing you can do is start from a Figma file that is already structured to be read.

• Grab the shadcn/ui kit for Figma
• Review the variables system so you understand what Claude Design will pick up
• Pick a plan on the pricing page — the Premium package includes the plugin and Agent Skills for the full sync loop

Claude Design is only as good as the design system you give it. Give it a real one.