awesome-claude-design README

The project's README from github.com/VoltAgent/awesome-claude-design. As one markdown file: README.md.

claude-design

A collection of ready-to-use DESIGN.md files that Claude Design expands into a full UI scaffold with one drop.

Awesome DESIGN.md Count Last Update Discord

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.


launchkit

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

  1. 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.
  2. 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.

setup-a


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"

option-b

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

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

Collection

AI & LLM Platforms

Developer Tools & IDEs

Backend, Database & DevOps

Productivity & SaaS

Design & Creative Tools

Fintech & Crypto

E-commerce & Retail

Media & Consumer Tech

Automotive

What Claude produces from a DESIGN.md

Each file gives Claude enough structured context to generate a complete, opinionated system, not a loose color grab. The 9 sections every DESIGN.md follows:

# Section What Claude reads it for
1 Visual Theme & Atmosphere Setting tone, density, and mood of the scaffold
2 Color Palette & Roles Emitting CSS variables with semantic names + hex
3 Typography Rules Building the type scale and picking Google Fonts fallbacks
4 Component Stylings Generating buttons, inputs, cards, nav with states
5 Layout Principles Spacing scale, grid, whitespace rhythm
6 Depth & Elevation Shadow tokens and surface hierarchy
7 Do's and Don'ts Guardrails Claude respects when generating new screens
8 Responsive Behavior Breakpoints, touch targets, collapse behavior
9 Agent Prompt Guide Reusable prompts Claude embeds into the generated SKILL.md

Tips for getting better output

License & disclaimer

The repository itself is MIT licensed, see LICENSE.

The DESIGN.md files linked from this repo are curated starting points inspired by publicly observable design patterns on the referenced websites. They are not official design systems and are not affiliated with, endorsed by, or sponsored by the companies named. All trademarks, brand names, logos, and proprietary typefaces belong to their respective owners, and this repo makes no claim of ownership over any brand's visual identity.

These documents exist for educational and development purposes — to give AI agents like Claude Design enough structured context to generate consistent UI. Users are responsible for ensuring their own downstream usage complies with the trademark, copyright, and brand-usage policies of the originating companies. When in doubt, use a DESIGN.md as inspiration for an original system rather than a 1:1 clone.

awesome-claude-design (VoltAgent/awesome-claude-design)

Searching Database…

Что это?Отобранная коллекция из 68 готовых к использованию файлов DESIGN.md — одностраничных брифов, описывающих визуальный язык бренда, — которые вы загружаете в Claude Design, чтобы за один заход получить каркас полноценной UI-дизайн-системы (цвета, типографика, компоненты, карточки превью, работающий UI-кит).
Это инструмент для кодинга или просто коллекция файлов?Это отобранная коллекция текстовых markdown-файлов DESIGN.md, а не код для установки; каждый файл предназначен для передачи в отдельный продукт — Claude Design, который и выполняет саму генерацию.
Как пользоваться одним из этих файлов DESIGN.md?Выберите дизайн-систему из списка, откройте её страницу превью и скачайте её DESIGN.md, затем либо загрузите его при создании новой дизайн-системы в Claude Design, либо приложите в чате с прототипом и попросите Claude построить по нему дизайн-систему.
Нужен ли аккаунт Claude Design, чтобы ими пользоваться?Да, файлы используются через Claude Design на claude.ai/design — дизайн-среду Anthropic; сам DESIGN.md — просто markdown, и другой инструментарий не нужен.
Это официальные дизайн-системы брендов?Нет. Это отобранные неофициальные воссоздания по мотивам публично наблюдаемых паттернов дизайна; они не связаны с названными компаниями и не одобрены ими, поэтому дальнейшее использование должно уважать товарные знаки и правила авторских прав каждого бренда.
Что такое DESIGN.md?DESIGN.md — один markdown-файл, который описывает визуальный язык бренда так, чтобы AI-агенты могли его применять: дизайн-токены, правила и логику за ними — в одном файле; он применимее, чем экспорт из Figma, и конкретнее, чем PDF с гайдлайнами бренда.
Что Claude Design генерирует из одного DESIGN.md?Полный стартовый набор: README с контекстом и тоном бренда, colorsandtype.css с переменными и типографической шкалой, замены проприетарных шрифтов из Google Fonts, карточки превью для цветов/типографики/отступов/компонентов, работающий UI-кит (index.html плюс компоненты) и переносимый SKILL.md, который можно переиспользовать в будущих проектах.
Как организована коллекция из 68 брендов?Записи сгруппированы по тематическим категориям вроде AI- и LLM-платформ, инструментов разработчика и IDE, финтеха и крипты, e-commerce и ритейла, медиа и потребительской электроники, автомобилей; у каждой однострочная пометка о визуальном стиле — например, фиолетовые градиенты Stripe или заглавный Futura у Nike.
Зачем собирать это вместо того, чтобы писать дизайн-бриф с нуля?Смысл в том, чтобы пропустить бриф с чистого листа: берёте DESIGN.md, уже совпадающий с нужной эстетикой, и позволяете Claude Design за один заход возвести всю систему, вместо того чтобы вручную описывать токены и компоненты.
Creator
VoltAgent
Size
<0.1 MB
Stars
4.1K
Updated
CommitJun 20
Age
6mo
Commits · 90 Days