DESIGN.md — AI 코딩 도구를 위한 디자인 시스템 단일 파일 포맷 (한국어 정리)

DESIGN.md는 Google Labs의 Stitch 프로젝트에서 제안한 포맷으로, AI 코딩 에이전트(Claude Code, Cursor 등)가 디자인 시스템을 정확히 이해하고 UI를 생성할 수 있도록 설계되었다.

이 포맷은 YAML frontmatter와 Markdown의 이중 구조를 활용한다.

• YAML: 색상, 타이포그래피, 간격(spacing) 등 기계가 파싱할 수 있는 디자인 토큰을 저장한다.
• Markdown: 디자인 결정의 근거, 사용 사례, 피해야 할 패턴 등 디자인 판단 기준을 기술한다.

주요 특징은 다음과 같다:

• 구조화된 섹션: 8개의 고정된 섹션(colors, typography 등)을 통해 디자인 시스템의 체계를 유지한다.
• CLI 도구: lint, diff, export, spec 기능을 통해 참조 오류, 대비비 부족, 섹션 순서 위반 등을 자동 검사한다.
• 상호운용성: Tailwind CSS, Figma 변수 등 기존 도구와의 연동을 지원한다.

이는 디자인 시스템이 Figma를 넘어 코드베이스 내에서 AI 에이전트의 지속적인 컨텍스트로 기능하게 함으로써, AI가 브랜드 규칙을 준수하며 UI를 개발하도록 돕는 것을 목표로 한다.