VoltAgent/awesome-design-md큐레이터 픽

Awesome DESIGN.md

DESIGN.md를 프로젝트에 복사하고 AI 에이전트에게 "이렇게 생긴 페이지를 만들어 줘"라고 말하면, 디자인 언어와 일관된 고품질 UI를 생성할 수 있습니다.

실제 디자인 깊이(분석된 패턴, 토큰, 규칙 포함)를 기반으로 구축되어 표면적인 결과물이 아닌 고품질 UI 생성을 보장합니다.

DESIGN.md란?

DESIGN.md는 Google Stitch에서 도입한 새로운 개념입니다. AI 에이전트가 읽고 일관된 UI를 생성하는 일반 텍스트 디자인 시스템 문서입니다.

단순한 마크다운 파일입니다. Figma 내보내기, JSON 스키마, 특별한 도구가 필요 없습니다. 프로젝트 루트에 넣으면 모든 AI 코딩 에이전트나 Google Stitch가 UI가 어떻게 보여야 하는지 즉시 이해합니다. 마크다운은 LLM이 가장 잘 읽는 형식이므로 파싱하거나 구성할 것이 없습니다.

이 저장소는 실제 웹사이트에서 추출한 즉시 사용 가능한 DESIGN.md 파일을 제공합니다.

DESIGN.md 요청

특정 웹사이트에 대한 DESIGN.md를 요청할 수 있으며, 비공개 요청은 독점적으로 전달됩니다.

AI 디자인 + 빌드 에코시스템 도구

(배너 이미지)

(스폰서 섹션)

컬렉션

AI 및 LLM 플랫폼

• Claude - Anthropic의 AI 어시스턴트. 따뜻한 테라코타 악센트, 깔끔한 편집 레이아웃
• Cohere - 엔터프라이즈 AI 플랫폼. 생생한 그라데이션, 데이터가 풍부한 대시보드 미학
• ElevenLabs - AI 음성 플랫폼. 어두운 시네마틱 UI, 오디오 파형 미학
• Minimax - AI 모델 제공업체. 네온 악센트가 있는 대담한 어두운 인터페이스
• Mistral AI - 오픈 가중치 LLM 제공업체. 프랑스 엔지니어링 미니멀리즘, 보라색 톤
• Ollama - 로컬에서 LLM 실행. 터미널 우선, 단색 단순함
• OpenCode AI - AI 코딩 플랫폼. 개발자 중심의 어두운 테마
• Replicate - API를 통한 ML 모델 실행. 깨끗한 흰색 캔버스, 코드 중심
• Runway - AI 창의 도구 플랫폼. 시네마틱 다크 히어로, 종이처럼 흰색 읽기 밴드, 독점 산세리프, 순수 검정색 알약 CTA
• Together AI - 오픈소스 AI 인프라. 기술적 청사진 스타일 디자인
• VoltAgent - AI 에이전트 프레임워크. 보이드 블랙 캔버스, 에메랄드 악센트, 터미널 네이티브
• xAI - Elon Musk의 AI 연구소. 엄격한 단색, 미래지향적 미니멀리즘

개발자 도구 및 IDE

• Cursor - AI 우선 코드 편집기. 세련된 어두운 인터페이스, 그라데이션 악센트
• Expo - React Native 플랫폼. 어두운 테마, 좁은 자간, 코드 중심
• Lovable - AI 풀스택 빌더. 장난기 있는 그라데이션, 친근한 개발 미학
• Raycast - 생산성 런처. 세련된 어두운 크롬, 생생한 그라데이션 악센트
• Superhuman - 빠른 이메일 클라이언트. 프리미엄 어두운 UI, 키보드 우선, 보라색 광채
• Vercel - 프론트엔드 배포 플랫폼. 흑백 정밀함, Geist 폰트
• Warp - 현대적인 터미널. 어두운 IDE 스타일 인터페이스, 블록 기반 명령 UI

백엔드, 데이터베이스 및 DevOps

• ClickHouse - 빠른 분석 데이터베이스. 노란색 악센트, 기술 문서 스타일
• Composio - 도구 통합 플랫폼. 화려한 통합 아이콘이 있는 현대적인 어두운 테마
• HashiCorp - 인프라 자동화. 엔터프라이즈급 깔끔함, 흑백
• MongoDB - 문서 데이터베이스. 녹색 잎 브랜딩, 개발자 문서 중심
• PostHog - 제품 분석. 장난기 있는 고슴도치 브랜딩, 개발자 친화적인 어두운 UI
• Sanity - 헤드리스 콘텐츠 플랫폼. 다크 퍼스트 편집 마케팅 표면, 112px 디스플레이 타입, IBM Plex Mono 기술 눈썹, 최우선 CTA를 위한 단일 산호색 악센트
• Sentry - 오류 모니터링. 어두운 대시보드, 데이터 밀집, 분홍-보라 악센트
• Supabase - 오픈소스 Firebase 대안. 어두운 에메랄드 테마, 코드 우선

생산성 및 SaaS

• Cal.com - 오픈소스 스케줄링. 깔끔한 중립 UI, 개발자 지향 단순함
• Intercom - 고객 메시징. 친근한 파란색 팔레트, 대화형 UI 패턴
• Linear - 엔지니어를 위한 프로젝트 관리. 초미니멀, 정밀함, 보라색 악센트
• Mintlify - 문서 플랫폼. 깔끔한 녹색 악센트, 읽기에 최적화
• Notion - 올인원 워크스페이스. 따뜻한 미니멀리즘, 세리프 제목, 부드러운 표면
• Resend - 개발자용 이메일 API. 미니멀한 어두운 테마, 고정폭 악센트
• Zapier - 자동화 플랫폼. 따뜻한 주황색, 친근한 일러스트레이션 중심

디자인 및 창의 도구

• Airtable - 스프레드시트-데이터베이스 하이브리드. 화려하고 친근하며 구조화된 데이터 미학
• Clay - 크리에이티브 에이전시. 유기적 형태, 부드러운 그라데이션, 아트 디렉션 레이아웃
• Figma - 협업 디자인 도구. 생생한 다색, 장난기 있으면서도 전문적
• Framer - 웹사이트 빌더. 대담한 검정과 파랑, 모션 우선, 디자인 중심
• Miro - 시각적 협업. 밝은 노란색 악센트, 무한 캔버스 미학
• Webflow - 비주얼 웹 빌더. 파란색 악센트, 세련된 마케팅 사이트 미학

핀테크 및 암호화폐

• Binance - 암호화폐 거래소. 단색 위의 대담한 Binance 노란색, 트레이딩 플로어 긴박감
• Coinbase - 암호화폐 거래소. 깔끔한 파란색 아이덴티티, 신뢰 중심, 기관 느낌
• Kraken - 암호화폐 거래 플랫폼. 보라색 악센트의 어두운 UI, 데이터 밀집 대시보드
• Mastercard - 글로벌 결제 네트워크. 따뜻한 크림색 캔버스, 궤도 알약 모양, 편집적 따뜻함
• Revolut - 디지털 뱅킹. 세련된 어두운 인터페이스, 그라데이션 카드, 핀테크 정밀함
• Stripe - 결제 인프라. 시그니처 보라색 그라데이션, weight-300 우아함
• Wise - 국제 송금. 밝은 녹색 악센트, 친근하고 명확함

전자상거래 및 소매

• Airbnb - 여행 마켓플레이스. 따뜻한 산호 악센트, 사진 중심, 둥근 UI
• Meta - 기술 소매점. 사진 우선, 이진 밝음/어두움 표면, Meta Blue CTA
• Nike - 운동 소매. 단색 UI, 대문자 Futura, 전체 너비 사진
• Shopify - 전자상거래 플랫폼. 다크 퍼스트 시네마틱, 네온 그린 악센트, 초경량 디스플레이 타입
• Starbucks - 커피 소매 플래그십. 4단계 어스 그린 시스템, 따뜻한 크림색 캔버스, 독점 SoDoSans 타이포그래피

미디어 및 소비자 기술

• Apple - 소비자 전자제품. 프리미엄 여백, SF Pro, 시네마틱 이미지
• HP - PC 및 프린터 제조사. 순수 흰색 캔버스, HP Electric Blue 신호 CTA, 기하학적 Forma DJR Micro, 파란색 쉐브론 장식
• IBM - 엔터프라이즈 기술. Carbon 디자인 시스템, 구조화된 파란색 팔레트
• NVIDIA - GPU 컴퓨팅. 녹색-검정 에너지, 기술적 파워 미학
• Pinterest - 시각적 발견 플랫폼. 빨간색 악센트, 벽돌형 그리드, 이미지 우선
• PlayStation - 게임 콘솔 소매. 3면 채널 레이아웃, 청록색 호버 스케일 상호작용
• SpaceX - 우주 기술. 엄격한 흑백, 전체 너비 이미지, 미래지향적
• Spotify - 음악 스트리밍. 어두운 배경에 생생한 녹색, 대담한 타입, 앨범 아트 중심
• The Verge - 기술 편집 미디어. 애시드 민트와 자외선 악센트, Manuka 디스플레이 타입
• Uber - 모빌리티 플랫폼. 대담한 흑백, 좁은 타입, 도시 에너지
• Vodafone - 글로벌 통신 브랜드. 기념비적인 대문자 디스플레이, Vodafone Red 챕터 밴드
• WIRED - 기술 잡지. 종이처럼 흰색 broadsheet 밀도, 커스텀 세리프, 잉크 블루 링크

자동차

• BMW - 럭셔리 자동차. 어두운 프리미엄 표면, 정밀한 독일 엔지니어링 미학
• BMW M - 퍼포먼스 자동차. 모터스포츠에서 영감을 받은 대비, M 컬러 악센트, 정밀 중심 레이아웃
• Bugatti - 럭셔리 하이퍼카. 시네마 블랙 캔버스, 단색 엄격함, 기념비적인 디스플레이 타입
• Ferrari - 럭셔리 자동차. 명암 흑백 편집, 극도로 드문 Ferrari Red
• Lamborghini - 럭셔리 자동차. 진정한 검정 대성당, 금색 악센트, LamboType 커스텀 네오 그로테스크
• Renault - 프랑스 자동차. 생생한 오로라 그라데이션

[...생략...]