awesome-design-md는 애플·스트라이프·노션 같은 유명 서비스의 웹 디자인 규칙을 DESIGN.md라는 마크다운 파일로 정리해 모은 GitHub 저장소입니다. AI에게 "애플 느낌으로 만들어 줘"라고만 하면 흰 바탕에 파란 버튼 정도로 끝나기 쉬운데, 이 파일을 함께 주면 색 코드와 글꼴 크기, 버튼 모양, 간격까지 근거를 갖고 화면을 짭니다. 제 PC(Windows 11)에서는 이 저장소를 Claude Code 스킬로 감싸 brand-design-md라는 이름으로 설치했습니다.

awesome-design-md는 무엇인가
VoltAgent가 관리하는 MIT 라이선스 저장소입니다. README 배지에 DESIGN.md가 84개로 표시되어 있고, 제가 받은 사본(2026-10-14 커밋)의 design-md 폴더도 84개였습니다. 캡처 시점 GitHub 별은 약 12만 2천 개였습니다.
DESIGN.md는 Google Stitch가 내놓은 형식으로, AI 에이전트가 읽고 화면을 일관되게 만들도록 디자인 시스템을 평범한 텍스트로 적은 문서입니다. 피그마 내보내기나 JSON 스키마가 필요 없고 프로젝트 루트에 두기만 하면 됩니다. README는 AGENTS.md가 프로젝트를 어떻게 만들지 정하고, DESIGN.md는 어떻게 보일지 정한다고 설명합니다.
분야별 구성
| 분야 | 예시 브랜드 |
|---|---|
| AI·LLM 플랫폼 | Claude, Mistral AI, Ollama, ElevenLabs |
| 개발 도구 | Cursor, Vercel, Raycast, Warp |
| 백엔드·DB | Supabase, MongoDB, Sentry, ClickHouse |
| 생산성·SaaS | Linear, Notion, Cal.com, Zapier |
| 디자인 도구 | Figma, Framer, Webflow, Miro |
| 핀테크·암호화폐 | Stripe, Revolut, Wise, Coinbase |
| 커머스 | Airbnb, Nike, Starbucks, Shopify |
| 미디어·소비자 기술 | Apple, Spotify, Pinterest, SpaceX |
| 자동차 | Tesla, BMW, Ferrari, Lamborghini |
1990년대 웹을 재현한 Dell(1996), Nintendo.com(2001) 같은 복고 시리즈도 들어 있습니다.
DESIGN.md 한 장에 들어 있는 것
모든 파일이 Stitch 형식에 절을 더한 같은 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 | 색 요약표, 바로 쓰는 프롬프트 |
애플 파일은 482줄입니다. 맨 위 설정 부분에 primary 색 #0066cc, 본문 글자색 #1d1d1f, 히어로 제목 SF Pro Display 56px·굵기 600·자간 -0.28px처럼 값이 적혀 있습니다. 색과 글꼴이 숫자로 정해져 있어서 AI가 짐작으로 채울 부분이 줄어듭니다.
설치 방법
공식 안내
README의 사용법은 두 단계입니다. 원하는 브랜드의 DESIGN.md를 프로젝트 루트에 복사하고, AI 에이전트에게 그 파일을 쓰라고 말합니다. 공식 사이트 getdesign.md의 브랜드 페이지에는 명령 한 줄도 붙어 있습니다.
npx getdesign@latest add apple

프로젝트 루트에서 실행한 뒤 AI에게 DESIGN.md를 기준으로 화면을 만들라고 하라는 설명이 있습니다. 이 명령은 제가 직접 실행해 보지 않았습니다.
제가 한 방법: 스킬로 감싸기
프로젝트마다 파일을 찾아 복사하기 번거로워서 84개를 통째로 Claude Code 스킬 폴더에 넣었습니다.
git clone https://github.com/VoltAgent/awesome-design-md
mkdir -p ~/.claude/skills/brand-design-md
cp -r awesome-design-md/design-md ~/.claude/skills/brand-design-md/library
그다음 같은 폴더에 SKILL.md를 직접 썼습니다. Claude Code는 SKILL.md 맨 위 description을 보고 스킬을 꺼낼지 정하기 때문에, 여기에 "애플 스타일로", "테슬라 느낌", "OO 브랜드처럼" 같은 한국어 호출 문구를 적었습니다. 본문 규칙은 짧습니다.
- 사용자가 말한 브랜드를 library 폴더 이름에서 찾는다. 없으면 가장 가까운 2~3곳을 제안한다.
- 그 DESIGN.md를 전부 읽고 색·글꼴·간격·버튼·그림자 규칙을 결과물에 적용한다.
- 로고·상표·브랜드명은 쓰지 않고 분위기만 빌린다.

사용 예시
스킬을 넣은 뒤에는 평소처럼 요청하면 됩니다.
동네 카페 소개 페이지를 스타벅스 느낌으로 만들어 줘. 로고와 이름은 쓰지 말고.
SKILL.md 규칙대로라면 Claude는 library/starbucks/DESIGN.md를 먼저 읽고 그 색과 글꼴 규칙으로 페이지를 만듭니다. README 설명에 따르면 스타벅스 파일은 네 단계 초록 체계와 따뜻한 크림색 바탕, 전용 서체 SoDoSans를 다룹니다. 서체는 브랜드 전용이라 실제 페이지에서는 비슷한 무료 글꼴로 바꿔야 합니다. 목록에 없는 브랜드를 말하면 비슷한 곳 2~3곳을 먼저 제안하게 해 두었습니다.
주의할 점
- 저장소와 사이트의 수가 다릅니다. 저장소는 84개, getdesign.md 카탈로그는 550개 이상으로 표시됩니다. 저장소에 없는 브랜드는 사이트에서 따로 받아야 합니다.
- README는 브랜드마다 preview.html과 preview-dark.html이 들어 있다고 적고 있지만, 제가 받은 사본의 브랜드 폴더에는 DESIGN.md와 README.md 두 파일만 있었습니다. 그 README.md도 자세한 내용은 getdesign.md로 옮겼다는 안내 한 줄입니다. 색 견본을 눈으로 보려면 사이트를 열어야 합니다.
- 공개된 CSS 값을 뽑아 정리한 분석 문서이고, 각 브랜드와 관계없다고 저장소와 사이트가 밝히고 있습니다. 상표와 로고까지 가져다 쓰면 사칭이 됩니다.
- 이미 자기 디자인 기준이 있는 사이트라면 기준을 덮어쓰지 말고 색을 고를 때만 참고하는 편이 안전합니다. 저도 SKILL.md에 그렇게 적었습니다.
비슷한 도구와 차이
| 도구 | 주는 것 | 형태 |
|---|---|---|
| awesome-design-md | 브랜드별 디자인 규칙(색·글꼴·간격 값) | 마크다운 파일, MIT |
| getdesign.md | 같은 형식의 DESIGN.md 카탈로그, 미리보기, 맞춤 제작 요청 | 웹사이트, npx 명령 |
| Google Stitch | DESIGN.md 형식을 만든 곳, 화면 생성 도구 | 웹 서비스 |
| Mobbin MCP | 실제 앱 화면 캡처 검색 | MCP 서버, 유료 플랜 |

DESIGN.md는 규칙을 글로 주고, Mobbin 같은 화면 레퍼런스는 그림을 줍니다. 화면 구조를 처음 정할 때는 화면 레퍼런스가, 정해 둔 구조에 색과 글꼴을 입힐 때는 DESIGN.md가 맞습니다.
저장소: https://github.com/VoltAgent/awesome-design-md
공식 사이트: https://getdesign.md/
'claude' 카테고리의 다른 글
| canvas-design 스킬 사용법: Claude로 포스터와 카드를 PNG·PDF 한 장으로 (0) | 2026.10.17 |
|---|---|
| prompts.chat Claude Code 플러그인 설치와 MCP 도구 10개 사용법 (0) | 2026.10.17 |
| gstack 설치와 사용법: Claude Code를 가상 개발팀으로 쓰는 Garry Tan의 스킬 묶음 (0) | 2026.10.17 |
| InspoAI MCP — Claude에서 화면 생성·브랜드 추출까지, 도구 전체와 연결법 (무료 월 15콜) (0) | 2026.10.16 |
| 힉스필드(Higgsfield) 커넥터 + /katana 완전 정리 — 클로드에서 이미지·영상 만들고 편집 영상 재현하기 (0) | 2026.10.14 |



























