Give Claude a reusable design system

A design system gives Claude reusable colors, typography, components and layout patterns, per Anthropic's setup guide. Open Design Agent Kit is a community repository of design systems, skills and examples that can provide starting material. ^[1]^[2]

Review one reference first

Browse the kit's design systems and read the selected files before using them. The repository is MIT-licensed, but it is a third-party project. Treat a brand-inspired example as reference material and adapt it to your own product. ^[1]

Choose the typography, spacing and component rules you want to retain. Avoid combining several unrelated visual systems in one generation request.

Use the current import path

Anthropic's current guide describes creating a design system from a chat using uploaded assets, connected apps, Figma files, decks, logos and fonts. For a React component system, it documents this Claude Code command: ^[2]

text

/design-sync

The command reads existing tokens and components. Check the guide's plan and organization requirements before starting. ^[2]

The carousel showed the older standalone Claude Design setup screens. Use the current help guide for the interface in your account. If you have an existing standalone design system, the guide also describes moving it into the Claude app. ^[2]

Check a small generated page

Generate one page and compare its type, colors, spacing and components with the source. Check narrow and wide screens before using the system across a site.

For the original post, I reached the setup page but did not run generation. That walkthrough is not evidence that the kit imports or renders correctly in every account. Keep the first trial small enough to inspect.