← ALL UPDATES
CLAUDE 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.

Top 5 Ways to Extract a Design System from Claude Design

The 5 fastest extraction patterns in 2026:

  1. URL-to-tokens — “Extract the design system from [competitor URL]: colors, typography scale, spacing, shadows, border radius.” Get a JSON token file.

  2. Screenshot-to-Figma-tokens — Upload a screenshot, ask “Extract as Figma design tokens.” Paste the output straight into Figma Tokens plugin.

  3. Multi-page pattern audit — “Analyze these 5 URLs from the same product and extract the shared component patterns.” Get a component inventory.

  4. Extract + rebuild in Tailwind — “Extract the design system from [URL] and output as a Tailwind config file.” Ships as tailwind.config.js.

  5. Brand palette + accessibility check — “Extract the color palette, then check WCAG AA compliance for all combinations.” Get a scored palette with pass/fail flags.

FAQ

What is Claude Design capture?

“Claude Design capture” is the process of extracting design system elements — colors, typography, spacing, components — from an existing website or screenshot using Claude Design. Instead of manually inspecting elements, Claude Design parses the visual structure and returns tokens ready for Figma, Tailwind, or CSS.

What are Claude AI design principles?

Claude Design applies four principles in 2026: (1) intent-first — infer purpose before layout, (2) system consistency — reuse tokens rather than inventing new ones, (3) accessibility by default — WCAG AA contrast is checked automatically, (4) production-ready output — exports run in real environments (Figma, Tailwind, HTML) without manual cleanup.

How accurate is Claude Design’s system extraction?

In practice, extraction accuracy is ~85-95% for typography and color, ~70-85% for spacing and layout patterns, ~60-75% for complex component behaviors. Complex interactive patterns (multi-step forms, animated transitions) still require manual refinement.

Can I extract a design system without a URL?

Yes. Upload a screenshot or paste an image directly into Claude Design and ask “Extract the design system.” Works for mobile screenshots, print materials, or design mockups from Figma/Sketch exports.

← BACK TO UPDATES