Awesome DESIGN.md

유명 서비스 웹사이트의 색, 글꼴, 간격, 컴포넌트 규칙을 분석해 DESIGN.md 한 파일로 정리한 모음으로, 프로젝트에 넣으면 에이전트가 그 스타일에 맞춰 UI를 만듭니다.

기타UI 디자인VoltAgent 제작 · 비공식 한국어 정리
설치 방법 보기원본 저장소

언제 쓰면 좋나

에이전트에게 화면을 맡기기 전에 디자인 방향을 글로 정해 두고 싶은데 디자인 시스템을 직접 쓸 여력이 없을 때 씁니다. Linear, Vercel, Stripe처럼 원하는 분위기에 가까운 사이트를 골라 DESIGN.md를 프로젝트 루트에 두면, 에이전트가 화면을 만들 때마다 같은 색과 글꼴 규칙을 따릅니다. 고른 파일을 그대로 쓰기보다 출발점으로 삼아 자기 제품에 맞게 고쳐 쓰는 편이 맞습니다.

설치

설치 전에 알아 둘 것

CLI는 Node.js 18 이상이 필요합니다. CLI 없이 저장소의 design-md/<사이트>/DESIGN.md를 프로젝트 루트에 복사해도 됩니다. 만든 뒤에는 UI 작업 전에 DESIGN.md를 읽으라고 에이전트에게 알려 줍니다.

아래 명령은 Claude Code 기준입니다. Cursor에서는 원본 저장소의 설치 안내를 따르세요.

list로 이름(slug)을 확인한 뒤 add로 프로젝트 루트에 DESIGN.md를 만듭니다.

  1. 터미널에서 실행
    npx getdesign list
  2. 터미널에서 실행
    npx getdesign add <slug>
    강조한 부분은 내 값으로 바꿔서 쓰세요.

주의할 점

  • 스킬이나 MCP 서버가 아니라 프로젝트에 넣어 두는 문서 파일입니다. 에이전트가 자동으로 찾아 읽지 않을 수 있으니 AGENTS.md나 CLAUDE.md에 “UI 작업 전에 DESIGN.md를 읽는다”는 줄을 함께 적어 두는 편이 확실합니다.
  • 각 파일은 해당 회사가 낸 공식 디자인 시스템이 아니라 공개 웹사이트를 분석한 해석본입니다. 그대로 쓰면 다른 회사 사이트와 비슷해 보이는 제품이 되므로, 상업 서비스라면 색과 글꼴을 자기 브랜드에 맞게 바꾸고 로고나 브랜드 이름은 빼세요. 관리자는 브랜드 이름을 지워도 에이전트 동작에는 지장이 없다고 답했습니다(#338).
  • 마케팅 페이지를 보고 만든 문서라 입력 검증, 오류 상태, 표처럼 앱 화면에 필요한 규칙은 빠져 있을 수 있고, 명도 대비 같은 접근성 기준도 보장하지 않습니다.
  • 루트에 DESIGN.md가 이미 있으면 CLI는 덮어쓰지 않고 /DESIGN.md 폴더에 저장합니다. 기존 파일을 바꾸려면 –force를, 다른 위치에 두려면 –out을 씁니다.
  • 저장소 폴더마다 있는 README.md는 getdesign.md로 옮겼다는 안내만 담고 있고, 실제 규칙은 같은 폴더의 DESIGN.md에 있습니다. getdesign.md 접속 오류가 보고된 적이 있으니(#377) 사이트가 열리지 않으면 GitHub 폴더에서 바로 받으세요.

커뮤니티 반응

공개 직후 매우 빠르게 별을 모았고 포크 비율이 높아 실제로 내려받아 쓰는 사람이 많다는 분석이 있습니다. 반면 한 업체 블로그는 공개 사이트를 보고 해석한 문서라 공식 디자인 시스템이 아니고, 사이트가 바뀌면 낡으며, 폼 오류나 표 같은 앱 화면 규칙과 접근성은 담기지 않는다고 지적했습니다. 글로 된 규칙이라 토큰 파일보다 에이전트가 덜 정확히 따르고, 유명 브랜드를 그대로 베끼게 만들 수 있다는 우려도 함께 나왔습니다.

다른 사용자들의 공개 후기를 요약했습니다(2026-10-27 확인).

비슷한 도구

Awesome DESIGN.md 대신 쓸 만한 도구와 같은 UI 디자인 카테고리에서 별이 많은 도구입니다.