Awesome DESIGN.md는 Claude, Nike, Tesla, Stripe 등 인기 브랜드·제품의 디자인 시스템을 DESIGN.md 형식으로 추출해 모아 놓은 오픈소스 큐레이션 저장소다. VoltAgent 팀이 관리하며, 현재 69개 브랜드를 다룬다. DESIGN.md 파일 하나를 프로젝트 루트에 복사하면 Claude Code, Cursor, Copilot 등 모든 AI 코딩 에이전트가 해당 브랜드 디자인 시스템을 즉시 이해하고 준수하는 UI를 생성한다.
DESIGN.md란
Google Stitch가 만든 DESIGN.md는 AI 에이전트가 읽는 디자인 시스템 문서다. Figma 익스포트도, JSON 스키마도, 별도 도구도 필요 없다. LLM이 가장 잘 읽는 형식인 Markdown으로 작성해 프로젝트 루트에 넣으면 된다.
| 파일 | 독자 | 정의하는 내용 |
|---|---|---|
AGENTS.md | 코딩 에이전트 | 프로젝트를 어떻게 빌드할지 |
DESIGN.md | 디자인 에이전트 | 프로젝트가 어떻게 보여야 할지 |
컬렉션 구성
총 69개 브랜드를 7개 카테고리로 분류한다.
AI·LLM 플랫폼
Claude(Anthropic 따뜻한 테라코타 레이아웃), ElevenLabs(어두운 시네마틱 UI), Mistral AI(프랑스식 미니멀리즘), Ollama(터미널 모노크롬), Replicate(코드 중심 흰 캔버스), xAI(미래적 스타크 모노크롬) 등 12개.
개발 도구·IDE
Cursor(슬릭 다크 인터페이스), Raycast(바이브런트 그라디언트 액센트), Vercel(흑백 정밀도, Geist 폰트), Warp(블록 기반 커맨드 UI) 등 7개.
백엔드·데이터베이스
Supabase(다크 에메랄드), PostHog(플레이풀 다크 UI), Sentry(데이터 밀집 핑크퍼플), Sanity(레드 액센트 콘텐츠 레이아웃) 등 7개.
생산성·SaaS
Notion(웜 미니멀리즘), Linear(울트라미니멀 퍼플 액센트), Mintlify(그린 액센트 독서 최적화), Resend(모노스페이스 다크) 등 7개.
디자인·크리에이티브 도구
Figma(멀티컬러 플레이풀), Framer(볼드 블랙앤블루 모션), Miro(브라이트 옐로우 액센트), Webflow(블루 폴리시 마케팅) 등 6개.
핀테크·크립토
Stripe(시그니처 퍼플 그라디언트), Binance(바이낸스 옐로우 트레이딩), Wise(브라이트 그린 친근함) 등 7개.
미디어·소비자 가전
Apple(프리미엄 여백, SF Pro), NVIDIA(그린블랙 테크파워), Spotify(바이브런트 그린 온 다크), Tesla(급진적 미니멀리즘) 등 13개.
각 브랜드 파일 구성
각 사이트는 세 파일로 구성된다:
| 파일 | 용도 |
|---|---|
DESIGN.md | 에이전트가 읽는 디자인 시스템 문서 |
preview.html | 색상 스와치·타이포그래피·버튼·카드 카탈로그 (라이트) |
preview-dark.html | 다크 서피스 동일 카탈로그 |
각 DESIGN.md는 아래 9개 섹션을 담는다:
| # | 섹션 | 포착하는 내용 |
|---|---|---|
| 1 | Visual Theme & Atmosphere | 무드·밀도·디자인 철학 |
| 2 | Color Palette & Roles | 시맨틱 이름 + 헥스 + 기능 역할 |
| 3 | Typography Rules | 폰트 패밀리, 전체 위계 테이블 |
| 4 | Component Stylings | 버튼·카드·인풋·내비게이션 및 상태 |
| 5 | Layout Principles | 스페이싱 스케일, 그리드, 여백 철학 |
| 6 | Depth & Elevation | 그림자 시스템, 서피스 위계 |
| 7 | Do’s and Don’ts | 디자인 가드레일·안티패턴 |
| 8 | Responsive Behavior | 브레이크포인트, 터치 타깃, 붕괴 전략 |
| 9 | Agent Prompt Guide | 빠른 컬러 레퍼런스, 즉시 쓸 수 있는 프롬프트 |
사용 방법
getdesign.md/<사이트명>/design-mdURL에서 원하는 브랜드의 DESIGN.md를 복사한다.- 프로젝트 루트에
DESIGN.md로 저장한다. - AI 에이전트에게 “이 디자인 파일을 사용해 페이지를 만들어 줘”라고 지시한다.
어떤 사람에게 유용한가
- 특정 브랜드와 유사한 스타일의 UI를 AI 에이전트로 빠르게 프로토타이핑하고 싶은 개발자
- 자체 DESIGN.md를 작성할 때 실제 사례를 참고하고 싶은 디자이너·프론트엔드 엔지니어
- Google Stitch에서 DESIGN.md를 내보내 다른 AI 에이전트에서 재사용하려는 경우
라이선스
MIT. GitHub: VoltAgent/awesome-design-md
관련 문서
- design-md — DESIGN.md 형식 공식 스펙 및 CLI 도구
- impeccable — AI 하네스용 프론트엔드 디자인 스킬 시스템
- kami — AI 에이전트용 전문 문서 디자인 스킬
- a2ui — 에이전트가 기존 디자인 시스템으로 UI를 생성하는 표준