Awesome DESIGN.md: AI 코딩 에이전트가 일관된 UI를 생성하도록 돕는 디자인 시스템 마크다운 모음집 (feat. VoltAgent)

9bow · 5월 6, 2026, 3:30오전

Awesome DESIGN.md 소개

AI 코딩 에이전트(AI Coding Agent)에게 "이 사이트와 비슷한 페이지를 만들어 줘"라고 요청하면, 색상이 어긋나거나 타이포그래피가 흐트러진 결과물을 받게 되는 경험은 흔한 일입니다. 모델은 자연어로 "비슷한 분위기"라는 지시는 이해하지만, 실제 디자인 시스템(Design System)이 어떤 토큰과 규칙으로 구성되어 있는지는 알지 못합니다. 디자이너의 머릿속에 있는 컬러 팔레트, 타이포 위계, 컴포넌트 상태, 여백 스케일과 같은 결정 사항들을 코드로 전달해야 하지만, Figma 파일이나 스타일 가이드는 LLM이 직접 읽기에는 형식이 적합하지 않습니다. Awesome DESIGN.md는 이 간극을 해결하기 위해 71개 이상의 유명 브랜드 사이트로부터 추출한 디자인 시스템을 마크다운 한 장으로 정리해 모아 둔 큐레이션 저장소입니다.

Awesome DESIGN.md 프로젝트의 핵심 접근법은 Google Stitch가 제안한 DESIGN.md 포맷(Design Markdown Format)을 따르는 것입니다. 코딩 에이전트가 빌드 절차를 읽는 파일이 AGENTS.md라면, DESIGN.md는 디자인 에이전트(Design Agent)와 코딩 에이전트가 함께 읽는 시각 언어 사양서(Visual Language Specification)에 해당합니다. Figma 익스포트나 JSON 스키마, 별도의 도구가 필요 없이 마크다운 한 파일을 프로젝트 루트에 두기만 하면, Claude Code, Cursor, Google Stitch와 같은 에이전트가 즉시 같은 시각 언어로 UI를 생성할 수 있습니다. 마크다운은 LLM이 가장 잘 읽는 포맷이기 때문에 별도 파싱이나 구성 없이 바로 활용할 수 있다는 점이 특징입니다.

저장소에는 Apple, Stripe, Notion, Linear, Vercel, Spotify 같은 콘텐츠/SaaS 브랜드부터 NVIDIA, Anthropic Claude, Mistral, Cohere, Together AI 같은 AI 플랫폼, Tesla, Ferrari, Lamborghini 같은 자동차 브랜드까지 71개 이상의 사이트가 카테고리별로 정리되어 있습니다. 각 사이트별로 DESIGN.md 본문 외에도 라이트와 다크 테마의 시각 카탈로그(preview.html, preview-dark.html)가 함께 제공되어, 추출된 디자인 토큰이 실제로 어떻게 보이는지 즉시 확인할 수 있습니다.

DESIGN.md와 AGENTS.md의 역할 비교

코딩 에이전트가 프로젝트를 이해하는 방식은 점점 더 표준화된 마크다운 문서를 통해 이루어지고 있습니다. AGENTS.md가 "이 프로젝트를 어떻게 빌드하고 테스트하며 배포하는가"라는 운영적 지식을 정리한다면, DESIGN.md는 "이 프로젝트가 어떤 시각 언어를 따르는가"를 정의합니다. 즉, AGENTS.md 및 DESIGN.md의 두 파일이 함께 존재할 때 비로소 에이전트는 빌드 절차와 시각 일관성을 동시에 지키는 결과물을 만들어낼 수 있습니다.

파일	읽는 주체	정의 대상
`AGENTS.md`	코딩 에이전트	프로젝트를 어떻게 빌드/실행할지
`DESIGN.md`	디자인/코딩 에이전트	UI가 어떻게 보이고 동작해야 할지

Awesome DESIGN.md의 9가지 표준 섹션 구조

저장소에 포함된 모든 DESIGN.md는 Stitch DESIGN.md Format 사양을 따르되, 에이전트가 더 정확한 결과를 내도록 9개 섹션으로 확장되어 있습니다. 각 섹션은 단순한 자유 서술이 아니라 에이전트가 토큰 단위로 추출하여 사용할 수 있는 구조화된 표와 가이드로 구성됩니다. 예를 들어 색상 팔레트 섹션은 의미적 이름(Semantic Name)과 16진수 값, 그리고 어떤 역할로 사용되는지가 함께 기재됩니다.

번호	섹션	정의하는 내용
1	Visual Theme & Atmosphere	분위기, 밀도, 디자인 철학
2	Color Palette & Roles	의미적 이름과 16진수 값, 기능적 역할
3	Typography Rules	폰트 패밀리와 위계 표
4	Component Stylings	버튼, 카드, 입력 필드, 내비게이션 상태
5	Layout Principles	간격 스케일, 그리드, 여백 철학
6	Depth & Elevation	그림자 시스템, 표면 위계
7	Do's and Don'ts	디자인 가드레일과 안티패턴
8	Responsive Behavior	브레이크포인트, 터치 타깃, 축소 전략
9	Agent Prompt Guide	빠른 컬러 참조와 즉시 사용 가능한 프롬프트

특히 9번 항목인 Agent Prompt Guide 섹션이 인상적인데, 디자인 시스템을 단순히 기술하는 데 그치지 않고 에이전트가 실제 프롬프트로 곧바로 사용할 수 있는 형태의 지침을 함께 제공합니다. 이 덕분에 사용자는 별도의 변환 작업 없이 기존 코딩 에이전트에게 DESIGN.md 자체를 컨텍스트로 넘겨주기만 해도 일관된 결과를 받을 수 있습니다.

Awesome DESIGN.md에 수록된 카테고리

저장소는 단순한 디자인 모음이 아니라, AI/IT 생태계와 전통 산업이 모두 망라된 카탈로그를 제공합니다. AI/LLM 카테고리에는 Anthropic Claude, Cohere, ElevenLabs, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI 등이 포함되어 있어, AI 제품을 만드는 팀이 자사 톤에 맞는 베이스 라인을 빠르게 잡는 데 활용할 수 있습니다.

개발자 도구 카테고리에는 Cursor, Expo, Lovable, Raycast, Vercel, Warp 등이 들어 있고, 백엔드와 데이터베이스 카테고리에는 ClickHouse, MongoDB, PostHog, Sentry, Supabase가 포함됩니다. 그 외에도 Apple, NVIDIA, Pinterest, Spotify, The Verge, Uber, WIRED 등 미디어와 컨슈머 테크 분야, BMW, Bugatti, Ferrari, Lamborghini, Tesla 등 자동차 분야까지 폭넓게 다루고 있어, 개인 프로젝트나 클라이언트 작업에서 다양한 톤을 빠르게 시도해 볼 수 있는 장점이 있습니다.

Awesome DESIGN.md 사용법

사용 절차는 매우 단순합니다. 원하는 사이트의 DESIGN.md 파일을 프로젝트 루트에 복사하고, 코딩 에이전트에게 해당 파일을 참조하도록 지시하기만 하면 됩니다. Claude Code, Cursor, Google Stitch 등 마크다운을 컨텍스트로 받아들이는 모든 에이전트에서 동일한 방식으로 동작합니다.

# 예시: Stripe 스타일을 적용하고 싶을 때
curl -O https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/sites/stripe/DESIGN.md

# 코딩 에이전트에게 DESIGN.md를 참조하도록 요청
# "DESIGN.md를 따라 결제 페이지의 레이아웃과 컴포넌트를 만들어 줘"

DESIGN.md를 활용한 워크플로우 예시는 다음과 같이 구성할 수 있습니다.

# 코딩 에이전트에게 보내는 프롬프트 예시

다음 DESIGN.md 파일을 시각 언어의 단일 출처(Single Source of Truth)로 사용해 주세요.

요구사항:
1. 색상은 DESIGN.md의 Color Palette & Roles 섹션에 정의된 의미적 이름만 사용
2. 타이포그래피는 Typography Rules의 위계를 그대로 따를 것
3. 버튼/카드/입력 필드는 Component Stylings 섹션의 상태 명세를 준수
4. 반응형은 Responsive Behavior의 브레이크포인트를 사용

작업: 사용자 가입 폼이 있는 랜딩 페이지를 만들어 주세요.

라이선스

Awesome DESIGN.md 프로젝트는 MIT 라이선스로 공개되어 있어, 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다. 다만 저장소에 포함된 디자인 토큰은 공개적으로 노출된 CSS 값에서 추출된 것으로, 각 브랜드의 시각 정체성에 대한 소유권을 주장하지 않는다는 점이 명시되어 있습니다.

Awesome DESIGN.md 공식 홈페이지

DESIGN.md 포맷 문서

Awesome DESIGN.md 프로젝트 GitHub 저장소

더 읽어보기

이 글은 GPT 모델로 정리한 글을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 덧글로 알려주시기를 부탁드립니다.

파이토치 한국 사용자 모임이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일로 보내드립니다! (기본은 Weekly지만 Daily로 변경도 가능합니다.)

아래쪽에 좋아요를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~