awesome-design-md

어떤 도구인가요?

"Figma 파일 없이도 Claude, Stripe, Notion처럼 생긴 UI를 만들 수 있다면?" — awesome-design-md는 그 꿈을 현실로 만드는 도구입니다. AI 에이전트 플랫폼을 개발하는 VoltAgent가 만들었으며, GitHub에서 7만 2천 개 이상의 별을 받은 주목받는 오픈소스 프로젝트입니다.

이 저장소는 Claude, OpenAI, Stripe, Notion, Apple, Tesla, Figma 등 71개 유명 브랜드의 디자인 시스템을 DESIGN.md라는 마크다운(plain-text) 파일 형식으로 정리해 둔 컬렉션입니다. DESIGN.md는 Google Stitch가 제안한 새로운 개념으로, 색상·타이포그래피·버튼 스타일·여백 규칙 등을 사람도 읽을 수 있는 텍스트 파일에 담아두는 방식입니다. Claude Code 같은 AI 코딩 도우미(에이전트)가 이 파일을 읽으면, 해당 브랜드의 스타일에 맞는 화면을 자동으로 만들어줍니다.

왜 추천하나요?

솔로 빌더가 "내 서비스를 Stripe처럼 깔끔하게 만들고 싶다"고 생각할 때, 가장 큰 장벽은 "도대체 어떤 색을, 어떤 폰트를, 어떤 크기로 써야 하지?"입니다. 디자이너에게 물어볼 수도 없고, Figma 파일에 접근할 수도 없죠. awesome-design-md는 이 장벽을 없애줍니다. Figma 내보내기나 복잡한 설정 없이 텍스트 파일 하나를 복사하면 끝입니다.

• 71개 브랜드 즉시 사용: AI/LLM 플랫폼(Claude, Mistral, ElevenLabs), 개발 도구(Vercel, Cursor), SaaS(Linear, Notion, Cal.com), 핀테크(Stripe, Wise), 이커머스(Shopify, Airbnb), 자동차(Tesla, BMW, Ferrari) 등 9개 분야 망라
• 각 파일에 디자인 정보가 빠짐없이 정리: 색상 팔레트(이름·HEX·용도), 글꼴 위계, 버튼/카드/입력창 스타일, 여백 규칙, 다크모드 대응, AI용 프롬프트 가이드까지 9가지 섹션
• 라이브 미리보기 제공: 각 브랜드마다 preview.html과 preview-dark.html이 있어, 적용 전에 어떻게 보일지 눈으로 먼저 확인 가능
• 복사-붙여넣기로 5분 안에 시작: 설치할 도구가 없고, npm 같은 패키지 관리자도 필요 없음
• 오픈소스 + MIT 라이선스: 무료로 상업적 프로젝트에도 사용 가능

Figma 같은 디자인 도구는 "화면을 직접 그려 넘겨주는" 방식이라면, DESIGN.md는 "AI에게 브랜드의 규칙을 글로 알려주는" 방식입니다. 디자인 툴을 다룰 줄 몰라도, AI가 규칙을 읽고 일관된 화면을 만들어줍니다.