Google Labs, AI 에이전트의 브랜드 디자인 준수를 위한 DESIGN.md 오픈소스 공개
Google Labs just open-sourced DESIGN.md so your AI agents stop guessing your brand colors
핵심 요약
AI 에이전트가 브랜드 디자인을 정확히 반영하도록 돕는 표준화된 DESIGN.md 파일 형식이 공개됨.
- DESIGN.md 도입 — AI 에이전트가 브랜드 컬러와 디자인 시스템을 정확히 이해하도록 돕는 표준 파일 형식임.
- YAML과 Markdown 결합 — 기계가 읽는 디자인 토큰과 사람이 읽는 디자인 원칙을 동시에 제공함.
- 브랜드 일관성 확보 — AI가 매번 기본 설정값만 사용하는 대신 브랜드 가이드라인에 맞는 코드를 생성함.
- 도구 지원 — CLI를 통해 디자인 토큰 검증, WCAG 대비 확인, Tailwind 설정 내보내기가 가능함.
Claude Code, Cursor, Copilot을 사용해 UI를 만들다 보면 다들 똑같은 벽에 부딪혔을 겁니다. 에이전트가 기능적인 결과물은 내놓지만, 너무나 평범한 디자인만 뽑아내죠. "모던한 대시보드"를 요청하면 매번 똑같은 기본 Tailwind 블루 색상만 나옵니다.
문제는 AI가 아니라, 모든 대화가 제로 베이스에서 시작된다는 점입니다. AI는 여러분의 브랜드를 모르거든요.
Google Labs가 이 문제를 해결하기 위해 DESIGN.md를 공개했습니다. 기본적으로 README.md와 비슷하지만, 디자인 시스템을 위한 전용 파일입니다.
작동 방식: 프로젝트 루트에 DESIGN.md 파일을 넣으면 됩니다. 이 파일은 기계가 읽을 수 있는 디자인 토큰(YAML)과 사람이 읽을 수 있는 근거(Markdown)를 결합합니다.
- YAML은 AI에게 정확한 헥사 코드, 폰트, 간격을 알려줍니다.
- Markdown은 AI에게 해당 요소를 언제, 왜 사용해야 하는지 알려줍니다(예: "#B8422E는 주요 상호작용 요소에만 사용").
이제 Cursor나 Claude에게 컴포넌트를 만들라고 하면, 이 파일을 읽고 추측하는 대신 브랜드에 맞는 코드를 즉시 출력합니다.
파일을 린트하고, WCAG 대비를 자동으로 확인하며, 토큰을 tailwind.config.js로 직접 내보낼 수 있는 CLI 도구도 함께 제공됩니다.
직접 작성하거나, 템플릿을 가져오거나, Google Stitch를 통해 자동으로 생성하고 싶다면, 사양과 CLI 명령어에 대한 전체 분석을 여기서 확인하세요: MindWired AI에서 전체 가이드 읽기
공식 저장소는 여기입니다: google-labs-code/design.md
혹시 이미 .cursorrules나 CLAUDE.md에 디자인 사양을 넣고 계신 분이 있는지, 그리고 이런 표준화된 파일 형식이 널리 쓰일 것 같다고 생각하시는지 궁금합니다.
