awesome-design-md: AI 코딩 에이전트를 위한 DESIGN.md 파일 컬렉션
awesome-design-md: AI 코딩 에이전트를 위한 DESIGN.md 파일 컬렉션
AI 코딩 도구로 UI를 만들 때 가장 흔한 불만이 있습니다. "왜 화면마다 색상이 다르고, 버튼 스타일이 제각각일까?" 이 문제를 해결하기 위해 등장한 것이 바로 DESIGN.md입니다. 프로젝트 루트에 마크다운 파일 하나를 넣으면, AI 코딩 에이전트가 일관된 디자인 규칙을 자동으로 참조합니다. awesome-design-md는 Stripe, Linear, Claude 등 55개 이상 실제 기업 웹사이트의 디자인 시스템을 DESIGN.md 형식으로 모아놓은 오픈소스 컬렉션입니다.
DESIGN.md란 무엇인가
DESIGN.md는 Google Stitch가 2026년 3월에 도입한 새로운 개념입니다. 프로젝트의 디자인 시스템을 마크다운 파일로 정의하는 방식으로, README.md가 프로젝트 설명서라면 DESIGN.md는 프로젝트 디자인 설명서에 해당합니다.
기존 디자인 시스템 관리 방식과 비교하면 차이가 명확합니다.
| 방식 | AI 호환성 | 빌드 의존 | 버전 관리 |
|---|---|---|---|
| Figma 파일 | 낮음 (AI가 직접 읽을 수 없음) | 없음 | 별도 버전 관리 |
| JSON 디자인 토큰 | 중간 (파싱 필요) | 빌드 파이프라인 필수 | Git 가능 |
| DESIGN.md | 높음 (LLM이 자연어로 소비) | 불필요 | Git diff 확인 가능 |
DESIGN.md의 핵심 장점은 LLM이 가장 잘 이해하는 포맷인 마크다운을 사용한다는 점입니다. 프로젝트 루트에 파일을 놓기만 하면 Claude Code, Cursor, Copilot, Gemini 등 모든 AI 코딩 에이전트가 자동으로 읽어 일관된 UI를 생성합니다.
awesome-design-md 레포지토리 소개
awesome-design-md는 VoltAgent이 2026년 3월 31일 출시한 GitHub 레포지토리입니다. 출시 3일 만에 4,385 스타를 획득했고, 2026년 4월 현재 24,200개 이상의 스타를 기록하고 있습니다.
이 레포지토리에는 55개 이상 실제 기업 웹사이트의 디자인 시스템이 DESIGN.md 형식으로 정리되어 있습니다.
카테고리별 수록 기업
- AI/ML: Claude, Mistral AI, ElevenLabs, Ollama, Replicate, RunwayML, xAI, VoltAgent
- 개발 도구: Cursor, Linear, Vercel, Raycast, Resend, Sentry, Supabase, Warp
- 인프라: Stripe, MongoDB, HashiCorp, ClickHouse
- 디자인: Figma, Framer, Notion, Webflow, Airtable
- 핀테크: Coinbase, Revolut, Wise, Kraken
- 엔터프라이즈: Apple, Spotify, Uber, IBM, NVIDIA, SpaceX
- 자동차: BMW, Ferrari, Lamborghini, Tesla, Renault
각 DESIGN.md의 구조
모든 DESIGN.md 파일은 9개 섹션으로 구성됩니다.
- Visual Theme & Atmosphere - 전체적인 시각 분위기 정의
- Color Palette & Roles - 색상 팔레트와 각 색상의 역할
- Typography Rules - 타이포그래피 체계
- Component Stylings - 버튼, 카드, 폼 등 컴포넌트 스타일
- Layout Principles - 레이아웃과 간격 규칙
- Depth & Elevation - 그림자, 레이어 체계
- Do's and Don'ts - 디자인 허용/금지 사항
- Responsive Behavior - 반응형 동작 규칙
- Agent Prompt Guide - AI 에이전트를 위한 프롬프트 가이드
각 기업별로 DESIGN.md 파일과 함께 preview.html, preview-dark.html 미리보기 파일도 제공됩니다.
바이브 코딩의 디자인 슬럽 문제 해결
AI를 활용한 "바이브 코딩"이 확산되면서 디자인 일관성 문제가 부각되고 있습니다. AI가 생성한 UI는 화면마다 다른 색상, 랜덤 간격, 일관성 없는 버튼으로 이른바 "디자인 슬럽(Design Slop)" 현상이 발생합니다.
DESIGN.md는 AI가 매번 동일한 디자인 규칙을 참조하게 함으로써 디자인 슬럽 문제를 근본적으로 해결합니다.
DESIGN.md가 이 문제를 해결하는 방식은 다음과 같습니다.
- 일관성: 색상, 타이포, 간격 규칙이 명문화되어 AI가 화면마다 동일한 규칙을 적용
- 도구 무관 호환: Claude Code, Cursor, Copilot, Gemini, Codex 등 모든 AI 코딩 도구에서 자동 인식
- 전문 품질: Stripe나 Linear 수준의 DESIGN.md를 복사하면 해당 수준의 UI가 자동 생성
- 버전 관리: Git에서 diff 확인이 가능해 디자이너와 개발자가 같은 PR에서 리뷰 가능
사용 방법
awesome-design-md를 프로젝트에 적용하는 방법은 매우 간단합니다.
방법 1: 레포에서 복사
- awesome-design-md 레포지토리에서 원하는 기업의 DESIGN.md 확인
- 해당 파일을 프로젝트 루트 디렉토리에 복사
- AI 코딩 에이전트에게 "이 디자인에 맞게 만들어줘" 지시
- 일관된 디자인의 UI가 자동 생성
방법 2: Google Stitch로 직접 추출
- stitch.withgoogle.com 접속
- 마음에 드는 웹사이트 URL 입력
- DESIGN.md가 자동으로 추출
- 프로젝트에 적용
Google Stitch와 DESIGN.md 생태계
Google Stitch는 AI UI 디자인 도구로, DESIGN.md 개념을 도입한 주체입니다. 임의의 웹사이트에서 디자인 시스템을 마크다운 형식으로 추출할 수 있어, awesome-design-md에 수록되지 않은 사이트의 디자인도 활용할 수 있습니다.
Figma의 State of the Designer 2026 보고서에 따르면, 디자이너의 72%가 생성형 AI 도구를 사용하고 있으며, 98%가 사용량이 증가하고 있다고 응답했습니다. 디자인 지식이 Figma 파일에서 마크다운 파일로 이동하는 흐름은 업계 전반의 트렌드입니다.
이 트렌드의 핵심을 한 문장으로 요약하면, "가장 핫한 새 디자인 도구는 영어(자연어)"라는 것입니다. 전문 디자이너 없이도 전문적인 소프트웨어를 만드는 장벽이 0에 근접하고 있습니다.
기존 디자인 토큰과의 차이
JSON 기반 디자인 토큰(Design Tokens)은 이미 존재하는 방식이지만, DESIGN.md와는 근본적인 차이가 있습니다.
| 비교 항목 | JSON 디자인 토큰 | DESIGN.md |
|---|---|---|
| 형식 | JSON/YAML 구조화 데이터 | 자연어 마크다운 |
| AI 소비 방식 | 파싱 후 해석 필요 | 프롬프트 컨텍스트로 직접 소비 |
| 빌드 파이프라인 | Style Dictionary 등 필요 | 불필요 |
| 포함 정보 | 색상, 간격 등 수치 값 | 수치 + 분위기 + Do/Don't + AI 프롬프트 가이드 |
| 디자이너 참여 | Figma → 토큰 변환 과정 필요 | 마크다운으로 직접 편집 가능 |
| 학습 곡선 | 토큰 명세 이해 필요 | 마크다운 읽기만 가능하면 됨 |
DESIGN.md의 가장 큰 차별점은 "Agent Prompt Guide" 섹션입니다. 이 섹션은 AI 에이전트에게 디자인 의도를 자연어로 설명하는 가이드로, 색상 코드나 간격 값만으로는 전달할 수 없는 디자인 철학과 분위기를 포함합니다.
자주 묻는 질문
Q: DESIGN.md를 직접 만들 수도 있나요?
네, 마크다운 파일이기 때문에 누구나 직접 작성할 수 있습니다. 9개 섹션 구조를 따르면 됩니다. 다만 awesome-design-md에서 비슷한 스타일의 기업 파일을 가져와 수정하는 것이 더 효율적입니다.
Q: 어떤 AI 코딩 도구에서 지원하나요?
Claude Code, Cursor, GitHub Copilot, Gemini, OpenAI Codex 등 프로젝트 루트의 마크다운 파일을 컨텍스트로 읽는 모든 AI 코딩 도구에서 작동합니다. 별도 플러그인이나 설정이 필요 없습니다.
Q: 기존 프로젝트에도 적용할 수 있나요?
네, DESIGN.md를 프로젝트 루트에 추가한 후 AI에게 기존 컴포넌트를 DESIGN.md 규칙에 맞게 리팩토링하도록 지시하면 됩니다.
Q: Google Stitch와 awesome-design-md 중 어떤 것을 써야 하나요?
목적에 따라 다릅니다. awesome-design-md는 이미 검증된 55개 이상 기업의 DESIGN.md를 바로 사용할 수 있고, Google Stitch는 레포에 없는 사이트의 디자인을 직접 추출할 때 유용합니다. 둘을 함께 사용하는 것이 가장 효과적입니다.
마무리
DESIGN.md는 AI 코딩 시대의 디자인 일관성 문제를 마크다운 파일 하나로 해결하는 접근법입니다. awesome-design-md 레포지토리는 Stripe, Linear, Claude 등 55개 이상 기업의 검증된 디자인 시스템을 무료로 제공하며, Google Stitch를 통해 원하는 사이트의 DESIGN.md를 직접 추출할 수도 있습니다.
AI 코딩을 하면서 디자인 일관성 때문에 고민이 있었다면, 프로젝트 루트에 DESIGN.md 파일 하나를 추가해 보세요.
