AI 코딩 에이전트에게 디자인 감각 주는 법, DESIGN.md가 뭔가요?

AI가 만든 화면, 왜 항상 어딘가 허전할까요?

클로드 코드나 커서(Cursor)로 개발해본 분들이라면 딱 이 느낌 아실 거예요.

기능은 완벽하게 돌아가는데, 화면을 열어보면 묘하게 "개발자가 만든 티"가 납니다. 버튼이 어떤 컴포넌트에선 둥글고, 다른 컴포넌트에선 각지고, 색상은 뒤죽박죽, 여백은 들쭉날쭉.

프롬프트에 "깔끔하게 만들어줘"라고 써봤자 결과는 매번 다릅니다. 이 문제의 핵심 원인은 간단합니다. AI에게 디자인 기준을 제대로 전달할 수단이 없었기 때문이에요.

그 빈자리를 채우려고 등장한 개념이 바로 DESIGN.md입니다.

DESIGN.md, 한 줄로 설명하면?

README.md라는 파일 아시죠? 프로젝트를 사람에게 설명하는 텍스트 파일입니다.

DESIGN.md는 거기서 착안한 개념인데, 설명 대상이 사람이 아니라 AI입니다. 색상, 폰트, 여백, 버튼 스타일 같은 디자인 규칙을 마크다운 형식으로 정리해두면, AI 에이전트가 그 파일을 읽고 일관된 화면을 만들어주는 방식이에요.

원래 구글 스티치(Google Stitch)에서 처음 도입한 개념인데, 지금은 오픈소스로 공개되어 커뮤니티에서 빠르게 확산 중입니다. 형식은 누구나 쓸 수 있고, 적용하는 데 Figma 파일도, JSON 스키마도 필요 없어요.

한 줄 정리: DESIGN.md는 AI 에이전트에게 "우리 서비스는 이렇게 생겨야 해"를 알려주는 디자인 규칙서입니다.

왜 2025년부터 갑자기 주목받게 됐을까요?

1~2년 전까지만 해도 AI 코드 생성은 함수 단위, 코드 조각 수준이었습니다. AI가 자동완성 도우미 역할을 했고, 화면 전체의 일관성은 여전히 개발자 몫이었어요.

그런데 2025년을 기점으로 상황이 완전히 달라졌습니다. 클로드 코드, 커서, Lovable 같은 도구들이 프로젝트 전체 맥락을 읽고 여러 파일에 걸친 코드를 한꺼번에 생성하기 시작한 거예요. AI가 단일 함수가 아니라 화면 전체를 만드는 시대가 된 겁니다.

문제는 AI가 "기능"은 잘 만들지만, "디자인"은 매번 제멋대로라는 점이었습니다. 컴포넌트마다 "파란색 버튼, 둥근 모서리, 16px 여백"을 일일이 프롬프트에 쓰는 건 현실적으로 불가능하죠.

DESIGN.md는 정확히 이 빈자리를 노린 해법입니다.

getdesign.md, 71개 브랜드 디자인 시스템을 무료로 쓰세요

getdesign.md라는 사이트가 있습니다. Vercel, Stripe, Notion, Apple, Airbnb, Spotify 등 유명 서비스의 디자인 시스템을 DESIGN.md 형식으로 정리해서 무료로 제공하는 컬렉션이에요.

2026년 5월 현재 기준으로 71개의 DESIGN.md 파일이 등록되어 있으며, 최근에는 BMW M, HP, Starbucks, PlayStation 같은 브랜드까지 추가됐습니다.

사용법도 단순해요.

원하는 브랜드의 DESIGN.md 파일을 내 프로젝트 루트 폴더에 복사하고, AI 에이전트에게 "이 파일 참고해서 UI 만들어줘"라고 지시하면 끝입니다. Notion 스타일의 미니멀한 화면을 원한다면 notion의 DESIGN.md를, 스타트업 느낌의 다크 테마를 원한다면 Linear의 DESIGN.md를 골라 쓰면 되는 거예요.

파일 하나가 결과물의 품격을 바꿔줄 수 있다는 게 이 개념의 핵심입니다.

DESIGN.md 파일 안에는 뭐가 들어있을까요?

실제 파일을 열어보면 마크다운 형식으로 아래 내용들이 정리되어 있어요.

우선 색상 팔레트, 즉 브랜드에서 쓰는 주요 색상 코드들이 있고요. 타이포그래피 규칙, 즉 어떤 폰트를 쓰는지, 제목은 몇 포인트인지, 줄 간격은 어떻게 하는지도 명시되어 있습니다. 버튼이나 카드 같은 컴포넌트 디자인 규칙, 여백과 간격 기준, 그림자 처리 방식, 다크 모드 대응 방법까지 담겨 있어요.

구글이 공개한 DESIGN.md 스펙은 표준 9개 섹션으로 구성되며, 각 브랜드마다 그 틀에 맞춰 내용이 채워집니다.

디자이너가 Figma에서 결정하는 모든 시각적 규칙이, AI가 읽기 좋은 텍스트 파일 하나로 압축되는 거예요. 생각보다 훨씬 단순하고, 그래서 더 강력합니다.

"Figma 있으면 필요 없잖아요?" 오해 풀어드릴게요

이미 Figma 기반 디자인 시스템이 잘 갖춰진 팀이라면 당장 필요하지 않을 수 있습니다. 맞는 말이에요.

하지만 DESIGN.md가 노리는 대상은 따로 있습니다. 디자이너 없이 사이드 프로젝트를 혼자 진행하는 개발자, AI 에이전트로 빠르게 MVP를 찍어내야 하는 스타트업 팀, 팀 내 디자인 시스템을 AI에게 표준화된 방식으로 전달하고 싶은 분들이에요.

특히 Figma에서 디자인 시스템을 DESIGN.md로 자동 변환해주는 도구들도 생겨나고 있습니다. 구글 스티치는 기존 웹사이트에서 디자인 시스템을 자동으로 추출해서 DESIGN.md로 변환해주는 기능을 갖추고 있고, design-md-chrome이라는 크롬 확장도 비슷한 역할을 합니다.

결론적으로 DESIGN.md는 Figma를 대체하는 도구가 아닙니다. 디자이너의 의도를 AI가 읽을 수 있는 언어로 번역해주는 다리 역할을 하는 거예요.

실제로 어떻게 쓰면 되나요? 3단계면 충분합니다

적용 방법은 진짜 단순해요.

첫 번째, getdesign.md에서 원하는 브랜드를 골라 DESIGN.md 파일을 프로젝트 루트에 복사합니다.

두 번째, 클로드 코드나 커서 같은 AI 코딩 에이전트에게 "DESIGN.md 파일 참고해서 로그인 화면 만들어줘"처럼 지시합니다.

세 번째, 결과물을 확인하고, 마음에 들지 않는 부분은 DESIGN.md를 직접 수정해서 재지시합니다.

개인 브랜드나 회사 디자인 시스템이 있다면, 그 내용을 DESIGN.md 형식으로 만들어 팀 저장소에 넣어두면 됩니다. 팀 전체가 일관된 AI 결과물을 얻을 수 있어요. 온보딩 비용도 줄고, 컴포넌트 리뷰에서 "왜 버튼이 또 바뀌었어요?"라는 대화도 줄어들 겁니다.

앞으로 어떻게 바뀔까요?

DESIGN.md는 아직 초기 단계입니다. 현재는 구글 계열 팀이 제안한 포맷이고, 커뮤니티 채택이 막 시작됐어요.

하지만 방향은 명확합니다. W3C의 디자인 토큰 커뮤니티 그룹도 2025년 10월 첫 안정 버전을 발표하며 표준화 흐름에 합류했고, Style Dictionary, Tokens Studio 같은 도구들이 Figma에서 JSON, CSS로 이어지는 변환 파이프라인을 공식 지원하기 시작했습니다.

TypeUI 같은 도구는 이미 클로드 코드, 커서, Gemini CLI 등 주요 AI 코딩 에이전트를 커버하는 레지스트리를 운영 중이며, 57개의 무료 디자인 스킬을 제공하고 있습니다.

AI 코딩 에이전트가 실제 개발 현장 깊숙이 들어올수록, 디자인 일관성을 유지하는 표준 방법의 필요성도 커질 겁니다. DESIGN.md는 그 표준 후보로 가장 유력한 위치에 서 있어요.

스타트업 입장에서 보면, 이 흐름은 꽤 중요한 시그널입니다. 디자이너 없이도 일관된 UI를 AI로 뽑아낼 수 있다는 것, 그리고 그 기준이 파일 하나로 팀 전체에 공유된다는 것. 초기 팀일수록, 리소스가 적을수록 이 차이는 더 크게 느껴질 거예요.

마무리

AI 코딩 에이전트가 화면 전체를 만드는 시대, 기능만큼 중요해진 게 디자인 일관성입니다.

DESIGN.md는 마크다운 파일 하나로 AI에게 디자인 감각을 심어주는 방법이고, getdesign.md는 71개 유명 브랜드의 디자인 시스템을 무료로 제공하는 컬렉션입니다. 디자이너 없이 사이드 프로젝트를 진행 중이거나, AI 에이전트 결과물이 항상 어딘가 허전했다면, 지금 바로 파일 하나를 내려받아 써보세요.

파일 하나가 결과물의 품격을 바꿀 수 있습니다.