Awesome DESIGN.md: AI 에이전트를 위한 UI 디자인 라이브러리

2026.04.07 / 동준상.넥스트플랫폼
(AWS SAA, AWS AIF, GCP GenAI Leader)

핵심 요약 (Executive Summary)

Awesome Design.md for AI Agent -infographic by NextPlatform

Awesome DESIGN.md 프로젝트는 인기 웹사이트들의 디자인 시스템을 마크다운(Markdown) 형식으로 문서화하여 수집한 오픈소스 저장소입니다.
이 프로젝트의 핵심은 DESIGN.md라는 새로운 개념을 활용하여, 복잡한 Figma 파일이나 JSON 스키마 없이도 AI 코딩 에이전트가 특정 웹사이트의 디자인 스타일을 정확하게 재현할 수 있도록 돕는 것입니다.
사용자는 원하는 사이트의 DESIGN.md 파일을 자신의 프로젝트 루트에 복사한 뒤, AI 에이전트에게 “이 파일과 똑같이 생긴 페이지를 만들어줘”라고 지시함으로써 원본 사이트와 일치하는 고품질의 UI를 구축할 수 있습니다.
현재 이 저장소는 17,000개 이상의 스타(Star)를 기록하며 AI 개발 커뮤니티에서 큰 주목을 받고 있습니다.

직접 참조 가능한 UI 디자인 목록

Awesome Design.md for AI Agent -infographic by NextPlatform

1. DESIGN.md의 개념 및 핵심 가치

Awesome Design.md for AI Agent -slide1 by NextPlatform

1.1 정의 및 기원

개념: AI 에이전트가 읽고 일관된 UI를 생성할 수 있도록 설계된 평문(Plain-text) 디자인 시스템 문서입니다.
기원: Google Stitch에서 처음 도입한 개념입니다.
특징: 별도의 도구나 복잡한 설정 없이 마크다운 형식으로만 구성됩니다. 마크다운은 대규모 언어 모델(LLM)이 가장 잘 이해하는 형식이므로 파싱이나 구성 과정이 필요 없습니다.

1.2 에이전트 전용 파일 구성

프로젝트는 에이전트의 역할에 따라 두 가지 핵심 파일을 구분하여 사용합니다.

파일명	대상 에이전트	정의 내용
AGENTS.md	코딩 에이전트	프로젝트 구축 방법 및 로직
DESIGN.md	디자인 에이전트	프로젝트의 시각적 외형, 분위기, 스타일

2. DESIGN.md의 상세 구조

Awesome Design.md for AI Agent -slide2 by NextPlatform

저장소 내의 모든 DESIGN.md 파일은 Stitch 포맷을 기반으로 하며, AI가 정밀하게 UI를 재현할 수 있도록 9개의 표준 섹션으로 확장 구성되어 있습니다.

섹션	캡처 및 정의 내용
Visual Theme & Atmosphere	무드, 밀도(Density), 전반적인 디자인 철학
Color Palette & Roles	시맨틱 이름, HEX 코드, 기능적 역할 정의
Typography Rules	폰트 패밀리, 전체 텍스트 계층 구조 테이블
Component Stylings	버튼, 카드, 입력창, 내비게이션 및 각 상태(State)
Layout Principles	간격 스케일(Spacing), 그리드 시스템, 여백 철학
Depth & Elevation	그림자 시스템, 서피스(Surface) 계층 구조
Do’s and Don’ts	디자인 가이드라인 및 피해야 할 안티패턴
Responsive Behavior	브레이크포인트, 터치 타깃, 화면 축소 전략
Agent Prompt Guide	색상 빠른 참조, 즉시 사용 가능한 프롬프트 가이드

각 사이트 패키지에는 AI가 읽는 DESIGN.md 외에도, 시각적으로 확인 가능한 색상 견본과 타입 스케일을 포함한 preview.html 및 preview-dark.html 파일이 함께 제공됩니다.

3. 주요 컬렉션 및 카테고리별 특성

Awesome Design.md for AI Agent -slide4 by NextPlatform

저장소는 AI, 개발 도구, 핀테크 등 다양한 산업 분야의 60개 이상 서비스 디자인 시스템을 수록하고 있습니다.

3.1 AI & 머신러닝 (AI & Machine Learning)

Claude: 따뜻한 테라코타 액센트, 깔끔한 에디토리얼 레이아웃.
ElevenLabs: 다크 시네마틱 UI, 오디오 파형 미학.
Mistral AI: 프랑스 공학적 미니멀리즘, 보라색 톤.
VoltAgent: 보이드 블랙 캔버스, 에메랄드 액센트, 터미널 네이티브 스타일.
xAI: 극명한 모노크롬, 미래지향적 미니멀리즘.

3.2 개발자 도구 및 플랫폼 (Developer Tools & Platforms)

Vercel: 흑백의 정밀함, Geist 폰트 활용.
Linear: 극도로 미니멀하고 정밀한 인터페이스, 보라색 액센트.
Supabase: 다크 에메랄드 테마, 코드 중심적 디자인.
Cursor: AI 우선 코드 에디터, 매끄러운 다크 인터페이스와 그라데이션.
Warp: 현대적 터미널, IDE 스타일의 블록 기반 UI.

3.3 인프라, 클라우드 및 핀테크

Stripe: 시그니처 보라색 그라데이션, 정교한 300 폰트 웨이트.
Coinbase: 신뢰 중심의 블루 아이덴티티, 제도적 느낌.
Revolut: 정밀한 핀테크 스타일, 그라데이션 카드가 포함된 다크 UI.
MongoDB: 초록색 잎 브랜딩, 개발자 문서 중심 디자인.

3.4 디자인, 생산성 및 엔터프라이즈

Notion: 따뜻한 미니멀리즘, 세리프 제목, 부드러운 서피스.
Figma: 활기찬 멀티 컬러, 장난기 넘치면서도 전문적인 스타일.
Apple: 프리미엄 화이트 스페이스, SF Pro 폰트, 시네마틱 이미지.
Airbnb: 따뜻한 코랄 액센트, 사진 중심의 라운드 UI.
Spotify: 다크 배경 위 활기찬 그린, 앨범 아트 중심의 대담한 타이포그래피.

웹사이트 이름	서비스 설명	주요 디자인 특징	색상 및 테마
Claude	Anthropic의 AI 어시스턴트	깨끗한 에디토리얼 레이아웃	따뜻한 테라코타 액센트
Cohere	엔터프라이즈 AI 플랫폼	데이터가 풍부한 대시보드 미학	활기찬 그라데이션
ElevenLabs	AI 음성 플랫폼	시네마틱 UI, 오디오 파형 미학	다크 테마
Minimax	AI 모델 제공업체	대담하고 어두운 인터페이스	네온 액센트가 있는 다크 인터페이스
Mistral AI	오픈 웨이트 LLM 제공업체	프랑스 엔지니어링 방식의 미니멀리즘	보라색 톤
Ollama	로컬에서 LLM 실행	터미널 중심의 단순함	흑백(Monochrome)의 단순함
OpenCode AI	AI 코딩 플랫폼	개발자 중심의 디자인	개발자 중심의 다크 테마
Replicate	API를 통한 머신러닝 모델 실행	코드 중심의 레이아웃	깨끗한 화이트 캔버스
RunwayML	AI 비디오 생성	시네마틱 UI, 미디어 중심 레이아웃	시네마틱 다크 UI
Together AI	오픈 소스 AI 인프라	기술적이고 청사진(Blueprint) 스타일의 디자인	기술적인 블루프린트 스타일
VoltAgent	AI 에이전트 프레임워크	터미널 네이티브 스타일	보이드 블랙(Void-black) 캔버스, 에메랄드 액센트
xAI	일론 머스크의 AI 연구소	미래 지향적 미니멀리즘	강렬한 흑백(Stark monochrome)
Cursor	AI 우선 코드 에디터	세련된 인터페이스	세련된 다크 인터페이스, 그라데이션 액센트
Expo	React Native 플랫폼	좁은 자간, 코드 중심 디자인	다크 테마
Linear	엔지니어를 위한 프로젝트 관리 도구	극도의 미니멀리즘과 정밀함	보라색 액센트
Lovable	AI 풀스택 빌더	친근한 개발자 미학	장난스러운 그라데이션
Mintlify	문서화 플랫폼	읽기에 최적화된 깨끗한 레이아웃	그린 액센트
PostHog	제품 분석 도구	장난스러운 고슴도치 브랜딩	개발자 친화적인 다크 UI
Raycast	생산성 런처	세련된 다크 크롬 디자인	활기찬 그라데이션 액센트
Resend	개발자용 이메일 API	미니멀한 디자인과 고정폭 글꼴(Monospace) 액센트	미니멀 다크 테마
Sentry	에러 모니터링	데이터 밀도가 높은 대시보드	다크 대시보드, 핑크-보라 액센트
Supabase	오픈 소스 Firebase 대안	코드 우선 디자인	다크 에메랄드 테마
Superhuman	빠른 이메일 클라이언트	프리미엄 UI, 키보드 중심의 사용성	프리미엄 다크 UI, 보라색 광채
Vercel	프론트엔드 배포 플랫폼	Geist 폰트를 사용한 정밀한 디자인	블랙 앤 화이트
Warp	현대적인 터미널	IDE와 유사한 인터페이스, 블록 기반 명령 UI	다크 테마
Zapier	자동화 플랫폼	친근한 일러스트레이션 중심	따뜻한 오렌지
ClickHouse	빠른 분석용 데이터베이스	기술 문서 스타일	옐로우 액센트
Composio	도구 통합 플랫폼	다채로운 통합 아이콘	현대적인 다크 테마
HashiCorp	인프라 자동화	기업용의 깨끗한 스타일	블랙 앤 화이트
MongoDB	문서 지향 데이터베이스	개발자 문서 중심	그린 리프(Green leaf) 브랜딩
Sanity	헤드리스 CMS	콘텐츠 우선의 에디토리얼 레이아웃	레드 액센트
Stripe	결제 인프라	Weight-300의 우아함	상징적인 퍼플 그라데이션
Airtable	스프레드시트-데이터베이스 하이브리드	구조화된 데이터 미학	다채롭고 친근함
Cal.com	오픈 소스 스케줄링 도구	개발자 중심의 단순함	깨끗한 중립적(Neutral) UI
Clay	크리에이티브 에이전시	유기적인 형태, 아트 디렉팅된 레이아웃	부드러운 그라데이션
Figma	협업 디자인 도구	장난스러우면서도 전문적인 디자인	활기찬 멀티 컬러
Framer	웹사이트 빌더	모션 중심, 디자인 우선의 레이아웃	대담한 블랙 앤 블루
Intercom	고객 메시징 플랫폼	대화형 UI 패턴	친근한 블루 팔레트
Miro	시각적 협업 도구	무한 캔버스 미학	밝은 옐로우 액센트
Notion	올인원 워크스페이스	세리프체 제목, 부드러운 표면 질감	따뜻한 미니멀리즘
Pinterest	시각적 탐색 플랫폼	메이슨리(Masonry) 그리드, 이미지 중심	레드 액센트
Webflow	비주얼 웹 빌더	세련된 마케팅 사이트 미학	블루 액센트
Coinbase	암호화폐 거래소	신뢰 중심, 기관적인 느낌	깨끗한 블루 아이덴티티
Kraken	암호화폐 거래 플랫폼	데이터 밀도가 높은 대시보드	보라색 액센트의 다크 UI
Revolut	디지털 뱅킹	그라데이션 카드, 핀테크의 정밀함	세련된 다크 인터페이스
Wise	해외 송금 서비스	친근하고 명확한 디자인	밝은 그린 액센트
Airbnb	여행 숙박 마켓플레이스	사진 중심, 둥근 UI 요소	따뜻한 코랄 액센트
Apple	소비자 가전	프리미엄 여백 활용, SF Pro 폰트, 시네마틱 이미지	화이트 스페이스 중심의 프리미엄 테마
BMW	럭셔리 자동차	정밀한 독일 엔지니어링 미학	다크 프리미엄 서피스
IBM	엔터프라이즈 기술	Carbon 디자인 시스템	구조화된 블루 팔레트
NVIDIA	GPU 컴퓨팅	기술적인 파워 미학	그린-블랙 에너지
SpaceX	우주 기술	전체 화면 이미지 활용, 미래 지향적	강렬한 블랙 앤 화이트
Spotify	음악 스트리밍	굵은 서체, 앨범 아트 중심	어두운 배경 위 활기찬 그린
Uber	모빌리티 플랫폼	조밀한 서체, 도시적 에너지	대담한 블랙 앤 화이트

4. 활용 및 기여 방법

Awesome Design.md for AI Agent -slide3 by NextPlatform

4.1 사용 워크플로우

원하는 웹사이트의 DESIGN.md 파일을 선택하여 자신의 프로젝트 루트 폴더에 복사합니다.
사용 중인 AI 코딩 에이전트에게 해당 파일을 참조하도록 지시합니다.
에이전트는 해당 문서의 토큰과 규칙을 해석하여 원본과 일치하는 UI 코드를 생성합니다.

4.2 프로젝트 관리 및 라이선스

라이선스: MIT License를 따르며, 추출된 디자인 토큰은 공개적으로 보이는 CSS 값을 나타냅니다.
기여 방법: 사용자는 잘못된 색상 수정, 누락된 토큰 추가, 설명 보강 등을 통해 기여할 수 있습니다. 새로운 사이트의 디자인 시스템 생성을 요청하려면 GitHub 이슈 템플릿을 통해 신청할 수 있습니다.
주요 기여자의: Necati Özmen, Omer Aplak, Doyup Lee 등이 프로젝트 개발에 참여하고 있습니다.