AI에게 UI를 맡기면 색상 코드는 맞는데, 왜 그 색상인지는 모른 채 만들어냅니다. 브랜드 가이드라인은 머릿속에만 있고, 에이전트는 그 맥락 없이 그냥 “그럴듯하게” 추측하죠.

Google Labs가 AI 디자인 도구 Stitch에서 사용하던 DESIGN.md 포맷의 초안 명세를 오픈소스로 공개했습니다. AI 에이전트가 디자인 시스템의 규칙과 의도를 명시적으로 파악할 수 있도록 설계된 마크다운 파일 형식으로, 이제 Stitch 외의 어떤 도구나 플랫폼에서도 사용할 수 있습니다.

출처: Stitch app’s DESIGN.md format is now open-source for designers – Google Blog

“추측”이 아니라 “이해”

지금까지 AI 에이전트가 UI를 만들 때 겪는 가장 큰 문제는 맥락의 부재입니다. 색상 코드 #B8422E가 단순한 빨간색인지, 브랜드의 유일한 CTA 컬러인지 에이전트는 알 수 없습니다. 접근성 규칙이 어떻게 적용되어야 하는지, 어떤 컴포넌트가 어떤 상황에 맞는지도 마찬가지입니다. 결국 에이전트는 매번 처음부터 디자인을 새로 만들 수밖에 없습니다.

DESIGN.md는 이 맥락을 명시적으로 기록하는 파일입니다. 에이전트가 디자인 결정을 내릴 때 추측 대신 근거를 갖고 선택할 수 있게 됩니다.

2층 구조: 토큰과 의도

DESIGN.md 파일은 두 레이어로 구성됩니다.

1. YAML 프론트매터 — 색상, 타이포그래피, 간격 같은 디자인 토큰을 기계가 읽을 수 있는 형태로 정의합니다. #1A1C1E처럼 정확한 값을 담고 있습니다.
2. 마크다운 본문 — 토큰이 왜 그 값인지, 어떻게 써야 하는지 사람이 쓰는 언어로 설명합니다. “Primary는 헤드라인과 핵심 텍스트에 사용하는 딥 잉크 컬러”처럼요.

토큰은 AI가 따를 정확한 값을 제공하고, 본문은 그 값을 적용하는 맥락을 알려줍니다. 이 두 레이어가 결합되면 에이전트는 단순히 규칙을 따르는 것을 넘어, 규칙의 의도까지 반영한 UI를 만들 수 있습니다.

접근성 검증까지 내장

DESIGN.md에는 CLI 도구도 함께 제공됩니다. lint 명령어 하나로 파일 구조를 검증하고, WCAG 접근성 기준을 충족하는지 대비율을 자동으로 확인합니다. 두 버전의 디자인 시스템을 비교해 어떤 토큰이 바뀌었는지 추적하는 diff 기능도 있습니다.

에이전트가 컴포넌트의 배경색과 텍스트 색 조합을 선택할 때, WCAG AA 기준(4.5:1 대비율)을 충족하는지 스스로 검증할 수 있다는 의미입니다.

오픈소스화의 의미

이번 오픈소스화의 핵심은 ‘플랫폼 독립성’입니다. DESIGN.md는 Stitch 전용 포맷이 아니라 어떤 AI 코딩 도구에서도 쓸 수 있는 공개 명세가 되는 것을 목표로 합니다.

README.md가 사람 개발자에게 프로젝트의 맥락을 알려주듯, DESIGN.md는 AI 에이전트에게 디자인 시스템의 맥락을 알려주는 파일이 될 수 있습니다. 현재 alpha 버전으로 명세는 계속 발전 중이며, GitHub에서 기여도 받고 있습니다.

참고자료:

• google-labs-code/design.md – GitHub