Awesome Design.MD - 유명 웹사이트 디자인 시스템을 내 사이트에 적용하기

• DESIGN.md는 Google Stitch가 도입한 개념으로, AI 에이전트가 읽고 일관된 UI를 생성하기 위한 텍스트 디자인 문서
• Figma, JSON 스키마, 별도 툴링 없이 마크다운 파일 하나만 프로젝트 루트에 복사하면 AI 코딩 에이전트가 즉시 UI 스타일 인식
• 기존 AGENTS.md와 쌍을 이루며, DESIGN.md는 시각적 외형과 느낌을 정의
• 각 파일은 색상 팔레트, 타이포그래피, 컴포넌트 스타일링, 레이아웃, 반응형 동작 등 9개 표준 섹션으로 구성
• 각 사이트마다 DESIGN.md + preview.html + preview-dark.html 3종 세트 제공
• Claude, Vercel, Stripe, Notion, Figma, Cursor 등 AI·개발툴·핀테크·엔터프라이즈 60개 이상 서비스의 디자인 시스템 수록
  • 원하는 사이트의 DESIGN.md를 프로젝트 루트에 복사하고, AI 에이전트에게 해당 파일을 참조하여 UI를 빌드하도록 지시
  • "이렇게 생긴 페이지를 만들어줘" 한 마디로 원본 사이트와 일치하는 UI 생성 가능
• MIT 라이선스

각 DESIGN.md 파일 구성

• Stitch DESIGN.md 포맷을 따르며, 아래 9개 섹션으로 확장 구성
  | # | 섹션 | 캡처 내용 |
  |---|------|-----------|
  | 1 | Visual Theme & Atmosphere | 무드, 밀도, 디자인 철학 |
  | 2 | Color Palette & Roles | 색상명 + HEX + 기능적 역할 |
  | 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 | 색상 빠른 참조, 즉시 사용 가능한 프롬프트 |

포함된 컬렉션

• AI & Machine Learning: Claude, Cohere, ElevenLabs, Minimax, Mistral AI, Ollama, OpenCode AI, Replicate, RunwayML, Together AI, VoltAgent, xAI
• Developer Tools & Platforms: Cursor, Expo, Linear, Lovable, Mintlify, PostHog, Raycast, Resend, Sentry, Supabase, Superhuman, Vercel, Warp, Zapier
• Infrastructure & Cloud: ClickHouse, Composio, HashiCorp, MongoDB, Sanity, Stripe
• Design & Productivity: Airtable, Cal.com, Clay, Figma, Framer, Intercom, Miro, Notion, Pinterest, Webflow
• Fintech & Crypto: Coinbase, Kraken, Revolut, Wise
• Enterprise & Consumer: Airbnb, Apple, BMW, IBM, NVIDIA, SpaceX, Spotify, Uber