google-labs-code/design.md

해결하는 문제

코딩 에이전트는 UI를 생성할 때 일관된 시각적 정체성을 유지하는 데 어려움을 겪는 경우가 많습니다. DESIGN.md는 디자인 시스템을 설명하기 위한 표준화된 영구적 포맷을 제공하여, AI 에이전트가 시각적 브랜드 뒤에 있는 정확한 값(토큰)과 논리(문장)를 모두 이해할 수 있도록 합니다.

작동 방식

이 시스템은 이중 레이어 파일 포맷을 사용합니다:

1. YAML Front Matter: 색상, 타이포그래피, 간격 및 컴포넌트별 속성(예: 버튼 색상)에 대한 기계 판독 가능한 디자인 토큰을 포함합니다.
2. Markdown Body: 특정 섹션(예: 개요, 색상, 타이포그래피)으로 구성된 사람이 읽을 수 있는 디자인 근거 및 가이드라인을 포함합니다.

구조적 정확성을 위해 파일을 린트하고, WCAG 대비 비율을 확인하며, 깨진 토큰 참조를 감지하고, 토큰을 Tailwind CSS (v3 및 v4) 또는 W3C Design Tokens Format과 같은 형식으로 내보내는 CLI 도구가 포함되어 있습니다.

대상

생성된 UI가 특정 브랜드 아이덴티티 및 디자인 시스템과 일관성을 유지하도록 하고 싶은 AI 코딩 에이전트 활용 개발자 및 디자이너.

주요 특징

• 하이브리드 포맷: 구조화된 YAML 토큰과 서술적인 Markdown 문장을 결합합니다.
• 접근성 체크: WCAG AA 대비 비율에 대한 내장 린팅 기능.
• WriteLine 내보내기: Tailwind CSS 및 W3C DTCG 형식으로의 내보내기를 지원합니다.
• 에이전트 준비 완료: 에이전트 프롬프트에 주입하기 위한 포맷 사양을 출력하는 spec 명령어가 포함되어 있습니다.