Google이 DESIGN.md를 풀었길래 한참 봤음
Google Stitch가 4월에 오픈소스로 푼 DESIGN.md 스펙. AI 코딩 에이전트한테 브랜드 톤 입히려는 시도다. getdesign.md에 모인 70여 개 사이트 추출본 둘러보고 든 생각, 그리고 풀스택 입장에서 정말 쓸모 있을지에 대한 메모.
Geek news 보다가 getdesign.md 링크가 올라와 있길래 들어가봤다. 첫인상은 "또 무슨 마크다운 컨벤션이냐" 였는데, 한참 뒤지다 보니 의외로 흥미로운 흐름이 있어서 정리해둠.
요는 이거다. Google Stitch가 도입한 DESIGN.md 라는 평문 마크다운 컨벤션이 있고, 이걸 AI 코딩 에이전트(Claude Code, Cursor, Copilot 같은 거)한테 컨텍스트로 던지면 그 디자인 룰 그대로 따라서 UI를 짠다는 거. 그리고 VoltAgent 팀이 Vercel·Stripe·Linear·Notion·Apple 같은 유명 사이트 70여 개의 DESIGN.md를 추출해서 컬렉션으로 풀어둔 게 getdesign.md.
DESIGN.md가 뭔데
Google Labs 블로그 보면 4월 21일에 정식 spec을 Apache 2.0으로 풀었음. 핵심 포지셔닝은 "README.md가 사람·코드용 문서면, DESIGN.md는 AI 디자인 에이전트용 문서다" 이거.
파일 구조 자체는 단순함. YAML front matter로 디자인 토큰(색상 hex, 폰트 패밀리, spacing scale, border radius 같은 거)을 박고, 그 아래 마크다운 본문으로 "왜 이렇게 정했는지" 같은 컨텍스트를 글로 풀어쓰는 식. LLM이 가장 잘 읽는 포맷이 결국 markdown이다 보니, Figma export 같은 별도 툴링 없이 그냥 프로젝트 루트에 던져두면 끝.
VoltAgent 쪽 README에 정리된 표가 깔끔하던데 그대로 가져와보면 이런 그림임:
| 파일 | 누가 읽나 | 뭘 정의 |
|---|---|---|
AGENTS.md | 코딩 에이전트 | 프로젝트를 어떻게 만들지 |
DESIGN.md | 디자인 에이전트 | 프로젝트가 어떻게 보여야 하는지 |
쌍으로 묶는 발상이 영리함. 이미 AGENTS.md(또는 CLAUDE.md, .cursorrules 같은 변종)는 자리잡은 컨벤션인데, 거기에 디자인 축을 하나 더 끼워넣은 거.
getdesign.md를 한참 둘러본 느낌
VoltAgent 팀이 만든 awesome-design-md 레포에 들어가면 사이트별로 폴더가 있고, 각 폴더에 DESIGN.md 와 preview.html(라이트/다크) 가 들어 있음. 직접 npm으로 깔아본 건 아니고 그냥 README랑 사이트 미리보기만 훑은 수준인데, 분류가 꽤 잘 되어 있음.
- AI/ML 쪽: Claude, Cohere, Mistral, Ollama, xAI...
- 개발툴: Vercel, Cursor, Linear, Supabase, Sentry...
- 컨슈머: Apple, Notion, Figma, Spotify, Pinterest...
- 자동차·금융 같은 비개발 카테고리도 있음 (BMW, Ferrari, Mastercard...)
설치는 그냥 npx getdesign@latest add vercel 식. 프로젝트 루트에 파일 떨어지고, 그걸 AI 에이전트한테 "이 DESIGN.md 보고 랜딩페이지 만들어줘" 하면 끝나는 구조라고 적혀 있다. 솔직히 컨셉 자체는 깔끔함.
왜 이게 쓸모 있어 보이냐
여기까진 공식 발표 정리고, 여기서부턴 내 의견. Next.js로 프론트 자주 짜는 입장에서 보면, AI 코딩 에이전트로 UI 만들 때 제일 거지같은 게 디자인 톤 일관성임.
- Cursor한테 "랜딩페이지 만들어줘" 하면 매번 generic shadcn 클론이 나옴
- "Vercel 스타일로" 같은 추상 명령은 십중팔구 빗나감 (모델이 머릿속으로 지어낸 Vercel일 뿐임)
- 직접 폰트 픽셀, 컬러 hex, spacing 다 prompt에 박는 건 매번 짜증남
- 컴포넌트 5개쯤 짜다 보면 자기네끼리 톤 안 맞음
이걸 "브랜드 룰을 한 파일에 못 박고, 매 프롬프트마다 그 파일 참고하게 하는" 발상으로 푸는 거. README가 코드 컨텍스트 잡듯이 DESIGN.md가 디자인 컨텍스트를 잡음.
내가 지금 운영하는 aickyway.com 도 그렇고 dev 서브도메인도 그렇고, AI 사이트 자주 손보는데 — 다음 개편 때 한번 자체 DESIGN.md 만들어볼 만할 듯하다는 생각이 들었음. 적어도 색상·spacing scale·타이포 위계 정도는 묶어둘 가치가 있어 보임.
근데 너무 좋게만 볼 건 아님
getdesign.md 관련 글들 둘러보다가 Threads 쪽에 흐르던 댓글 하나가 인상적이었음. 정확한 워딩까진 다시 못 찾겠는데 대충 이런 톤이었던 듯. "md 파일 하나로 똑똑해지진 않는다. 잘 되면 일관성이 좀 좋아질 뿐이고, 못 되면 오히려 더 멍청해짐(content rot)." 좀 시니컬한데 일리 있음.
직접 써본 건 아니라 단정은 못 하겠고, 둘러본 자료 기준으로 의심스러운 부분 몇 개:
1. 토큰 일관성과 컴포넌트 일관성은 다른 문제임
색상이랑 폰트 사이즈 lock 한다고 카드 컴포넌트가 일관되게 나오는 건 아님. 같은 토큰 써도 padding, border, shadow 조합이 매번 다르게 나올 가능성 큼. Stitch 공식 spec엔 component styling 섹션도 있긴 한데, 그게 텍스트 설명만으로 정확히 옮겨질지는 의문.
2. 추출본은 결국 "흉내"라는 한계
getdesign.md 디스클레이머에도 솔직히 적혀 있음 — "공식 디자인 시스템 아님. AI 에이전트가 비슷한 톤 잡게 도와주는 출발점." 즉 Vercel DESIGN.md를 깐다고 진짜 Vercel처럼 나오는 건 아니고, "Vercel스러운 어떤 것"이 나옴. 라이센스 회색 영역도 있고. 실제 프로덕트에 그대로 박는 건 좀 그럴 듯.
3. 한글 사이트는 또 별도 문제
이건 원문에 안 나오는 부분인데, 한국어 UI 만들 때 폰트 톤이 영문이랑 완전히 다른 동물임. Pretendard 쓸지, 노토 산스 쓸지, 자간·행간 미세 조정은 어떻게 할지 — DESIGN.md에 hex랑 px만 박아둔다고 한글 polish가 자동으로 되진 않음. 추출본들 보면 죄다 영문 사이트 기준이라 한국 컨텍스트에선 한 단계 더 손봐야 할 듯.
4. 또 하나의 컨벤션 피로
이건 잡담 가까운데, 요즘 마크다운 표준화 시도가 너무 많음. AGENTS.md, CLAUDE.md, SKILL.md, .cursorrules, 이제 DESIGN.md... LLM이 가장 잘 읽는 포맷이 markdown이라는 건 알겠는데, 프로젝트 루트가 점점 메타 파일 덤프 같아지는 게 좀 우습기도 함. 마크다운 한 번 더 추가될 때마다 "AI 시대 인터페이스 표준이 결국 평문이다" 같은 트윗이 따라붙는 것도 이젠 좀 식상해진 느낌.
그래도 결론은
회의적인 부분 잔뜩 적었지만, 그래도 방향성 자체는 맞다고 봄. AI 코딩이 본격화되면서 "브랜드 톤을 어떻게 코드에 lock 하느냐" 가 풀스택 워크플로우의 진짜 통점인데, DESIGN.md는 그걸 마크다운 한 장으로 푸는 가장 깔끔한 시도임. Anthropic도 비슷한 방향(Claude 기반 디자인 에이전트)으로 움직이고 있다는 보도가 있고, Antigravity + Stitch MCP 연동 codelab 도 풀려 있는 거 보면 산업 전체가 같은 문제에 수렴하는 중인 듯하다.
당분간은 "기존 디자인 시스템을 대체" 하기보단 "AI 에이전트한테 컨텍스트 주는 보조 레이어" 정도로 정착할 듯. Figma는 Figma대로 살아있고, DESIGN.md는 코드 생성 핸드오프 단계에서 끼는 그림. 둘 다 가지는 하이브리드.
다음 글에선 dev.aickyway.com 자체 DESIGN.md를 직접 한번 만들어보고 정리해볼 생각. 그땐 진짜 써본 후기로 돌아옴.
댓글
NEXT_PUBLIC_GISCUS_*환경변수 구성 필요)