design-system-library

Installation
SKILL.md

design-system-library — 75개 브랜드 디자인 시스템 SSOT

목적과 범위

글로벌 브랜드 75종(56개 풍부 분석 + 19개 경량 토큰)의 디자인 시스템(token 기반 분석 결과)을 단일 진실 원천(single source of truth)으로 보관하고, HTML 산출물에 적용 가능한 형태로 제공합니다.

두 가지 소비 경로:

  1. doc-html-report / HTML 문서 렌더design_system 파라미터로 시스템 선택 → Tailwind Play CDN config + shadcn vanilla 컴포넌트로 단일 파일 HTML 렌더
  2. Claude Design 핸드오프design-system-prep가 본 라이브러리 시스템을 DESIGN.md 합성 소스로 사용 → design-handoff의 references/context에 지침 포함

핵심 원칙:

  • 라이브러리는 데이터(token + 분석) SSOT — 렌더 로직은 소비자(doc-html-report)가 소유
  • Tailwind Play CDN으로 단일 파일·외부 빌드 없이 브랜드 토큰 적용 (인터넷 연결 필요)
  • shadcn 컴포넌트는 React가 아닌 vanilla HTML/CSS로 재현 (단일 파일·React 불필요)
  • 기존 doc-html-report 0의존 템플릿은 유지 — design_system 미지정 시 하위 호환

3개 기본 테마 (Default)

Installs
2
GitHub Stars
295
First Seen
Jun 22, 2026
design-system-library — modu-ai/moai-cowork