CLAUDE NEW April 18, 2026

Auto-Build a Design System From Your Codebase

WHAT CHANGED

Claude Design can read a GitHub repo or local codebase and automatically extract a design system — colors, typography, spacing, component patterns.

WHY IT MATTERS

New Claude Design projects automatically match your existing brand without manual token entry. Solves the #1 pain point of using AI design tools with established brands.

HOW TO USE IT

In Claude Design, open Settings → Design System → Import from Codebase. Paste a GitHub URL or upload a folder.

CLAUDE / BASH

# Optional: prepare your codebase before upload
# Extract just the design-relevant files to keep context focused
find . -type f \( -name "*.css" -o -name "tailwind.config.*" -o -name "theme.*" -o -name "*.scss" \) \
  | head -50 | tar -czf design-system-source.tar.gz -T -

claude-designdesign-systemtokensautomation

ORIGINAL SOURCE

https://www.anthropic.com/news/claude-design

VIEW ORIGINAL SOURCE →

Claude extracts tokens and builds a shareable design system document. Every future project in your Claude Design account automatically inherits these styles. Works well when your codebase uses Tailwind config, CSS variables, or a theme file. Less reliable with inline styles or heavily nested component libraries.

← BACK TO UPDATES