Awesome Design MD / getdesign.md — AI 에이전트용 디자인 시스템 컬렉션
한 줄 요약
58개 웹사이트의 디자인 시스템을 마크다운으로 정의한 컬렉션. AI 코딩 에이전트가 읽고 픽셀 퍼펙트 UI를 생성할 수 있도록 만들어졌다.
핵심 개념
DESIGN.md란?
Google Stitch가 도입한 컨셉으로, 디자인 시스템을 마크다운 파일로 정의하여 AI 코딩 에이전트가 읽고 일관된 UI를 생성하도록 하는 방식이다.
- AGENTS.md = “어떻게 빌드할 것인가” (빌드 방법)
- DESIGN.md = “어떻게 보여줄 것인가” (디자인 정의)
수록된 디자인 시스템 (58개)
Vercel, Linear, Notion, Figma, Stripe, Apple, Claude, Cursor, Supabase 등 주요 웹사이트의 디자인 시스템이 포함되어 있다.
각 DESIGN.md 포함 내용
- Visual Theme
- Color Palette
- Typography
- Spacing
- Components
- Layout
도구
웹사이트
https://getdesign.md — 카테고리별 브라우징, 검색 기능 제공
CLI (npx)
npx getdesign@latest add XXX프로젝트에 바로 추가 가능.
별도 CLI (npm)
npm install -g designmd명령어: search, get, download, upload
사용법
- DESIGN.md를 프로젝트 루트에 복사
- AI 에이전트에게 “이 디자인으로 만들어줘”라고 지시
- 픽셀 퍼펙트 UI 생성
호환 AI 에이전트
Claude Code, Cursor, Codex 등 AI 코딩 에이전트와 직접 연동 가능
프로젝트 정보
- 저장소: https://github.com/VoltAgent/awesome-design-md
- 스타: 38,100+
- 라이선스: MIT