Claude design system: how it actually works now

Almost everything ranking for "claude design system" was written in the week Claude Design launched, and the product has moved since.

Quick answer: a design system in Claude is an artifact with four parts (an overview, tokens, components and usage notes) that Claude reads before it builds a deck, design or prototype. There are three ways to create one: from a chat, from your repo with /design-sync in Claude Code, or by moving one over from standalone Claude Design, which closes on 14 December 2026. Design systems are in beta on Pro, Max, Ultra, Team and Enterprise, and are not available on Free, even though Claude Design itself is.

Google's AI Overview for this query is already behind. It describes the feature accurately as something that "allows you to extract and enforce brand styles, colors, typography, and components across generated prototypes, slide decks, and mockups", then lists the plans as "Pro, Max, Team, and Enterprise". Ultra is missing, the Free-plan exclusion is missing, and its setup steps point at the standalone site that Anthropic is closing. It also cites a commercial catalog page for the structure of a Claude design system, which Anthropic documents itself in two places.

What is a design system in Claude?

Anthropic's own definition, from the help center article updated this week: "A design system captures your colors, typography, components, and layout patterns, so Claude applies them to every new design and deck. Claude extracts them from the assets you provide, like codebases, slide decks, or other design references."

Per the Claude Academy tutorial, the page you end up with has four parts:

• Overview, the brand described in prose plus the few rules that apply to everything
• Tokens, colors, type and spacing values, per theme
• Components, each with its variants, sizes and a live preview
• Usage notes, one per color, type style or component, saying how to use it and when not to

The usage note is the part most guides skip and it is the part that changes behaviour. The tutorial is explicit about the difference between correcting Claude in a chat and writing a note: "Asking again changes only the design you're working on. A usage note also applies to what Claude makes later." The examples it gives are one line each, like "Ghost is for toolbars" or "never on body text".

The files behind the page

This is the detail nothing on the first page of results mentions, and it matters if you have ever written a DESIGN.md. Anthropic's tutorial documents what a Claude design system is underneath, and it is a package of markdown files:

File	What it holds
README.md	The overview. "Always read first. It ends in an index of everything below, one line each."
api/tokens.md	Every token with its value per theme and its usage note
api/components/Button.md	One per component: variants, sizes, how to use it, the first sentence of its usage note
api/icons.md, api/assets/Logos.md	One per asset group: names, file references, the group's note
tokens.json, components/bundle.js	"The versions tools read. Claude Slides loads the first and Claude Design loads both"

Two things follow from that table. First, the reading strategy is lazy on purpose: "For each request, Claude reads the overview first, then only the parts of your design system that the task needs." That is why the tutorial tells you to keep the overview short, because "Claude reads the whole overview every time it uses your design system."

Second, Anthropic independently arrived at the shape the DESIGN.md convention already uses. A short always-read overview that indexes a set of narrow files, each carrying values plus the rules for using them, is the same structure, with a different filename. If you have been writing design context for agents by hand, you already know this format.

You do not edit those files directly. The tutorial notes that "the files under api/ are rebuilt from what's on the page each time it saves."

Which plans have it?

Two Anthropic pages give two different lists, and both are correct because they describe different things.

• Claude Design, the product, is "available on Free, Pro, Max, Ultra, Team, and Enterprise plans", per the migration article.
• Design systems, the feature, are "in beta on Pro, Max, Ultra, Team, and Enterprise plans" and, in the tutorial's words, "aren't available on the Free plan."

On Pro, Max, Ultra and Team they are on by default. On Enterprise they are off until an owner turns them on in Organization settings, Artifacts. That last point is the single most common reason the menu item is missing.

Note the drift from the launch post of 17 April 2026, which described Claude Design as powered by Claude Opus 4.7 and "available in research preview for Claude Pro, Max, Team, and Enterprise subscribers". Research preview became beta, Ultra appeared, and Free gained the product but not the feature.

How do you create one?

Three routes, and the right one depends on where your design system currently lives.

1. From a chat, for brand systems

Open the + menu in any conversation, choose Design system, then New design system, then Using Claude. You get an empty design system page beside a new conversation, and you fill it by uploading brand files, pulling from connected tools, or describing the brand.

The help center says this route "works best for brand design systems with fonts, colors, and guidelines." The source material can be a codebase, a slide deck, brand guideline assets, or a single well-designed PDF. Anthropic's advice is to "include real examples, not just specs", because "a finished landing page or marketing site tells Claude more about your brand's feel than a color palette alone."

One trap worth knowing before you start: if you name a font on the page but never upload the file, Claude substitutes it. The tutorial's troubleshooting table is blunt about it, under "Your fonts were replaced by other fonts": "Claude can't use a font that is named on the page but has no file."

2. From Claude Code with /design-sync, for systems in code

If your design system already exists as React components, the help center's instruction is one line: "run /design-sync in Claude Code. It reads your tokens and components directly, and works best for product design systems in code."

That command does considerably more than read. The most detailed public account is Nitay Neeman's walkthrough from 28 September 2026, which syncs a shadcn/ui, Tailwind v4 and Storybook project step by step. What /design-sync uploads is a mirror: "a compiled version of the library: a single bundle with every component, plus the stylesheet, the fonts and a copy of React, so the components can run on their own." Each component also gets its types, a standalone preview page and a generated usage guide, and the whole thing carries a README with your own rules. Configuration lives in a .design-sync/ folder in the repo.

Before uploading, the sync grades its own work. It opens each preview in a real browser, screenshots it, and looks for previews that render blank, are nearly empty, or show variants that all look the same. If the repo has Storybook, the check gets much stronger, because the stories become both the previews and the reference, so Claude compares each preview against its matching story side by side and fixes what it can.

✅ Worth doing before your first sync:

• An entry file that exports every component with its type definitions, because that is how the sync discovers them
• A compiled stylesheet, with layout utilities safelisted if you are on Tailwind v4
• Font files listed in extraFonts, not just named
• Storybook stories for anything whose correct rendering is not obvious
• A conventions file, so the mirror's README carries your rules and not just your values

❌ What it is not:

• Not a live link. The mirror is a snapshot. Change a component in code and nothing happens in Claude until you run /design-sync again.
• Not self-cleaning. "A component we delete from the library may stay in the mirror", so check the file list after removing one.
• Not two-way. The sync runs code to Claude only. Getting a finished design back into code is the separate /design command in Claude Code.

3. Move one over from standalone Claude Design

If your team built a design system at claude.ai/design when that was the only option, it is not in the new menu until you move it, and it carries a Standalone tag until you do.

The deadline is fixed and Anthropic states it plainly: "The standalone Claude Design site (claude.ai/design) will close on December 14, 2026", and "After that, it's read-only, and you can't start new projects there."

Three things in that article that will cost you work if you miss them:

1. One move takes everything. "One move brings over every design system in your organization, including other people's, so it only needs to be started once." Anyone with Claude Design access can start it, not just owners.
2. Starter themes do not move. "Empty design systems aren't moved, and neither are ones made from a built-in starter theme, even if you've edited them." If you began from a built-in theme and customised it, that work has to be redone.
3. Editing the old copy after a move is wasted. Moved design systems "become read-only for everyone in the standalone version as soon as Move to Claude is available to your organization", and any edits made there in the meantime did not come across.

There is also a retention gotcha that is easy to walk into, quoted verbatim because the wording is the whole point: "If your organization has a retention period that covers artifacts, a design system you moved can be permanently deleted if nobody opens it for that period. Opening a design or deck that uses the design system doesn't count as opening it."

What the top-ranking guides get wrong

Measured against the two Anthropic pages above, as of 5 November 2026:

• "Go to claude.ai/design." It still works, and it closes on 14 December 2026. New design systems belong in Claude, as artifacts.
• "Available on Pro, Max, Team and Enterprise." Ultra is now listed, and design systems are excluded from Free while the product is not.
• "Research preview." Design systems are described as beta.
• "Claude builds your design system during onboarding." That was the standalone onboarding flow. In Claude you create one deliberately, from the + menu or Settings, and /design-sync did not exist at launch.
• "It's in your account settings." It is an artifact. "Each design system becomes an artifact Claude can use in any chat, including in Claude Code", which is also why artifact retention policies apply to it.

One accessibility limit, in case it is a requirement rather than a detail: "Live component previews in a design system can't be reached with Tab, so they can't be operated from the keyboard." Component names and notes can still be read.

What people actually hit

The r/ClaudeDesign community is at 40.8K+ followers and the recurring complaints are consistent with the documentation above, not with the marketing.

The generation-quality ceiling is real. In Used Claude's design system… this is getting out of hands the poster reports the upside, that they "tried using Anthropic's Claude to build a UI kit for my app… wasn't expecting much tbh. but it literally designed a full UI system colors," which is the half of the experience that gets screenshotted.

The other half shows up when a real system already exists. In Asking claude about design system needs on r/DesignSystems, the poster has "been asking Claude to help me structure a design system for our developers to leverage. I'm getting some OK information, but also a lot of" the rest, which is the generic-defaults problem the feature exists to solve, encountered by somebody who had not set the feature up.

Fidelity to an existing design is the third pattern. In Trying (Failing) to Shift a Website on Designed on Figma the poster is explicit: "I don't want to tweak a Claude website because it does not match my design style and I want it exactly how I have made it on Figma." That is the gap a design system closes and a prompt does not.

And the workaround people reach for without one, from Designers who have figured out prompting Claude Code on r/ClaudeAI, is exactly the manual version of the feature: "Giving claude examples of the CSS you're after is a great idea. I give it examples of screens with things I like and tell it to create a style". Nitay Neeman's walkthrough was also submitted to Hacker News, which is the level of public discussion /design-sync currently has.

The workflow

The honest summary is that Claude's design system feature solves the problem well if you already have a design system. /design-sync needs a component library with types. The chat route needs real brand artifacts, not a wish. Neither one invents a coherent visual language for you, and the launch post is careful about this too: the strongest customer claim in it is Brilliant's, that pages "which took 20+ prompts to recreate in other tools, only required 2 prompts in Claude Design", which is a speed claim about getting to a known target.

So the input is the work. A reviewed DESIGN.md is the cheapest version of that input: one file of tokens and rules, portable to Claude, Claude Code, Cursor, v0 and Lovable, and already in the shape Claude's own package uses.

• Browse 312 reviewed systems in the duply library
• Start from the Claude entry, or Cursor and Linear
• New to the format: what is a DESIGN.md file
• The general method: give your AI agent a design system

Paste it into the overview and tokens of a new design system, add usage notes for the two or three things Claude keeps getting wrong, and you have a working system in an afternoon instead of a quarter.

FAQ

Is there a Claude design system on GitHub?

Not an official one. Anthropic does not publish its design system as a repository. What ranks on that query is VoltAgent/awesome-claude-design, whose repository root holds only a README and a licence, with its 68 listed entries being links out to a commercial catalog. The sibling repo VoltAgent/awesome-design-md does hold real DESIGN.md files, including one describing Claude's own look.

Can I download a Claude design system?

You can download a DESIGN.md describing Claude's visual language from a community repo or a catalog entry page, and paste it into a design system in Claude. You cannot download Anthropic's internal design system, and you cannot export a synced mirror back out of Claude, because /design-sync is one-way.

Does Claude Design work with Figma?

Yes as an input. The launch post lists Figma files among the things Claude can read to build a design system, alongside codebases, documents and a web capture tool. For a system that lives in code, the /design-sync route skips Figma entirely. As Nitay Neeman puts it, "since the code is the source of truth, there's actually no need for Figma either."

Is there a Claude design system marketplace?

No marketplace from Anthropic. There are third-party catalogs selling template kits and DESIGN.md files, and community repos giving them away. Design systems in Claude are shared inside your organization, not published to a public store.

What is the difference between a Claude design system and a Claude design skill?

A design system is content Claude reads before it builds: tokens, components and rules. A skill is an instruction set that changes how Claude works. They compose, and a skill that enforces taste will still produce generic output if there is no design system telling it which colors and components are yours.

Can I use more than one design system at once?

Yes. Select the checkbox next to each one and tell Claude which to follow where they overlap. Claude reads every selected design system along with your request, so the tutorial's advice is to choose only the ones you need, and to keep a smaller slides-only system beside the full one for decks.

How do I update a design system after the code changes?

Re-run /design-sync. The mirror is a snapshot, not a live link, so nothing updates until you do. Page edits and usage notes survive a re-sync. Decks and designs you already made each keep their own copy from when they were made, so they need updating separately.

Why is Claude ignoring my design system?

Check the chip under the message box. If it reads "No design system", select yours in the + menu. If your organization has no default, an owner has to set one. On Enterprise, confirm an owner has turned design systems on under Organization settings, Artifacts.

Summary

• A design system in Claude is an artifact with four parts. Overview, tokens, components, usage notes.
• Underneath it is a markdown package. A README.md overview read every time, plus api/tokens.md and one file per component read only when needed. Same shape as a DESIGN.md.
• Three ways in. A chat for brand systems, /design-sync for component libraries in code, and a one-time move from standalone.
• 14 December 2026 is a real deadline. The standalone site closes, and starter-theme systems do not move.
• Beta on Pro, Max, Ultra, Team and Enterprise; off by default on Enterprise; not on Free. Claude Design itself is on Free.
• The feature needs an input it cannot invent. Bring a reviewed system and it works in an afternoon.

Start from a system somebody already reviewed: browse the duply library.

Related reading

• Claude Code design system: the 3 ways to wire one in
• Claude design templates: where they actually come from
• What is a DESIGN.md file?
• Cursor design system: both meanings, answered