Awesome Design.MD - 유명 웹사이트 디자인 시스템을 내 사이트에 적용하기
(github.com/VoltAgent)- DESIGN.md는 Google Stitch가 도입한 개념으로, AI 에이전트가 읽고 일관된 UI를 생성하기 위한 텍스트 디자인 문서
- Figma, JSON 스키마, 별도 툴링 없이 마크다운 파일 하나만 프로젝트 루트에 복사하면 AI 코딩 에이전트가 즉시 UI 스타일 인식
- 기존
AGENTS.md와 쌍을 이루며,DESIGN.md는 시각적 외형과 느낌을 정의 - 각 파일은 색상 팔레트, 타이포그래피, 컴포넌트 스타일링, 레이아웃, 반응형 동작 등 9개 표준 섹션으로 구성
- 각 사이트마다
DESIGN.md+preview.html+preview-dark.html3종 세트 제공 - 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
근데 보통 프론트엔드 프레임웤 안에 디자인 시스템을 코드 조각 형태로 가지고 있어서, 이걸 공통으로 사용해야 하지 않나요..?
DESIGN.md를 따른다는 건, 해당 컬러와 지시사항을 매번 자의적으로 생성하겠다는 의미 같은데 ...