Claude Design System
A brand configuration manifest generated inside Claude Design by providing a company name, description, GitHub repo URL, brand assets (logos, fonts), and design notes. Once generated, it is reusable across both Claude Design and Claude Code, eliminating the need to re-specify brand guidelines for every new project.
Key points
- Generation takes 10–15 minutes and consumes a significant portion of the Claude Design weekly quota [src-009]
- Output files:
skill.md(machine-readable manifest for Claude Code),design.md(brand template), colour palette, typography, spacing rules, button styles, and component previews [src-009] - Can be exported as a ZIP and ingested by Claude Code via the
skill.mdfile — enabling brand-consistent work outside the Design canvas [src-009] - Multiple design systems can coexist for different brands or business units [src-009]
- Claude Code can consume the
skill.mdwithout ever opening Claude Design — useful when the Design quota is exhausted [src-009] - Google Labs' Stitch introduces a parallel artifact, DESIGN.md, for importing and exporting design rules as an agent-friendly markdown file across Stitch projects and other design/coding tools [src-040].
- Both patterns treat design systems as portable context for agents: brand rules become files that can travel between creative and engineering surfaces [src-009, src-040].
Related entities
- Claude Design — the tool that generates Design Systems
- Design Md
- Stitch
- Visual Prototyping
- Claude Code — consumes the
skill.mdmanifest for brand-consistent deployment work
Related concepts
- Claude Code Handoff — Design System is packaged inside the hand-off ZIP
- Context Engineering — Design System as a structured, machine-readable context injection
Source references
- [src-009] Nate Herk — Claude Design cluster (2026-04-17 to 2026-04-21)
- [src-040] Rustin Banks — "Design UI using AI with Stitch from Google Labs" (2026-03-18)
Recommended next
Keep reading from this thread
From 500 indexed pages and articles.
- Wiki concept Claude Design → Claude Code Hand-off The mechanism for transferring a Claude Design prototype into Claude Code for deployment and deeper development. Related by 009
- Wiki concept DESIGN.md Google Labs Stitch's agent-friendly markdown file for exporting, importing, and reusing design rules across projects, design tools, and coding tools. Related by design
- Wiki concept Visual Prototyping with AI Workflow pattern where AI generates interactive HTML/CSS prototypes through a visual, iterative canvas rather than pure code generation. Related by 009