개요
Google Stitch는 Google Labs의 AI 기반 UI 디자인 도구이고, DESIGN.md는 그 안에서 디자인 시스템을 AI가 읽을 수 있는 텍스트 규격으로 다루기 위한 사양입니다.
핵심은 단순한 화면 생성기가 아니라, 디자인 규칙 자체를 마크다운으로 명세하고 AI가 그 규칙을 지속적으로 따르게 한다는 점입니다.
한 줄 요약
“Stitch의 DESIGN.md는 프롬프트로 디자인하는 수준을 넘어, 디자인 시스템을 AI와 개발자가 함께 읽는 실행 가능한 명세로 바꾸려는 시도다.”
Stitch는 무엇인가
기사 기준 Stitch는 다음 특성을 갖습니다.
- 텍스트, 이미지, 스케치, 음성으로 UI 생성
- 빠른 초안용 기본 모드와 더 깊은 설계를 위한 Thinking 모드
- 기존 스크린샷/스케치를 재구성하는 Redesign 모드
- 아이디어 탐색용 Ideate 모드
- 무한 AI 네이티브 캔버스와 보이스 캔버스 지원
즉, 스티치는 디자인 툴이라기보다 의도를 받아 인터페이스와 코드로 변환하는 AI 캔버스에 가깝습니다.
왜 DESIGN.md가 중요한가
생성형 디자인의 가장 큰 문제는 매번 조금씩 다른 결과가 나온다는 점입니다.
예:
- 버튼 색이 계속 달라짐
- 폰트 계층이 흔들림
- spacing, radius, elevation이 일관되지 않음
DESIGN.md는 이 문제를 해결하기 위해, 디자인 시스템을 LLM이 가장 잘 읽는 형식 중 하나인 Markdown + YAML로 규격화합니다.
즉, 감각적인 프롬프트 대신 구조화된 디자인 규칙을 줘서 일관성을 확보하려는 접근입니다.
구조
1. YAML 프런트 매터
기계가 읽는 디자인 토큰 층입니다.
- colors
- typography
- spacing
- border radius
- elevation
- 프로젝트명, 버전 등
단순한 색상값이 아니라 primary, secondary, surface, error처럼 시맨틱 역할을 주는 점이 중요합니다.
2. Markdown 본문
인간의 의도와 운영 규칙을 설명하는 층입니다.
- 개요
- 색상 가이드라인
- 타이포그래피 원칙
- 레이아웃/간격 규칙
- 컴포넌트 사용 지침
- Do / Don’t
예를 들어 “주색상은 CTA에만 쓰고 배경에는 쓰지 않는다” 같은 규칙을 넣으면, AI가 단순 수치 적용이 아니라 설계 철학까지 반영하게 됩니다.
장점
일관성
- 디자인 토큰과 규칙이 한 파일에 모임
- 이후 생성되는 화면과 코드가 같은 기준을 따름
버전 관리
- 루트 디렉터리에 두고 Git으로 관리 가능
- 변경 diff를 토큰 단위로 추적 가능
핸드오프 개선
- 디자인 명세가 그대로 AI 코딩 에이전트 입력이 됨
- Cursor, Claude Code 같은 도구가 같은 파일을 읽고 UI 코드를 생성 가능
접근성/검증 자동화
- lint로 구조 오류, 토큰 참조 문제, 접근성 대비 등을 검증 가능
- Tailwind 테마 변환 같은 코드 연결도 가능
즉, 디자인 문서가 정적 설명서가 아니라 도구 체인 안의 실행 가능한 파일로 바뀝니다.
의미
DESIGN.md가 중요한 이유는 디자인을 그림이 아니라 구조화된 데이터로 취급하게 만들기 때문입니다.
- 디자이너는 빈 캔버스보다 규칙 설계에 집중
- 개발자는 더 직접적으로 디자인 시스템을 코드로 연결
- AI는 매번 새로 해석하는 대신 명세를 지속적으로 참조
이건 디자인 생산성 향상보다도, 디자인과 개발 사이의 언어를 통일하려는 시도로 보는 편이 더 정확합니다.