DESIGN.md란?
DESIGN.md는 기계가 읽는 디자인 시스템입니다. 색상, 타이포그래피, 간격, 컴포넌트 규칙을 AI가 추측 없이 적용할 만큼 명확히 적은 일반 텍스트 markdown 파일입니다. Google Stitch가 도입하고 공개 사양이 되어 Claude Code, Cursor 등 텍스트를 읽는 에이전트에서 사용할 수 있습니다.
DESIGN.md란 무엇인가
DESIGN.md는 완전한 디자인 시스템을 구조화된 기계 판독형으로 담는 하나의 Markdown 파일입니다. 보통 먼저 읽는 YAML 디자인 토큰과 색상, 타이포그래피, 간격, 형태, 컴포넌트, 모션을 설명하는 글을 결합해 AI가 추측 없이 적용하게 합니다.
이름은 README.md 관례를 따릅니다. 모든 도구가 열 수 있고 버전 관리와 이동이 가능한 일반 텍스트입니다. README가 사람에게 프로젝트를 설명한다면 DESIGN.md는 슬라이드, 사이트, 제품을 꾸밀 AI에 디자인을 설명합니다.
'현대적이고 깔끔하게'처럼 모호하게 요청하는 대신 DESIGN.md를 프로젝트에 두면 에이전트가 정확한 스타일을 모든 결과물에 적용합니다.
형식의 기원: Google Stitch
DESIGN.md는 Google Labs의 AI 디자인 도구 Google Stitch를 통해 널리 알려졌습니다. Stitch는 design.md를 디자인 시스템의 지속적인 기억으로 사용해 색상, 글꼴, 규칙을 저장하고 프롬프트마다 흔들리는 것을 막습니다.
2026년 Google Labs가 DESIGN.md를 공개 사양으로 출시해 Stitch에 묶이지 않고 도구와 플랫폼을 넘어 쓸 수 있게 했습니다. Claude Code, Cursor, Codex 등이 프로젝트 루트에서 읽고 awesome-design-md 같은 커뮤니티 모음과 Curio 같은 엄선 라이브러리가 생겼습니다.
중요한 이유는 디자인 시스템과 AI 사이의 공통 언어가 되고 있기 때문입니다. 한 번 쓴 파일 하나를 다음 AI 도구도 이해합니다.
DESIGN.md의 내용
먼저 스타일 이름, 한 문장의 핵심, 라이트 또는 다크 같은 메타데이터를 둡니다. 기계가 가장 먼저 얻는 방향입니다.
Then the token sections, each stated as concrete values rather than adjectives: a color section (a named palette — background, ink, accents — as exact values like <hex>), a typography section (font families, weights, and a type scale in <px>/rem), a spacing section (a rhythm in <px>), and shape, shadow, and motion sections (radii, elevation, easing).
마지막은 버튼, 카드, 입력의 컴포넌트 로직과 적합한 곳·부적합한 곳입니다. 이 조합이 AI를 규칙에서 화면으로 이끌며 값을 만들지 않게 합니다.
Curio ships every style in its library as a complete file of this shape. The structure is open so anyone can see how a DESIGN.md is put together; the precise token values for each style are the paid product. The skeleton is public; the exact <hex> and <px> are what you unlock.
기계 판독형이 스크린샷보다 나은 이유
스크린샷이나 분위기는 정보가 손실되어 AI가 중요한 요소를 매번 다르게 추론합니다. 색은 베끼고 간격은 놓치거나 글꼴은 빌리고 그리드는 빠뜨립니다. DESIGN.md는 값을 명시해 모든 화면에 정확히 같은 방식으로 적용합니다.
하나의 결정적 파일이므로 일관되고 재사용할 수 있습니다. 같은 DESIGN.md가 첫 번째와 마흔 번째 슬라이드, 이번 주 랜딩 페이지와 다음 달 대시보드를 관리합니다. 우연히 얻은 모습이 아니라 믿을 수 있는 시스템입니다.
일반 텍스트라 저장소에 두고 Git으로 이동하며 디자인 변경을 검토 가능한 diff로 볼 수 있습니다.
AI가 DESIGN.md를 사용하는 방법
도구에 맞는 방식으로 전달합니다. 프로젝트 루트에 두거나 채팅에 붙이거나 공유 링크를 보내거나 MCP로 필요할 때 가져오게 합니다. 모델이 토큰을 읽고 평균으로 흐르지 않으면서 스타일에 맞는 컴포넌트, 슬라이드, 페이지를 생성합니다.
일반 Markdown이므로 한 어시스턴트에 묶이지 않습니다. 채팅, 코딩 도구, 에이전트 파이프라인 어디서든 같은 DESIGN.md를 쓰며 사양이 작업과 함께 이동합니다.
직접 쓸까요, 완성된 파일을 고를까요?
기존에 보유한 브랜드나 제품 디자인 시스템이라면 직접 DESIGN.md를 작성합니다. 한 번 인코딩하면 이후 모든 AI 도구가 충실히 적용합니다.
Bauhaus, Swiss International, 브랜드급 현대 스타일처럼 확립된 것을 원하고 직접 역설계하고 싶지 않다면 완성된 파일을 고릅니다. Curio는 수백 가지 실제 스타일을 완전한 DESIGN.md로 제공해 AI가 MCP, 공유 링크 또는 다운로드로 몇 초 안에 적용합니다.
FAQ
DESIGN.md는 누가 만들었나요?
DESIGN.md는 Google Labs의 AI 디자인 도구 Google Stitch가 도입해 디자인 시스템 저장에 사용했습니다. 이후 Google Labs가 공개 사양으로 출시해 Claude Code, Cursor, Curio 등이 현재 지원합니다.
DESIGN.md는 공식 표준인가요?
Google Labs가 공개한 오픈 사양이며 W3C 같은 공식 표준은 아닙니다. 실무에서는 구조화된 토큰이 있는 일반 Markdown이라 전용 형식이나 파서 없이 읽을 수 있습니다.
DESIGN.md는 Google Stitch에서만 작동하나요?
아닙니다. Stitch에서 시작했지만 공개 사양의 일반 Markdown이라 Claude Code, Cursor, Codex, 채팅, 자체 파이프라인 등 텍스트를 읽는 AI가 사용할 수 있습니다.
실제 토큰 값을 무료로 볼 수 있나요?
DESIGN.md 구조는 공개되어 형태와 섹션을 볼 수 있습니다. Curio에서는 각 스타일의 정확한 값이 바로 쓸 수 있게 만드는 제품이므로 유료이지만 Free에도 무료 스타일이 포함됩니다.
디자인 토큰이나 Figma 파일과 어떻게 다른가요?
디자인 토큰과 Figma 파일은 디자인 도구와 파이프라인용입니다. DESIGN.md는 토큰과 적용 지침을 하나의 일반 텍스트에 담아 AI가 한 번에 직접 읽도록 만든 형식입니다.