awesome-design-md, AI가 만든 화면에 브랜드 기준을 넘기는 DESIGN.md 73개

코딩 에이전트에게 화면을 맡기면 기능은 붙는데 생김새가 매번 달라진다. 어제 만든 버튼은 파란색 각진 모양이었는데 오늘 뽑은 페이지에는 보라색 그라디언트가 들어가 있다. “좀 더 깔끔하게”라고 고쳐 말해도 그 깔끔함의 기준이 사람 머릿속에만 있으니 대화가 겉돈다. awesome-design-md는 그 기준을 말 대신 파일로 넘기자는 접근이다. 유명 사이트의 디자인 언어를 뜯어 DESIGN.md 한 장으로 정리해 둔 모음집이고, AI 에이전트 프레임워크를 만드는 VoltAgent가 MIT 라이선스로 공개했다.

한눈에 보기

AGENTS.md가 만드는 법이라면 DESIGN.md는 보이는 법이다

DESIGN.md는 이 저장소가 지어낸 형식이 아니라 Google Stitch가 제안한 개념이다. 에이전트가 읽을 문서를 역할별로 쪼개자는 발상이고, 저장소는 그 구분을 한 줄로 정리한다. AGENTS.md는 코딩 에이전트가 읽고 프로젝트를 어떻게 만들지를 정하는 문서, DESIGN.md는 디자인 에이전트가 읽고 프로젝트가 어떻게 보여야 하는지를 정하는 문서다. 이미 저장소 루트에 AGENTS.md를 두고 있다면 그 옆자리가 비어 있었던 셈이다.

형식이 마크다운이라는 점이 중요하다. Figma 내보내기도, 디자인 토큰 JSON도, 전용 파서도 없다. 언어 모델이 가장 잘 읽는 형식으로 규칙을 적어 루트에 놓아 두면 그만이다. 각 파일은 Google Stitch가 공개한 DESIGN.md 규격을 따르되 항목을 더 붙여 9개 절로 짜여 있다. 분위기와 밀도를 적는 절, 색과 역할을 짝지은 절, 서체 위계 표, 버튼과 카드의 상태별 스타일, 여백과 그리드, 그림자 체계, 하지 말아야 할 것 목록, 반응형 동작, 그리고 마지막으로 에이전트에 그대로 붙여 넣을 프롬프트 가이드가 들어간다.

색을 역할 이름으로 부른다

이 모음집의 성격을 결정하는 것은 서술이 아니라 값이다. Claude 사이트를 분석한 파일의 앞부분은 이렇게 생겼다.

colors:
  primary: "#cc785c"
  ink: "#141413"
  canvas: "#faf9f5"
  surface-card: "#efe9de"
  accent-teal: "#5db8a6"

typography:
  display-xl:
    fontFamily: "Copernicus, Tiempos Headline, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.5px

색이 primary, canvas, ink 같은 역할 이름을 달고 있어서 에이전트가 본문 배경과 강조 버튼을 뒤바꾸지 않는다. 값 위에는 사람이 읽는 설명이 한 문단 붙는데, Claude 파일은 대부분의 AI 브랜드가 차가운 파랑과 슬레이트를 쓰는 것과 달리 크림색 바탕에 따뜻한 코랄을 얹은 점을 그 브랜드의 성격으로 짚는다. 이런 문장이 있어야 모델이 hex만 복사하지 않고 의도까지 흉내 낸다.

무엇이 들어 있나

수집 범위가 넓다. AI 플랫폼에는 Claude, Cohere, Mistral AI, Ollama, xAI가, 개발 도구에는 Cursor, Vercel, Raycast, Warp, Superhuman이 있다. 그 밖에 백엔드와 DevOps(MongoDB, ClickHouse, PostHog), 생산성 SaaS(Linear, Notion, Cal.com), 디자인 도구(Figma, Framer, Webflow), 핀테크(Stripe, Coinbase, Wise), 커머스(Shopify, Airbnb, Nike), 미디어(Apple, Spotify, NVIDIA), 자동차(Tesla, BMW, Ferrari)로 분류가 이어지고, 1996년 Dell과 2001년 Nintendo 사이트를 복원한 레트로 항목까지 있다.

목록이 길다는 것보다, 주문이 구체적으로 바뀐다는 점이 실질적인 변화다. “고급스럽게” 대신 “Apple처럼 여백을 크게” 또는 “Vercel처럼 흑백으로 정확하게”를 고르면 되고, 그 선택이 실제 hex와 서체 크기로 번역되어 에이전트에게 넘어간다.

한 가지 구조는 미리 알아 두는 편이 낫다. 저장소의 각 폴더에는 DESIGN.md와 짧은 README.md만 있다. 색 견본과 타이포 스케일을 눈으로 보는 미리보기, 다크 모드 예시, 다운로드 버튼은 같은 팀이 운영하는 getdesign.md 사이트로 옮겨 갔고 폴더의 README가 그 주소로 안내한다. 최상단 README에는 폴더마다 preview.html이 있다고 적혀 있지만 실제로는 없으니, 미리보기는 웹에서 봐야 한다.

시작하기

1. design-md 폴더에서 만들려는 화면의 성격에 가까운 사이트를 고른다. 감이 안 잡히면 getdesign.md에서 미리보기를 먼저 본다.
2. 고른 파일을 프로젝트 루트에 DESIGN.md로 복사한다. CLI를 쓰면 npx getdesign@latest add claude처럼 한 줄이면 된다.
3. 에이전트에게 파일을 가리켜 지시한다. “루트의 DESIGN.md를 기준으로 가격 페이지를 만들어 줘” 정도면 충분하다.
4. 결과가 어긋나면 파일에서 값을 직접 고친다. 마크다운이라 색 하나 바꾸는 데 빌드도 도구도 필요 없다.

디자인 시스템이 아직 없는 팀이 에이전트로 UI를 뽑을 때 이득이 가장 크다. 반대로 자체 토큰과 컴포넌트 라이브러리를 이미 갖췄다면 남의 브랜드 파일을 얹을 이유가 없고, 자기 시스템을 DESIGN.md 형식으로 한 번 정리해 두는 편이 낫다. 그럴 때 이 저장소는 잘 쓰인 예시 73개로 보면 된다.

주의점

• 공식 디자인 시스템이 아니다. 공개된 웹사이트의 CSS 값을 관찰해 정리한 독립 분석이고, 저장소도 각 브랜드와 아무 관계가 없으며 승인받지 않았다고 직접 밝히고 있다.
• 그대로 베끼면 문제가 된다. 색과 서체, 레이아웃을 통째로 옮기면 상표와 트레이드 드레스 영역에 들어간다. 방향을 잡는 참고 자료로 쓰고 자사 색과 서체로 바꾸는 것이 전제다.
• 에이전트가 규칙을 늘 지키지는 않는다. DESIGN.md는 강제되는 설정이 아니라 읽히는 문서다. 파일과 어긋난 결과는 여전히 나오고 확인은 사람 몫이다.
• 아직 초기 단계다. 파일 첫 줄에 version: alpha가 적혀 있고, 앞서 본 것처럼 README와 실제 폴더 구성이 어긋난 부분도 남아 있다.

정리

awesome-design-md는 새 기술이라기보다 합의된 형식 하나와 잘 정리된 예시 더미에 가깝다. 그런데 에이전트에게 UI를 맡길 때 매번 비는 자리가 정확히 그 형식이다. 말로 설명하던 기준을 파일로 고정하면 같은 지시가 같은 결과로 돌아올 확률이 올라간다. MIT 라이선스에 파일 복사 한 번이면 끝나니, 다음에 랜딩 페이지를 에이전트에게 시킬 일이 있으면 한 장 얹어 놓고 차이를 확인해 보는 정도로 충분하다.