Awesome Design.MD: AI 에이전트를 위한 디자인 시스템 텍스트 형식의 표준화
AI 코딩 에이전트가 읽는 마크다운 디자인 시스템 형식 DESIGN.md의 구조, VoltAgent의 awesome-design-md 컬렉션 구성과 워크플로, 성장 지표를 정리한다.
2026-08-14 · 최초 발행 2026-04-11
Figma도 JSON도 없이 텍스트 하나로
AI 코딩 에이전트가 일관된 UI를 생성하려면 디자인 시스템을 이해해야 한다. VoltAgent의 awesome-design-md 프로젝트는 Figma나 JSON 스키마 없이 순수 마크다운만으로 디자인 시스템을 정의하여 LLM이 직접 읽고 적용할 수 있도록 한 오픈소스 컬렉션이다. 공개 10일 만에 GitHub 스타 35,000개를 돌파하며 가장 빠르게 성장한 awesome 리스트로 기록되었다.
DESIGN.md는 Google Stitch가 도입한 개념으로, 디자인 시스템을 순수 텍스트로 표현하는 마크다운 파일이다. Figma 익스포트, JSON 스키마, 전용 도구 없이 마크다운 하나로 디자인 언어를 전달하며, LLM이 가장 잘 읽는 형식이 마크다운이라는 점에서 출발했다. 프로젝트 루트에 DESIGN.md를 놓으면 AI 코딩 에이전트가 자동으로 참조하고, 개발자가 직접 편집하고 감사할 수 있는 투명한 디자인 컨텍스트가 된다.
브랜드의 시각 언어를 담는 표준 섹션
각 DESIGN.md는 9개의 표준 섹션으로 구성되어 브랜드의 시각 언어를 완전하게 기술한다.
Visual Theme는 전체적인 시각 방향성과 브랜드 톤을 정의하고, Color Palette & Roles는 주요 색상·보조 색상·의미론적 색상 역할을 매핑한다. Typography Rules는 폰트 패밀리·크기 체계·행간·자간 규칙을, Component Stylings는 버튼·카드·입력 필드 등 개별 컴포넌트의 스타일을 명세한다. Layout Principles는 그리드 시스템·여백·정렬 원칙을, Depth & Elevation은 그림자·z-index·레이어 계층 구조를 다룬다. Do's and Don'ts는 디자인 일관성을 위한 권장·금지 사항을, Responsive Behavior는 브레이크포인트별 반응형 동작 규칙을 담는다. Agent Prompt Guide는 AI 에이전트가 디자인을 적용할 때 참조하는 가이드다.
유명 사이트를 역공학한 컬렉션
VoltAgent는 55개 이상의 유명 웹사이트에서 역공학(reverse-engineering)으로 디자인 시스템을 추출하였다. 각 엔트리는 DESIGN.md, preview.html, preview-dark.html 3개 파일로 구성되며, Apple, Notion, GitHub, Stripe, Vercel 등 개발자 친화 사이트를 포함한다. 다크모드 프리뷰를 별도 제공해 양방향 테마를 지원하며, 일본어 UI 확장판(awesome-design-md-jp)도 커뮤니티에서 별도 제작됐다.
| 카테고리 | 브랜드 예시 |
|---|---|
| 테크 플랫폼 | Apple, GitHub, Vercel, Supabase |
| SaaS | Notion, Linear, Figma, Stripe |
| 미디어 | Medium, Substack, Spotify |
| 커머스 | Shopify, Gumroad |
| 개발 도구 | Tailwind, Shadcn, Radix |
브랜드를 고르고, 참조시키고, 검토하는 흐름
Google Stitch는 DESIGN.md를 네이티브로 지원하는 AI UI 빌더이고, Claude Code는 프로젝트 루트의 마크다운 파일을 자동 참조한다. Cursor는 컨텍스트 파일로 DESIGN.md를 활용할 수 있으며, Copilot이나 Codex는 시스템 프롬프트에 DESIGN.md 내용을 주입할 수 있다.
마크다운이라서 갖는 이점
DESIGN.md는 마크다운이라 모든 LLM과 도구에서 호환되는 이식성(Portability), AI가 받는 컨텍스트를 개발자가 직접 확인할 수 있는 감사 가능성(Auditability), Git으로 디자인 시스템 변경 이력을 추적하는 버전 관리, JSON 스키마나 Figma 익스포트 대비 파일 크기를 최소화하는 경량성, 커스텀 섹션 추가로 프로젝트 고유 디자인 규칙을 정의할 수 있는 확장성을 갖는다.
열흘 만에 가장 빠르게 자란 리스트
공개 10일 만에 GitHub 스타 35,000개, 포크 4,400개를 기록하며 GitHub 역사상 가장 빠르게 성장한 awesome 리스트가 됐다. 일본어 확장판(awesome-design-md-jp)이 커뮤니티에서 자발적으로 제작됐고, OSS Insight는 이를 "2026년 가장 빠른 디자인 표준"으로 선정했다.
디자인 컨텍스트 전달이라는 절실한 문제
DESIGN.md는 디자인 시스템을 AI 에이전트가 직접 소비할 수 있는 마크다운 형식으로 표준화한 접근 방식이다. Figma 연동이나 복잡한 도구 체인 없이 텍스트 파일 하나로 브랜드 일관성을 확보할 수 있다는 점에서 실용적 가치가 높다. awesome-design-md의 폭발적 성장은 AI 기반 UI 생성 워크플로우에서 "디자인 컨텍스트 전달"이라는 문제가 얼마나 절실했는지를 방증한다.