--- name: modu-ai/design-system-library source: https://app.decimal.ai/s/modu-ai-design-system-library@2/SKILL.md source_sha256: 20453f5b7a13 --- # 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) 모든 HTML 산출물의 기본 선택지. 사용자가 명시하지 않아도 결과물 성격에 따라 자동 추천합니다. | 테마 | 무드 | 캔버스 | 강조 | 폰트 | 적합 산출물 | |------|------|--------|------|------|-------------| | **`claude`** | warm editorial (default) | cream `#faf9f5` | coral `#cc785c` | Copernicus serif + StyreneB sans | 보고서·사업계획서·편집성 문서 | | **`clickhouse`** | high-contrast engineering | near-black `#0a0a0a` | electric yellow `#faff69` | Inter 700 | 기술 리포트·데이터 대시보드·개발자 문서 | | **`clay`** | playful B2B | cream `#fffaf0` | 6-color saturated cards (pink/teal/lavender/peach/ochre) | Plain Black/Inter | 랜딩·마케팅·제품 소개 | 상세 토큰: [`systems/anthropic-claude.md`](systems/anthropic-claude.md) · [`systems/clickhouse.md`](systems/clickhouse.md) · [`systems/clay.md`](systems/clay.md) ### 자동 추천 휴리스틱 | 산출물 | 추천 테마 | |--------|-----------| | 주간 현황·경영 요약·사업계획서 | `claude` (warm editorial) | | 인시던트 리포트·데이터 리포트·API 문서 | `clickhouse` (다크 엔지니어링) | | 랜딩·제품 소개·마케팅 원고 | `clay` (playful saturated) | | 재무제표·법률 문서 | `claude` (편집성·신뢰) | --- ## 전체 75개 카탈로그 [`systems/registry.md`](systems/registry.md) 참조 — 분류(light/warm/dark) · 캔버스 · primary 색 · 폰트 · 무드 메타 포함. 전체 75개 시스템(56개 풍부 분석 + 19개 경량 토큰 ⚙️) — 각 `systems/.md`에 토큰 보관, `registry.md`에 휘도 기반 분류(light 48 · dark 25 · warm 2)·메타 표기. 기본 3테마(claude/clickhouse/clay)는 Tailwind 매핑 검증 완료. 19개 경량(⚙️)은 `테마_컴포넌트_쇼케이스_전체.html`에서 추출 — 풍부한 분석·typography 스케일은 추후 보강. --- ## Tailwind Play CDN 통합 [`mapping/tailwind.md`](mapping/tailwind.md) 참조 — YAML design token → Tailwind CDN inline config 매핑 규칙 + shadcn vanilla 컴포넌트 변환표. **핵심 패턴** (단일 파일 HTML 내): ```html

...

``` --- ## shadcn vanilla 컴포넌트 [`components/`](components/) — shadcn UI 컴포넌트를 React 없이 vanilla HTML + Tailwind utility로 재현한 참조 마크업. | 컴포넌트 | shadcn 원본 | vanilla 매핑 | |----------|-------------|--------------| | Card | `Card` / `CardHeader` / `CardContent` | `div.rounded-lg.border.p-8` + token classes | | Button | `Button` (variant: default/secondary/ghost) | `button.inline-flex.rounded-md.px-5.py-3` + variant class | | Badge | `Badge` | `span.inline-flex.rounded-full.px-3.py-1.text-xs` | | Table | `Table` / `TableHeader` / `TableRow` | semantic `table.thead.tbody.tr` + token borders | | Tabs | `Tabs` / `TabsList` | `
` 또는 vanilla JS tab + token classes | | Alert | `Alert` | `div.rounded-lg.border.p-4` + semantic color | 각 컴포넌트의 풀 마크업(변형·접근성 메모 포함)은 개별 파일 — [`card.md`](components/card.md) · [`button.md`](components/button.md) · [`badge.md`](components/badge.md) · [`table.md`](components/table.md) · [`tabs.md`](components/tabs.md) · [`alert.md`](components/alert.md). 토큰 매핑 규칙은 [`mapping/tailwind.md`](mapping/tailwind.md) §1·§3. --- ## 소비자 연동 ### doc-html-report (moai-coworker) `moai-officer:doc-html-report`에 `design_system` 입력 파라미터 추가: - 미지정 → 기존 0의존 템플릿 (Anthropic 영감 ivory/slate/clay, 하위 호환) - `design_system: claude|clickhouse|clay|<75개 중>` → 본 라이브러리에서 토큰 로드 → Tailwind Play CDN + shadcn vanilla 렌더 체인 예시: ``` [텍스트 스킬] → ai-slop-reviewer → doc-html-report (design_system: clickhouse) ``` ### Claude Design 핸드오프 (moai-designer) `design-system-prep`가 사용자가 지정한 시스템(또는 브랜드 무드 매칭)을 본 라이브러리에서 로드 → DESIGN.md 합성. `design-handoff`의 references.md / context.md에 design-system 지침으로 포함되어 claude.com Design 세션에 paste. --- ## 워크플로우 1. **시스템 선택** — 사용자 명시 또는 산출물 성격 기반 자동 추천(위 휴리스틱) 2. **토큰 로드** — `systems/.md`의 YAML frontmatter(colors/typography/rounded/spacing/components) 파싱 3. **Tailwind config 생성** — `mapping/tailwind.md` 규칙으로 `tailwind.config` 객체 생성 4. **shadcn vanilla 매핑** — 산출물 구조 카드/버튼/테이블을 `components/` 참조 마크업으로 치환 5. **단일 파일 렌더** — CDN script + config + 마크업을 단일 `.html`로 출력 --- ## 사용 예시 **예시 1: ClickHouse 다크 테마 기술 리포트** ``` 결제 게이트웨이 502 장애를 ClickHouse 스타일 다크 테마로 인시던트 리포트 HTML로 만들어줘. ``` **예시 2: Claude warm 테마 사업계획서** ``` 사업계획서를 Claude 디자인(warm cream + coral) HTML로 렌더해줘. ``` **예시 3: Clay playful 테마 랜딩** ``` 신제품 랜딩 페이지를 Clay 스타일(컬러 카드)로 HTML로 만들어줘. ``` **예시 4: Claude Design 핸드오프용 시스템 정리** ``` Claude Design에 올릴 디자인 시스템 자료를 Linear 스타일 기반으로 정리해줘. ``` --- ## 하지 않는 것 - 본 라이브러리는 렌더 로직을 소유하지 않습니다 — 렌더는 doc-html-report가 담당 - React / Vue / 빌드 단계를 도입하지 않습니다 — 단일 파일·CDN·vanilla 고수 - 0의존 self-contained 출력을 요구하는 경우(이메일 첨부·오프라인·인쇄)는 기존 doc-html-report 템플릿을 사용하세요 (design_system 미지정) - 브랜드 저작권 — 각 시스템은 **분석·참고용 token**이며, 저장소 Apache-2.0 라이선스의 **적용 범위 밖**입니다. 각 브랜드의 디자인·상표·서체 권리는 해당 소유자에게 있습니다. 상업적 산출물에 적용하기 전 반드시 [`BRAND-NOTICE.md`](BRAND-NOTICE.md)의 사용 경계와 오픈 라이선스 대체 서체표를 확인하세요 --- ## 참고 문서 - [`systems/registry.md`](systems/registry.md) — 75개 전체 카탈로그 인덱스 - [`systems/anthropic-claude.md`](systems/anthropic-claude.md) · [`systems/clickhouse.md`](systems/clickhouse.md) · [`systems/clay.md`](systems/clay.md) — 기본 3테마 상세 토큰 (claude.md는 `CLAUDE.md` 자동 로드 회피를 위해 `anthropic-claude.md`로 명명) - [`systems/keynote-editorial-dark.md`](systems/keynote-editorial-dark.md) — 프리미엄 에디토리얼 키노트 레시피(다크, no_box·거대숫자 3단·4모서리·단일 accent). 일반 다크 팔레트가 아닌 슬라이드 구성 계약 - [`references/korean-design-systems.md`](references/korean-design-systems.md) — 한국 기업 공개 디자인시스템 + 무료 한글 폰트 서베이 (당근 SEED·채널톡 Bezier·KRDS·Pretendard + 토스/브랜드 라이선스 함정 경고) - [`mapping/tailwind.md`](mapping/tailwind.md) — YAML 토큰 → Tailwind CDN config 매핑 규칙 - [`components/`](components/) — shadcn vanilla 컴포넌트 참조 마크업