Awesome Claude Design

Upload any DESIGN.md to Claude Design and it scaffolds a full design system (colors, type, components, preview cards, and a working UI kit) in a single shot.

Skip the blank-page design brief, grab a design system inspiration that matches the feel you want, and let Claude Design do the scaffolding.

What is Claude Design?

Claude Design is Anthropic's new design-focused workspace. Instead of generating one-off screens in a chat window, it holds a persistent design system for your project: tokens, components, and preview assets you can actually ship, not just swatches in a chat window.

You give it a starting point (an aesthetic, a vibe, or a DESIGN.md), and it scaffolds the system: color tokens, type scale, buttons, cards, nav, and a working UI kit. The output lands in the project's Design System review tab, organized and inspectable, so every new screen you request stays on-system.

What is DESIGN.md?

DESIGN.md is a single plain-text markdown file that describes a brand's visual language in a format AI agents can actually act on. The concept was first introduced by Google Stitch and built into a real, comparable collection by at 🎨getdesign.md.

The core idea: keep token, rule, and rationale in the same file. A Figma export tells you what to use but skips why. A brand guideline PDF talks to humans ("approachable yet premium") but is too loose for an agent. DESIGN.md sits in the middle. Specific enough for the agent to make its next decision, and carrying the why so it can stay on-system when it hits a case the file never covered.

File Who reads it What it defines

AGENTS.md Coding agents How to build the project

DESIGN.md Design agents (Claude Design, Stitch …) How the project should look and feel

Claude Design can use DESIGN.md as its source of truth. Hand it one, and the full starter package falls out the other side.

How it works

• Pick a design system inspiration from the list below, click through to its preview page to inspect the system in detail, then download its DESIGN.md.

• Open Claude Design. You've got two ways to feed it the file:

Option A. Start from a design system

Go to claude.ai/design/#org, click Create new design system, and on the Set up your design system screen, upload the DESIGN.md under Add assets.

Option B. Start from a prototype

Go to dashboard, create a new prototype, attach the DESIGN.md in the chat, and type: "Create a design system from this DESIGN.md"

Either way, Claude produces a full starter package in minutes:

• README.md with brand context, voice, and visual foundations

• colors_and_type.css with CSS variables, type scale, utility classes

• Google Fonts substitutes when the brand font is proprietary

• preview/ cards for colors, type, spacing, components, and brand

• A working UI kit (index.html + components) applying the system to a real marketing page

• SKILL.md, a portable skill file for future projects

One markdown file → production-ready design package. No boilerplate, no manual setup.

Collection

AI & LLM Platforms

• Claude - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout

• Cohere - Enterprise AI platform. Vibrant gradients, data-rich dashboard aesthetic

• ElevenLabs - AI voice platform. Dark cinematic UI, audio-waveform aesthetics

• Minimax - AI model provider. Bold dark interface with neon accents

• Mistral AI - Open-weight LLM provider. French-engineered minimalism, purple-toned

• Ollama - Run LLMs locally. Terminal-first, monochrome simplicity

• OpenCode AI - AI coding platform. Developer-centric dark theme

• Replicate - Run ML models via API. Clean white canvas, code-forward

• RunwayML - AI video generation. Cinematic dark UI, media-rich layout

• Together AI - Open-source AI infrastructure. Technical, blueprint-style design

• VoltAgent - AI agent framework. Void-black canvas, emerald accent, terminal-native

• xAI - Elon Musk's AI lab. Stark monochrome, futuristic minimalism

Developer Tools & IDEs

• Cursor - AI-first code editor. Sleek dark interface, gradient accents

• Expo - React Native platform. Dark theme, tight letter-spacing, code-centric

• Lovable - AI full-stack builder. Playful gradients, friendly dev aesthetic

• Raycast - Productivity launcher. Sleek dark chrome, vibrant gradient accents

• Superhuman - Fast email client. Premium dark UI, keyboard-first, purple glow

• Vercel - Frontend deployment platform. Black and white precision, Geist font

• Warp - Modern terminal. Dark IDE-like interface, block-based command UI

Backend, Database & DevOps

• ClickHouse - Fast analytics database. Yellow-accented, technical documentation style

• Composio - Tool integration platform. Modern dark with colorful integration icons

• HashiCorp - Infrastructure automation. Enterprise-clean, black and white

• MongoDB - Document database. Green leaf branding, developer documentation focus

• PostHog - Product analytics. Playful hedgehog branding, developer-friendly dark UI

• Sanity - Headless CMS. Red accent, content-first editorial layout

• Sentry - Error monitoring. Dark dashboard, data-dense, pink-purple accent

• Supabase - Open-source Firebase alternative. Dark emerald theme, code-first

Productivity & SaaS

• Cal.com - Open-source scheduling. Clean neutral UI, developer-oriented simplicity

• Intercom - Customer messaging. Friendly blue palette, conversational UI patterns

• Linear - Project management for engineers. Ultra-minimal, precise, purple accent

• Mintlify - Documentation platform. Clean, green-accented, reading-optimized

• Notion - All-in-one workspace. Warm minimalism, serif headings, soft surfaces

• Resend - Email API for developers. Minimal dark theme, monospace accents

• Zapier - Automation platform. Warm orange, friendly illustration-driven

Design & Creative Tools

• Airtable - Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic

• Clay - Creative agency. Organic shapes, soft gradients, art-directed layout

• Figma - Collaborative design tool. Vibrant multi-color, playful yet professional

• Framer - Website builder. Bold black and blue, motion-first, design-forward

• Miro - Visual collaboration. Bright yellow accent, infinite canvas aesthetic

• Webflow - Visual web builder. Blue-accented, polished marketing site aesthetic

Fintech & Crypto

• Binance - Crypto exchange. Bold Binance Yellow on monochrome, trading-floor urgency

• [Coinbase](https://github.com/VoltAgent/awesome-claude-design/blob/main/[https://getdesign.md/coinbase](https://getdesign.md/coinbase)