Give Claude Design an existing design system
Choose a design reference, import its assets and review the result before reusing it.
Published · 2 sources · Resume reading
Open Design Agent Kit collects design systems, skills and examples that coding agents can read. Its repository includes a claude-design-systems directory [1]. I would choose one reference that fits the product before asking an agent to design a whole site.
Choose the reference for your product
Browse the repository's design systems and examples [1]. Check the typography, navigation and content density against your own page. A dashboard reference and a reading-focused publication solve different problems.
Add the system in Claude Design
Anthropic's setup guide describes creating a design system from supplied assets, including a codebase or design references. The system stores colors, typography, components and layout patterns for later work [2]. Follow the account-specific setup in that guide and supply the selected system's files.
Review a real page before reusing it
Check a page containing your actual title, navigation and longest content. Look at narrow and wide layouts, link states and text contrast. Record the corrections in the system you reuse.
Keep your own branding and content. The repository supplies design material; you still need to decide which choices belong in your product [1].
Keep this guide
Filed under Claude Code, Dev tools
Sources
- Open Design Agent Kit repositorygithub.com
- Claude Help: set up your design systemsupport.claude.com