DESIGN.md라는 한 장짜리 문서가 있다. 이 저장소는 그런 DESIGN.md 68개를 Claude·Stripe·Nike·Tesla 같은 유명 브랜드별로 큐레이션해 링크만 정리해 둔 것이다.
README.md 하나(+ LICENSE)뿐이며, 실제 DESIGN.md 원문은 이 레포 밖의 getdesign.md라는 사이트에 있고, 그것을 소비해 UI를 생성하는 엔진도 이 레포 밖의 Claude Design이다. 즉 이 저장소는 "설계도"가 아니라 설계도로 가는 안내 지도다.
VoltAgent/awesome-claude-design · 라이선스 MIT(2026, VoltAgent) · 파일 구성 README.md + LICENSE, 딱 2개 · 링크 항목 68개(DESIGN.md count 배지 값과 실측 일치, 9개 카테고리) · 최신 커밋 8f746b5, 2026-06-20(Necati Özmen, "Update README.md") · 별점 미인용)
awesome-claude-design은 "라이브러리"가 아니라 "카탈로그"다. Claude·Stripe·Nike·Tesla·Notion 등 68개 브랜드에 대해, 그 브랜드 느낌을 흉내 낸 DESIGN.md 문서로 연결되는 링크를 정리해 둔 README.md 하나가 저장소의 전부다. DESIGN.md는 색상 팔레트·타이포그래피 규칙·컴포넌트 스타일·레이아웃 원칙 등을 사람이 아니라 AI 에이전트가 읽고 바로 행동에 옮길 수 있는 형식으로 적어둔 한 장짜리 마크다운 파일이다.
이걸 Anthropic의 Claude Design(claude.ai/design)에 업로드하면, Claude가 그 문서를 읽고 CSS 변수·타입 스케일·버튼/카드/내비게이션 같은 컴포넌트·프리뷰 카드·실제로 동작하는 UI 킷을 한 번에 만들어낸다. 이 저장소가 하는 일은 딱 하나, "어떤 DESIGN.md부터 시작할지 고르기 쉽게 진열해 두는 것"이다.
새 프로젝트의 디자인을 처음부터 짜는 건 맨몸으로 재봉틀 앞에 앉는 것과 비슷하다. 무엇을 만들지, 어떤 색·어떤 질감을 쓸지 전부 결정해야 한다.
awesome-claude-design은 그 대신 이미 재단된 도안 68벌이 걸린 옷걸이다. "스트라이프의 미니멀함"(Stripe), "테라코타의 편집자적 느낌"(Claude) 같은 도안을 골라 재봉틀(Claude Design)에 넣으면, 내 몸(프로젝트)에 맞춰 바로 재단해 준다. 이 저장소 자체는 옷을 만들지 않는다 — 옷걸이일 뿐이다.
이 저장소가 주목받는 이유는 코드의 참신함이 아니라 타이밍에 있다. 세 가지로 정리된다.
README는 Claude Design을 "일회성 화면을 찍어내는 채팅창 대신, 프로젝트마다 지속되는 디자인 시스템(토큰·컴포넌트·프리뷰 자산)을 들고 있는 워크스페이스"로 소개한다. 새 제품이 나오면 그 제품에 무엇을 먹일지에 대한 "재료 모음"이 곧바로 가치를 가진다 — 이 저장소가 그 자리를 선점했다.
README는 AGENTS.md(코딩 에이전트가 읽는, "어떻게 만들지")와 DESIGN.md(디자인 에이전트가 읽는, "어떻게 보일지")를 나란히 놓고 비교한다. "에이전트가 읽고 바로 행동할 수 있는 스펙 파일"을 프로젝트 루트에 두는 관행이 코딩을 넘어 디자인으로 번지는 흐름 한가운데 이 저장소가 있다. DESIGN.md 개념 자체는 Google Stitch가 먼저 제안했고, getdesign.md가 실제로 비교 가능한 컬렉션으로 구현했다고 README는 밝힌다.
awesome.re 배지가 붙은 전형적인 Awesome List 포맷 — 마크다운 표와 불릿만으로 구성 — 이라 기여(새 브랜드 추가)와 확산(스타·포크·공유)의 장벽이 낮다. 게다가 배포사인 VoltAgent(AI 에이전트 프레임워크 회사)가 README 상단에 자사 제품 launchkit.getdesign.md 배너를 넣어 커뮤니티 자산이자 자사 마케팅 채널로 동시에 활용하고 있다.
1인 개발자, 사이드 프로젝트, MVP 데모처럼 전담 디자이너 없이도 "아무 브랜드나 베낀 듯한" 느낌을 피하면서 빠르게 그럴듯한 UI를 뽑아야 하는 상황에 정확히 맞춘 자료다.
README가 스스로 밝히는 문제의식은 "Skip the blank-page design brief"(빈 디자인 브리프를 건너뛰어라)다. 구체적으로 세 가지 실무 고통을 겨냥한다.
DESIGN.md는 토큰·규칙·이유(rationale)를 한 파일에 묶어 매 화면이 같은 시스템 안에서 나오게 강제한다.DESIGN.md는 그 중간 — 에이전트가 다음 결정을 내릴 만큼 구체적이면서, 문서가 다루지 않은 새 상황에서도 시스템을 벗어나지 않게 이유까지 담는다.
이 저장소를 직접 클론해 보면 README.md와 LICENSE, 딱 2개 파일뿐이다. src/도, package.json도, .github/workflows도 없다. 이 저장소가 "하는 일"은 정보 전달이 전부이고, 실제 파일 생성과 렌더링은 저장소 밖의 두 서비스가 나눠 맡는다.
즉 구조를 한 문장으로 요약하면: "카탈로그(이 레포) → 원본 창고(getdesign.md) → 조립 공장(Claude Design)"의 3단 분업이다. 코드 저장소를 딥다이브할 때 흔히 기대하는 "아키텍처 다이어그램·모듈 의존성" 같은 것은 여기엔 없다 — 구조 자체가 "잘 정리된 목차"인 셈이다.
README.md의 ## Collection 절(103~197번째 줄) — 9개 카테고리 × 총 68개 브랜드
이 저장소의 진짜 핵심은 README.md 안의 ## Collection 절이다(파일 기준 101번째 줄부터 시작). 68개 브랜드가 "업종·성격" 축으로 9개 카테고리에 나뉘어 있고, 각 항목은 [**브랜드명**](getdesign.md/브랜드/design-md) - 한 줄 설명(용도 + 비주얼 톤) 형식의 마크다운 링크다. 실제로 세어 보면 카테고리별 개수는 다음과 같고, 합계는 상단 배지의 DESIGN.md count 68과 정확히 일치한다.
| 카테고리 (README 소제목) | 개수 | 대표 항목 (일부) |
|---|---|---|
| AI & LLM Platforms | 12 | Claude, Cohere, ElevenLabs, Mistral AI, Ollama, xAI 등 |
| Developer Tools & IDEs | 7 | Cursor, Raycast, Vercel, Warp, Superhuman 등 |
| Backend, Database & DevOps | 8 | Supabase, MongoDB, Sentry, ClickHouse, HashiCorp 등 |
| Productivity & SaaS | 7 | Linear, Notion, Cal.com, Zapier, Intercom 등 |
| Design & Creative Tools | 6 | Figma, Framer, Miro, Webflow, Airtable, Clay |
| Fintech & Crypto | 7 | Stripe, Coinbase, Binance, Revolut, Wise, Mastercard, Kraken |
| E-commerce & Retail | 4 | Airbnb, Shopify, Nike, Meta |
| Media & Consumer Tech | 11 | Apple, Spotify, SpaceX, NVIDIA, Uber, WIRED, PlayStation 등 |
| Automotive | 6 | Tesla, Ferrari, Lamborghini, BMW, Bugatti, Renault |
| 합계 | 68 | (README 상단 img.shields.io 배지 값과 실측 일치) |
각 항목의 설명 한 줄은 "용도 + 비주얼 키워드" 조합으로 통일돼 있다. 예를 들어 [**Claude**](https://getdesign.md/claude/design-md) - Anthropic's AI assistant. Warm terracotta accent, clean editorial layout, [**Tesla**](https://getdesign.md/tesla/design-md) - Electric vehicles. Radical subtraction, cinematic full-viewport photography, Universal Sans처럼, 무엇을 하는 회사인지와 "어떤 느낌인지"를 함께 훑어보고 취향에 맞는 것을 고를 수 있게 해 둔 것이 이 분류의 목적이다.
이 저장소 안에는 DESIGN.md 원문이 없지만, README는 "Claude가 DESIGN.md에서 무엇을 읽어가는지"를 9개 섹션 표로 문서화해 둔다. 즉 68개 링크가 가리키는 문서들은 전부 이 스키마를 따른다고 명시돼 있다(실물 검증은 getdesign.md 사이트에서만 가능하다).
| # | 섹션 | Claude가 읽어가는 목적 |
|---|---|---|
| 1 | Visual Theme & Atmosphere | 전체 톤·밀도·분위기 설정 |
| 2 | Color Palette & Roles | 의미 있는 이름 + 헥스값을 가진 CSS 변수 출력 |
| 3 | Typography Rules | 타입 스케일 구성 + 구글 폰트 대체재 선정 |
| 4 | Component Stylings | 버튼·인풋·카드·내비게이션과 상태(hover 등) 생성 |
| 5 | Layout Principles | 여백 스케일·그리드·레이아웃 리듬 |
| 6 | Depth & Elevation | 그림자 토큰과 표면 위계 |
| 7 | Do's and Don'ts | 새 화면을 생성할 때 지켜야 할 가드레일 |
| 8 | Responsive Behavior | 브레이크포인트·터치 타깃·접힘 동작 |
| 9 | Agent Prompt Guide | 생성된 SKILL.md에 심어둘 재사용 프롬프트 |
일반적인 코드 저장소라면 이 섹션에서 실제 소스 파일 경로·스키마 정의 코드를 인용하겠지만, 이 저장소는 README.md 자체가 유일한 데이터다. 위에서 인용한 두 표(Collection 목록, 9개 섹션 스펙)가 이 저장소가 가진 "분류 체계"의 전부이며, 더 깊은 스키마(실제 DESIGN.md 파일 안의 정확한 마크다운 구조)는 getdesign.md 사이트에 가야만 확인할 수 있다.
코드 저장소 딥다이브의 관례를 따르자면 이 섹션에서 프레임워크·빌드 도구·CI 파이프라인을 나열해야 하지만, 이 저장소에는 그런 것이 전혀 없다. find로 훑어봐도 .github/workflows, package.json, 스크립트 폴더가 존재하지 않는다. "기술 스택"이라 부를 만한 것은 사실상 마크다운 + Shields.io 배지 + awesome.re 배지가 전부다.
| 구성 요소 | 실체 |
|---|---|
| 이 저장소 | README.md(마크다운) + LICENSE(MIT 텍스트). 코드·빌드·테스트 없음 |
| 배지 | awesome.re(어썸 리스트 인증) · img.shields.io(DESIGN.md count, Last update) · Discord 초대 배지 — 전부 정적 이미지/외부 API 링크일 뿐, 저장소 안에서 자동 계산되지 않음 |
| 실제 파일 저장·서빙 | getdesign.md (VoltAgent 계열 사이트) — 68개 DESIGN.md 원문과 프리뷰 페이지를 호스팅 |
| 실제 "생성 엔진" | Claude Design(claude.ai/design, Anthropic) — DESIGN.md를 입력받아 LLM으로 색상·컴포넌트·UI 킷을 스캐폴딩 |
| 연계 상업 제품 | launchkit.getdesign.md — README 상단에 배너로 소개된 VoltAgent의 별도 제품(스타터킷 판매 성격) |
일반적인 CI 배지(테스트 커버리지 등)는 빌드 때마다 자동 갱신되지만, 이 배지는 img.shields.io의 정적 텍스트 배지(DESIGN.md%20count-68-10b981)로 사람이 README를 고칠 때 수동으로 숫자를 맞춰 넣는 방식이다. 실제로 이번 분석에서 README의 링크 항목을 직접 세어 68개임을 확인했고 배지 값과 일치했지만, 이는 "자동 검증 파이프라인이 있어서"가 아니라 "관리자가 잘 맞춰뒀기 때문"이라는 점을 구분해야 한다.
| 항목 | 요구사항 |
|---|---|
| 이 저장소를 보는 것 | 브라우저만 있으면 충분. 클론해도 얻는 건 README.md·LICENSE 텍스트뿐, 실행할 것이 없음 |
DESIGN.md 원문 받기 | getdesign.md/<brand>/design-md 프리뷰 페이지 방문 → 내용 확인 → 파일 다운로드 |
| 실제 스캐폴딩 실행 | claude.ai/design 계정 필요(Claude Design은 별도 워크스페이스이며 일반 claude.ai 채팅과는 다른 화면·플랜 제약이 있을 수 있음) |
| 업로드 방법 A | claude.ai/design/#org → Create new design system → "Set up your design system" 화면의 Add assets에 DESIGN.md 업로드 |
| 업로드 방법 B | 대시보드에서 새 프로토타입 생성 → 채팅에 DESIGN.md 첨부 → "Create a design system from this DESIGN.md" 라고 입력 |
| 결과물을 활용하려면 | 일반적인 웹 개발 환경(HTML/CSS, 정적 서버 등) — 산출물이 colors_and_type.css·index.html 등 표준 웹 자산이므로 특별한 런타임은 필요 없음 |
일반적인 오픈소스 프로젝트처럼 npm install이나 환경변수 설정이 필요 없다. 이 자료를 쓰는 데 필요한 건 "브라우저 + Claude Design 접근 권한"뿐이라는 점이 어썸 리스트로서의 진짜 강점이다.
예를 들어 "핀테크인데 차분한 느낌"을 원한다면 Fintech & Crypto 카테고리의 Wise("밝은 초록 악센트, 친근하고 명확")나 Stripe("시그니처 보라 그라디언트")를 고른다. 68개 한 줄 설명이 곧 "미리보기 없는 미리보기" 역할을 한다.
링크를 클릭하면 getdesign.md/<brand>/design-md로 이동해 실제 문서 내용을 미리 훑어본 뒤 파일을 다운로드한다.
방법 A(시스템부터 시작): claude.ai/design/#org에서 새 디자인 시스템을 만들고 "Set up your design system" 화면의 Add assets에 업로드한다. 방법 B(프로토타입부터 시작): 새 프로토타입 채팅에 파일을 첨부하고 "Create a design system from this DESIGN.md"라고 요청한다.
README에 따르면 결과물은 README.md(브랜드 맥락·톤·비주얼 기반), colors_and_type.css(CSS 변수·타입 스케일·유틸리티 클래스), 대체 구글 폰트, preview/ 카드(색상·타이포·간격·컴포넌트·브랜드), 실제 동작하는 UI 킷(index.html+컴포넌트), 그리고 다음 프로젝트에도 재사용할 수 있는 SKILL.md로 구성된다.
이 흐름은 "도안 고르기 → 원단 받기 → 재봉 맡기기 → 완제품 + 패턴지(SKILL.md) 함께 받기"와 같다. 특히 SKILL.md를 따로 저장해 두면, 다음 프로젝트에서 파일을 다시 올릴 필요 없이 같은 "패턴지"로 같은 느낌을 재소환할 수 있다는 것이 README의 팁이다.
README의 "Tips for getting better output" 절은 실사용 시 네 가지를 조언한다: 새 프로젝트는 깨끗한 상태에서 시작할 것(브랜드를 섞으면 토큰이 흐려짐), 시스템이 잡힌 뒤에도 계속 화면을 요청할 것("이제 가격 페이지 만들어줘" 등은 자동으로 브랜드 톤을 유지함), 라이트/다크·컴팩트/컴포터블 등 변형(variant)을 요청할 것, 그리고 SKILL.md를 자신의 스킬 폴더에 저장해 재사용할 것.
68개 항목 전부가 getdesign.md로 나가는 외부 링크다. 저장소 자체에는 .md 디자인 파일이 존재하지 않으므로, "레포를 다운받아 바로 쓴다"는 접근은 통하지 않는다. 반드시 각 링크를 클릭해 외부 사이트에서 내려받아야 한다.
README의 License & disclaimer 절(224~230번째 줄)은 명확히 밝힌다: DESIGN.md 파일들은 "공개적으로 관찰 가능한 디자인 패턴에서 영감을 받은 큐레이션된 출발점"일 뿐, 언급된 회사들의 공식 디자인 시스템이 아니며 그 회사들의 승인·후원을 받지 않았다. 상표·로고·독점 서체는 각 회사 소유이며, 실제 서비스에 쓰기 전에는 상표·저작권·브랜드 사용 정책을 직접 확인해야 한다고 명시돼 있다. 저장소(README+LICENSE) 자체만 MIT이지, 브랜드 아이덴티티 자체가 MIT로 풀린 게 아니다.
이 자료를 쓰려면 claude.ai/design이라는 별도 워크스페이스에 접근할 수 있어야 한다. 일반 Claude 대화창이나 Claude Code(터미널 에이전트)와는 다른 제품이므로, 접근 가능 여부·플랜 제약을 먼저 확인해야 헛수고를 피할 수 있다.
배지 값과 실제 항목 수가 이번 분석 시점(커밋 8f746b5)에는 일치했지만, 이는 자동 CI가 아니라 사람이 README를 고칠 때마다 배지 텍스트를 함께 수정하는 수동 방식이다. 새 브랜드가 PR로 추가된 후 배지 갱신이 누락되면 숫자가 어긋날 수 있으니, 정확한 개수가 중요하다면 항상 ## Collection 절을 직접 세어 확인하는 것이 안전하다.
| 대안 | 특징 | DESIGN.md(이 저장소)와 차이 |
|---|---|---|
| Figma 커뮤니티 UI 킷 | 시각적 캔버스, 컴포넌트를 눈으로 보고 복제 | Figma 사용법을 알아야 하고 사람이 직접 수작업 복제. DESIGN.md는 텍스트라 에이전트가 곧바로 파싱·실행 |
| shadcn/ui 테마 프리셋(예: 커뮤니티 테마 생성기) | 컴포넌트 코드와 색상 프리셋을 즉시 제공 | 버튼·카드 같은 "부품"은 주지만 브랜드 보이스·레이아웃 철학·Do's and Don'ts 같은 맥락(rationale)은 빠져 있는 경우가 많음 |
| 브랜드 가이드 PDF | 사람을 위한 톤·무드 설명("친근하면서도 프리미엄하게") | README가 직접 지적하듯 에이전트가 다음 결정을 내리기엔 너무 느슨함 — 구체적 토큰이 없음 |
| Google Stitch (DESIGN.md 개념의 원조) | DESIGN.md 개념을 최초로 제안 | getdesign.md/이 저장소는 그 개념을 브랜드별로 비교 가능한 컬렉션으로 구체화하고, Claude Design 소비에 맞춰 큐레이션했다는 점이 다름 |
| 처음부터 직접 DESIGN.md 작성 | 내 브랜드에 완전히 맞는 문서를 새로 씀 | 가장 정확하지만 시간이 걸림 — 이 저장소는 "비슷한 느낌에서 출발해 다듬는" 지름길을 제공 |
68개를 업종·톤별로 미리 분류해 한 줄 설명까지 붙여 뒀기 때문에, "어떤 느낌을 원하는지도 아직 모르겠다"는 단계에서 둘러보며 감을 잡기에 가장 적합하다. 다른 대안들은 "이미 뭘 원하는지 안다"는 전제가 강한 편이다.
awesome-claude-design은 "코드를 배우는 저장소"가 아니라 "의사결정을 빠르게 하도록 도와주는 진열장"이다. 딥다이브하며 확인한 핵심은 세 가지다: ① 저장소 실물은 README.md·LICENSE 두 파일뿐이고 자동화·CI가 전혀 없다, ② 68개 링크는 전부 getdesign.md(원본)와 Claude Design(생성 엔진)이라는 외부 서비스로 이어지는 안내판이다, ③ 실사용에는 Claude Design 접근 권한과, 결과물을 실제 서비스에 쓸 때의 상표권 주의가 반드시 필요하다.