"AI한테 디자인 시스템을 이해시키려면 Figma 토큰 export 하고, JSON 변환하고, 플러그인 깔고, 또 핸드오프하고…" — 작년까지의 풍경이에요. 지금은 markdown 한 장이면 끝나요. 2026년 4월 21일, Google이 DESIGN.md 사양을 공식 오픈소스화했어요. Stitch를 만들면서 내부에서 쓰던 포맷인데, 이제 누구나 자기 프로젝트 루트에 떨어뜨려놓으면 Claude·Cursor·Stitch 같은 AI 에이전트가 그걸 읽고 일관된 UI를 만들어내요. VoltAgent가 만든 awesome-design-md 컬렉션은 4월 출시 한 달 만에 GitHub 68.7K 스타를 달성했고, Linear/Apple/Stripe/Claude/Notion/Vercel 등 70개 브랜드의 DESIGN.md가 통째로 공개돼 있어요.
이게 뭔데?
DESIGN.md는 디자인 시스템을 markdown 한 장에 담은 파일이에요. AGENTS.md(에이전트한테 코딩 방법을 알려주는 파일)의 디자인 짝이라고 보면 돼요. VoltAgent가 정리한 비교가 직관적이에요.
| 파일 | 읽는 주체 | 정의하는 것 |
|---|---|---|
| AGENTS.md | 코딩 에이전트 (Cursor·Claude Code·Codex 등) | 프로젝트를 어떻게 만들 것인가 |
| DESIGN.md | 디자인 에이전트 (Stitch·Claude Design 등) | 프로젝트가 어떻게 보여야 하는가 |
"Markdown은 LLM이 가장 잘 읽는 포맷이라서 파싱·설정이 필요 없어요. 그냥 프로젝트 루트에 떨어뜨리면 끝." — VoltAgent README.
Google은 DESIGN.md를 Stitch(자기네 vibe design 도구) 내부에서 1년 전부터 썼어요. 그러다 외부 개발자들이 자기 버전을 만들고, 회사들이 자기 markdown을 공유하기 시작했어요. 4월 21일에 Google이 표준 사양을 공식적으로 오픈소스 풀어버린 거고요. 이 시점부터 "각자가 적당히 만든 markdown"이 "Google이 보증하는 표준"으로 격상됐어요.
- 두 레이어 구조
위는 YAML 토큰(hex, 폰트 크기, 간격 등 — 기계가 읽음). 아래는 markdown 산문(이걸 왜 그렇게 정했는지 — 사람과 에이전트의 판단용). "무엇"과 "왜"를 분리. - 9개 표준 섹션
Visual Theme & Atmosphere, Color Palette, Typography Rules, Component Stylings, Layout Principles, Depth & Elevation, Do's/Don'ts, Responsive Behavior, Agent Prompt Guide. - 두 종류의 미리보기
각 DESIGN.md에는 preview.html(라이트)과 preview-dark.html(다크) 두 개의 시각 카탈로그가 같이 들어 있어요. 색·타입·버튼·카드를 한눈에 보게.
실제 awesome-design-md에 깔린 70개 라인업이 압도적이에요. AI/LLM에 Claude·Cohere·ElevenLabs·Mistral·Ollama·Replicate·xAI. 개발자 도구에 Cursor·Vercel·Warp·Raycast. 백엔드에 PostHog·Supabase·Sentry·MongoDB. 디자인 도구에 Figma·Framer·Webflow. 핀테크에 Stripe·Coinbase·Revolut. 자동차까지 Ferrari·Lamborghini·Tesla. "Stripe 스타일로 만들어줘" 같은 모호한 지시 대신 stripe/DESIGN.md를 직접 던지는 거예요.
Figma 워크플로우랑 뭐가 다른 건데?
지난 1년 사이 디자인 시스템을 AI에 넘기는 방식이 여러 번 바뀌었어요. 현장에서 체감되는 차이를 정리하면 이래요.
| 단계 | Figma + MCP/플러그인 | DESIGN.md |
|---|---|---|
| 설치 | Figma 계정 + 플러그인/MCP 서버 + 인증 | 파일 1개를 프로젝트 루트에 복사 |
| 전송 비용 | 토큰 export, JSON 변환, 컨텍스트 윈도우 다 먹음 | 수백 줄 markdown — 컨텍스트 효율 압도적 |
| 도구 종속 | Figma 락인. 다른 에이전트는 못 읽음 | 플레인 텍스트. Claude·Cursor·Stitch 다 읽음 |
| 업데이트 | Figma 변경 → 재 export → 재배포 | git diff 한 줄, PR 리뷰로 바뀜 |
| '왜'의 보존 | 컴포넌트 이름·색상값만 — 의도 손실 | "Golden Retriever orange로 즐거운 활기를" 같은 prose 보존 |
디자인 시스템이 "파일 트리 안의 텍스트"가 됐기 때문에, code review·PR·git blame·branch가 그대로 적용돼요.
특히 의미 있는 게 "왜"의 보존이에요. 토큰만 export하면 hex code는 가는데 그 색을 왜 골랐는지 — "낙관적이고 신뢰감 있고 활동적인 브랜드 톤"이라는 맥락 — 가 사라져요. 새로운 컴포넌트, 예외 케이스, 예상 못 한 레이아웃 제약이 생겼을 때 에이전트가 판단할 근거가 없어지는 거예요. DESIGN.md의 markdown 절반이 정확히 이걸 담아요. "절대 요소를 빽빽하게 두지 말 것" 같은 지침은 토큰화될 수 없지만 결정에는 결정적이에요.
① 인터랙션·애니메이션은 아직 표준에 없음(prose로 적을 수 있지만 정형화 부족). ② 다국어 폰트 시스템(한·중·일 fallback) 같은 복잡한 룰은 markdown으로 표현하기 어려움. ③ Figma의 실제 픽셀 검증 워크플로우를 완전히 대체하지는 못함 — DESIGN.md는 "어떻게 보여야 하는가" 가이드, 픽셀 정합은 별도 단계 필요. ④ 70개 브랜드 컬렉션은 "공개 CSS에서 추출한 것"이라 원 브랜드와 100% 일치는 아니에요. 영감용·스타팅 포인트로 봐야 해요.
그리고 Stitch는 4월에 MCP 통합도 풀었어요. AI 코딩 에이전트(예: Anti-Gravity)가 Stitch 디자인을 보고 직접 레이아웃 수정 요청을 보내거나 디자인 변형을 자동 생성할 수 있어요. 양방향 피드백 루프인 거예요. DESIGN.md가 "포맷 표준화"를 끝냈고 MCP가 "도구 간 양방향 통신"을 풀었으니, 이제 디자인-코드 핸드오프가 사실상 사라지는 단계로 진입했어요.
그래서 어떻게 시작하면 되는데?
도입 비용이 거의 없어요. 30분이면 시작할 수 있는 단계로 정리하면 이래요.
- 레퍼런스 DESIGN.md 받기
getdesign.md 또는 github.com/voltagent/awesome-design-md에서 자기 프로덕트와 톤이 비슷한 브랜드의 DESIGN.md를 다운로드. Linear(미니멀 정밀), Stripe(보라 그라데이션 우아), Notion(따뜻한 미니멀), Vercel(블랙·화이트 정밀) 등이 인기. - 프로젝트 루트에 복사
그냥 DESIGN.md를 프로젝트 루트(README.md 옆)에 넣어요. 끝. 별도 인덱싱·플러그인 없음. - 에이전트한테 알리기
"DESIGN.md를 따라서 [기능]을 구현해줘"라고 말하면, Claude Code·Cursor·Stitch가 알아서 hex·폰트·간격을 적용해요. AGENTS.md에 한 줄 추가해두면 더 안정적이에요. - 자기 브랜드용으로 커스터마이즈
레퍼런스 DESIGN.md를 베이스로 색·폰트·톤을 바꿔요. Stitch DESIGN.md format 문서(stitch.withgoogle.com/docs)에 표준 9개 섹션이 정리돼 있어요. - git에 커밋해서 팀 공유
이게 진짜 가치가 나오는 단계. 디자인 시스템이 PR로 리뷰되고, branch로 실험되고, blame으로 추적돼요. 디자이너와 엔지니어가 같은 language로 말하기 시작하는 거예요.
한 가지 더 — 단순히 Figma export 대체로만 보면 작아요. 더 큰 그림은 "디자인 시스템 자체가 텍스트가 되면, AI 에이전트가 디자인 의사결정에 참여할 수 있다"는 점이에요. Department of Product 글에 인용된 Gokul(전 Google·Meta 프로덕트 리더)의 "디자인이 AI 첫 희생자"라는 말이 논쟁을 일으켰지만, 그 주장의 핵심은 "센트럴 디자인 시스템이 AI에 먹힐 수 있는 형태로 정리되면 디자이너 채용 백필이 줄 것"이에요. 동의 여부와 별개로, 디자인 시스템이 markdown으로 굳어가는 흐름은 멈추기 어려워 보여요.
