getdesign.md AI UI 디자인 모음 사이트

안녕하세요.

AI UI 디자인을 모아놓은 사이트 getdesign.md에 대해 간단히 정리해보겠습니다.

 

 design.md 의의와 getdesign.md AI 디자인 도구 활용법

▣ design.md

: AI 에이전트가 읽을 수 있는 형식으로, 브랜드의 시각 언어(색상/타이포그래픽/간격/컴포넌트 등)을 담은 단일 마크다운(.md) 파일

 – 구글 랩스(Google Labs)가 공개한 오픈 포맷으로, 구글의 AI UI 디자인 도구 'Stitch'에서 첫 사용 사례

 – README.md가 프로젝트를 설명하듯, design.md는 디자인 시스템을 AI에 설명하는 역할 수행

 – 개발 지시용으로 쓰이는 CLAUDE.md, AGENTS.md와 같은 개념이나 '디자인' 영역에 특화됨
 – Apache 2.0 라이선스로 깃허브에 공개되어 있으며, 현재 알파(alpha) 단계임

 –  디자인을 코드처럼 버전 관리(변경 이력, 비교)할 수 있어 일관성 유지에 유리함

 

(파일 구성)

 – AML 프론트매터(Front Matter) : 색상, 폰트, 간격 등 기계가 읽는 정확한 '디자인 토큰' 값
 – 마크다운 본문 : 각 디자인 결정의 '왜(이유)'를 설명하는 서술

 

(예시)

 – 본문은 색상, 타이포그래피, 레이아웃 등 9개의 표준 섹션으로 구성되며, 토큰은 국제 표준인 W3C 디자인 토큰 포맷(DTCG) 구조를 따릅니다.

 

▣ getdesign.md

: 구글의 DESIGN.md 규격을 기반으로, 유명 브랜드의 디자인 시스템을 분석해 모아둔 DESIGN.md 파일 모음(라이브러리)

 – VoltAgent 팀이 운영하며, Stripe·Notion·Linear·Vercel·Apple 등 완성도 높은 제품의 시각 언어를 분석해 제공함
 – 2026년 6월 기준 약 75종의 DESIGN.md 파일을 제공
 – 원하는 브랜드 스타일을 골라 내 프로젝트에 그대로 적용할 수 있음

 

(사용 방법)

 ① getdesign.md 사이트에 접속해서 원하는 브랜드 디자인을 검색하여 선택

getdesign.md — DESIGN.md collection for AI coding agents

 

 ② Download DESIGN.md 버튼을 클릭하여 다운로드 받고, 프로젝트 최상위 폴더(README.md 옆)에 파일 추가

      또는 터미널에서 명령어 실행 npx getdesign@latest add [브랜드명]

getdesign.md 예시

 ③ 프롬프트로 지시할 때, 해당 파일 적용 요청 (예. "DESIGN.md의 디자인 시스템을 사이트 전체에 적용해줘")

 ④ 결과를 확인하며 한두 번 다듬어 원하는 형태로 조정

 

(유의사항)

 – 아직 알파 단계의 규격이므로 세부 항목이 변경될 수 있음
 – getdesign.md는 공개적으로 관찰 가능한 패턴을 정리한 '영감용 참고 자료'로, 해당 브랜드와 공식 제휴·보증 관계가 아님
 – 이미 디자인 토큰 빌드 파이프라인을 쓰고 있다면 export 기능으로 변환해 함께 활용 가능