프로젝트 소개

## 개요 design-md-hub는 AI 코딩 에이전트가 읽을 수 있는 단일 평문 `DESIGN.md` 파일 형태로 captured된 120개 브랜드 디자인 시스템의 오픈소스 리포지토리입니다. 모든 명세는 브랜드의 실제 라이브 프로덕션 웹사이트에서 역추적되어, 기록된 폰트, hex 값, 로고, 카피는 추측이 아닌 실제 소스에서 가져옵니다. 라이브 사이트에서 확인할 수 없는 값은 생략됩니다. ## DESIGN.md 구성 항목 - 색상 팔레트와 시맨틱 토큰 - 타이포그래피 스케일 및 폰트 선택 - 컴포넌트 패턴과 variants - 간격, 그림자, border radius - 레이아웃 원칙과 반응형 동작 - 톤, 가드레일, 주의사항 각 브랜드 폴더에는 빌드 단계 없이 브라우저에서 직접 열 수 있는 자체 실행형 `preview.html`도 제공됩니다. ## README에 설명된 워크플로우 1. 브랜드 라이브 사이트(HTML, CSS, 폰트)를 가져와서 실제 토큰을 추출합니다. 2. 해당 토큰들이 평문 `DESIGN.md` 스펙이 됩니다. 3. 매칭되는 `preview.html`이 브라우저에서 정체성을 확인하도록 보여줍니다. 4. 코딩 에이전트가 `DESIGN.md`를 읽어 해당 브랜드 톤의 UI를 생성합니다. ## 커버리지 개발자 도구, AI/LLM 제품, 디자인 도구, 핀테크, 분석, 옵저버빌리티, 생산성 앱, 인증 서비스, 데이터 플랫폼, 커머스, 자동화 등 다양한 카테고리를 포괄합니다. GitHub, Figma, Cursor, Linear, Stripe, Vercel, Supabase, Notion, Docker, MongoDB, Cloudflare, OpenAI, Claude, Mistral AI, ElevenLabs, Tailwind CSS, shadcn/ui, n8n, Zapier, Grafana 등 여러 브랜드가 포함되어 있습니다. 미리보기를 탐색할 수 있는 라이브 갤러리 사이트가 README에서 링크됩니다. ## 사용 방법 1. 목록에서 `DESIGN.md`를 선택합니다. 2. 프로젝트 루트에 복사합니다. 3. 코딩 에이전트에게 프로젝트 루트의 DESIGN.md를 따르라고 지시합니다. 4. 일관된 스타일링으로 컴포넌트, 페이지 또는 전체 앱을 생성합니다. 페이월, 회원가입, API 키가 필요 없으며, CONTRIBUTING.md를 통해 기여를接受합니다. ## 주의사항 README에 따르면 이 명세들은 교육 및 프로토타입 목적으로 제작된 비공식 참조 자료이며, 공개 브랜드 사이트에서 역추적된 것으로, 해당 브랜드가 승인하거나 제휴하지 않았습니다. 상표 및 로고는 각 소유자에게 보유됩니다. 이 프로젝트는 MIT 라이선스로 배포됩니다.