DESIGN.md: AI 기반 UI 디자인을 위한 최신 개방형 표준

2026.04.27 / 동준상.넥스트플랫폼
(AWS SAA, AWS AIF, GCP GenAI Leader)

Design.md – Open Standard for AI-based UI Design

핵심 요약 (Executive Summary)

Design.md AI based UI Design Standard -infographic by NextPlatform

DESIGN.md는 AI 에이전트가 디자인 시스템을 영속적이고 구조적으로 이해할 수 있도록 돕는 텍스트 기반의 새로운 개방형 표준
단순히 디자인 값을 저장하는 것을 넘어, 디자인 결정의 배경이 되는 ‘추론(Reasoning)’과 실제 ‘값(Values)’을 하나의 파일에 통합
최근 업데이트를 통해 DESIGN.md는 특정 도구(Stitch)에 국한되지 않고 다양한 IDE 및 에이전트 도구에서 활용될 수 있는 공식 사양(Specification)으로 진화
주요 업데이트 사항: 디자인 토큰 섹션의 도입, 컴포넌트 참조 기능, 에이전트 스스로 작업을 검증할 수 있는 CLI 도구

구성 요소/섹션 명칭	역할 및 정의	주요 특징 및 기능
Tokens	디자인 시스템 내의 역할을 정의하고 추론(Reasoning)과 실제 값을 결합하는 섹션	추론과 실제 값(Tokens)을 동일 파일 내에서 관리하여 정보의 불일치 방지
Components	UI 구성 요소(예: 버튼)의 사양을 정의하는 섹션	정의된 토큰을 참조하여 값 업데이트 시 자동 반영, 호버 변형(Hover variant) 지원
Color (Colors)	디자인 시스템의 시각적 정체성을 정의하는 색상 역할 지정	Primary(텍스트/잉크), Neutral(표면/배경) 등 필수적인 기본 색상 역할 정의
Typography	디자인 시스템의 보이스(Voice) 및 텍스트 스타일 역할 정의	‘기본 본문(Body main)’과 같은 역할 중심의 정의 방식 채택
CLI (Command Line Interface)	DESIGN.md 파일을 사양에 따라 유효성 검사하는 도구	파일 린팅(Linting), WCAG 기준 대비 비율(Contrast ratio) 등 접근성 체크
GitHub Repository	DESIGN.md 사양의 공식 저장소 및 커뮤니티 협업 공간	사양 문서화, 이슈(Issue) 제기, 풀 리퀘스트(PR)를 통한 기여 가능

Design.md AI based UI Design Standard -mindmap by NextPlatform

DESIGN.md는 프로젝트의 시각적 정체성을 기술하는 텍스트 파일입니다. 이 파일은 AI 에이전트가 디자인 시스템을 깊이 있게 이해하도록 돕는 컨텍스트 역할을 수행합니다.

포괄적 정보 수록: 색상, 타이포그래피의 정의는 물론, 각 요소가 왜 사용되는지에 대한 규칙과 논리를 포함합니다.
에이전트 컨텍스트 제공: Stitch와 같은 도구가 새로운 디자인을 생성할 때, DESIGN.md 파일의 내용을 바탕으로 디자인 결정을 내립니다.
범용성: 현재 DESIGN.md는 IDE, 다양한 에이전트 도구, GitHub 저장소 등에서 공유되고 큐레이팅되는 범용 포맷으로 확산되고 있습니다.

기존의 활용 사례가 확장됨에 따라, 모든 사용자와 도구가 공통된 기준에서 작업할 수 있도록 공식적인 사양 초안이 공개되었습니다.

표준화된 규칙: DESIGN.md가 무엇인지에 대한 문서화된 정의와 기본 규칙을 설정하여 일관성을 확보했습니다.
공통 기반 구축: 서로 다른 변형이 발생하는 것을 방지하고, 모든 도구가 동일한 토대 위에서 작동하도록 지원하면서도 개별 시스템에 맞춘 확장과 커스터마이징을 허용합니다.
오픈 소스 협업: GitHub 저장소를 통해 사양을 관리하며, 누구나 이슈 제기나 풀 리퀘스트(PR)를 통해 기여할 수 있습니다.

DESIGN.md의 가장 큰 특징은 디자인의 ‘이유’와 ‘실제 값’을 한곳에 모았다는 점입니다.

구분	내용	예시
추론 (Reasoning)	디자인 선택의 배경, 느낌, 목적을 서술한 산문(Prose) 형태의 정보	“Deep Midnight Forest Green은 헤드라인을 위한 기본 잉크색입니다.”
토큰 (Tokens)	구체적인 헥사 코드(Hex code)나 폰트 크기 등의 데이터 값	`#002A20`, `18px` 등

기존 시스템에서는 스타일 가이드(추론)와 설정 파일(토큰)이 분리되어 시간이 흐름에 따라 내용이 불일치하는 문제가 발생했으나, DESIGN.md는 이를 한 파일 내의 ‘Tokens’ 섹션으로 통합하여 맥락을 유지합니다.

DESIGN.md에서 토큰은 단순한 변수가 아닌 하나의 ‘결정(Decision)’ 또는 ‘역할(Role)’로 정의됩니다.

의사결정의 이름: 예를 들어 ‘Primary’라는 토큰은 단순한 색상이 아니라 ‘페이지의 주요 텍스트 색상’이라는 역할을 의미합니다. 현재 어떤 색상값이 할당되어 있는지는 그 역할을 수행하기 위한 일시적인 선택일 뿐입니다.
기본 사양: 모든 DESIGN.md 시스템은 ‘Primary'(주요 잉크/텍스트 색상)와 ‘Neutral'(배경/표면 색상)과 같은 핵심 역할을 정의해야 합니다.
디자인 방식의 변화: 색상을 직접 맞추는 대신, 목적에 맞는 ‘역할’을 호출함으로써 보다 논리적인 디자인 프로세스를 가능하게 합니다.

Design.md AI based UI Design Standard – Chain of References by NextPlatform

현재 개발 중인 ‘Components’ 섹션은 디자인 시스템의 구성 요소를 보다 효율적으로 관리할 수 있게 합니다.

토큰 참조: 버튼 컴포넌트의 배경색을 설정할 때 구체적인 색상 코드 대신 이미 정의된 토큰(예: button-primary)을 참조합니다.
연쇄 업데이트: 상위 역할을 하는 토큰 값이 변경되면 이를 참조하는 모든 컴포넌트의 디자인이 자동으로 업데이트됩니다.
변형(Variants) 처리: 호버(Hover) 상태와 같은 변형 모델도 특정 속성만 재정의(Override)하여 간결하게 표현할 수 있습니다.

Design.md AI based UI Design Standard – Self-Assessment by NextPlatform

새롭게 도입된 CLI 도구는 DESIGN.md 파일이 사양에 맞게 작성되었는지 검증하며, 에이전트의 작업 흐름을 개선합니다.

자기 검증(Self-checking): 에이전트가 DESIGN.md 파일을 수정하거나 추가한 후, CLI를 실행하여 스스로의 작업이 사양에 부합하는지 확인할 수 있습니다.
린팅(Linting) 사례: 예를 들어 에이전트가 명암비가 낮은 색상 조합을 생성했을 경우, CLI 린터가 WCAG(웹 콘텐츠 접근성 지침) 기준 미달을 감지하여 에이전트에게 수정을 요구하거나 이유를 소명하게 합니다.
신뢰성 확보: 에이전트는 파일을 단순히 소비하는 것을 넘어, 표준화된 포맷을 바탕으로 신뢰할 수 있는 결과물을 생성하고 검증할 수 있습니다.