SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsdesign-system-library

design-system-library

Design & creation

View repository

Updated 10-15 23:23

About this skill

design-system-library — 75 brand design systems SSOT

Purpose and Scope

Maintains the design systems (token-based analysis results) of 75 global brands (56 rich analyses + 19 lightweight token sets) as a single source of truth, and provides them in a form applicable to HTML outputs.

Two Consumption Paths:

  1. doc-html-report / HTML document rendering — design_system Select a system via the parameter → render a single-file HTML with Tailwind Play CDN config + shadcn vanilla components
  2. Claude Design Handoff — design-system-prepuses this library's systems as a DESIGN.md synthesis source → design-handoffincluded as guidance in references/context

Core Principles:

  • The library is the data (token + analysis) SSOT — rendering logic is owned by the consumer (doc-html-report)
  • Apply brand tokens with Tailwind Play CDN without a single file · external build (internet connection required)
  • shadcn components are reproduced not in React but in vanilla HTML/CSS (single file · no React required)
  • Keep the existing doc-html-report zero-dependency template — backward compatible when design_system is unspecified

3 Default Themes (Default)

The default choices for all HTML outputs. Even if the user does not specify, they are automatically recommended according to the nature of the deliverable.

Theme Mood Canvas Accent Font Suitable Outputs
claude warm editorial (default) cream #faf9f5 coral #cc785c Copernicus serif + StyreneB sans Reports · business plans · editorial documents
clickhouse high-contrast engineering near-black #0a0a0a electric yellow #faff69 Inter 700 Technical reports · data dashboards · developer documentation
clay playful B2B cream #fffaf0 6-color saturated cards (pink/teal/lavender/peach/ochre) Plain Black/Inter Landing · marketing · product introductions

Detailed tokens: systems/anthropic-claude.md · systems/clickhouse.md · systems/clay.md

Automatic Recommendation Heuristics

Output Recommended Theme
Weekly status · management summaries · business plans claude (warm editorial)
Incident reports · data reports · API documentation clickhouse (dark engineering)
Landing · product introductions · marketing copy clay (playful saturated)
Financial statements · legal documents claude (editorial · trustworthy)

Full catalog of 75

systems/registry.md Reference — includes classification (light/warm/dark) · canvas · primary color · font · mood metadata.

All 75 systems (56 rich analyses + 19 lightweight token sets ⚙️) — tokens stored in each systems/<name>.md, and in registry.mdluminance-based classification (light 48 · dark 25 · warm 2) · metadata notation. The 3 default themes (claude/clickhouse/clay) have completed Tailwind mapping verification. The 19 lightweight (⚙️) were extracted from 테마_컴포넌트_쇼케이스_전체.html— rich analysis · typography scales to be supplemented later.

Tailwind Play CDN Integration

mapping/tailwind.md Reference — YAML design token → Tailwind CDN inline config mapping rules + shadcn vanilla component conversion table.

Core patterns (within a single-file HTML):

<!-- 1. Tailwind Play CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 2. 브랜드 토큰 → tailwind.config 주입 -->
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: { primary: '#cc785c', canvas: '#faf9f5', /* ... */ },
        fontFamily: { display: ['Copernicus', 'serif'], sans: ['StyreneB', 'Inter', 'sans-serif'] },
        borderRadius: { md: '8px', lg: '12px', xl: '16px' },
        spacing: { section: '96px', /* ... */ }
      }
    }
  }
</script>
<!-- 3. shadcn vanilla 컴포넌트 (utility class로 직접 마크업) -->
<div class="bg-canvas rounded-lg border border-hairline p-8">
  <h2 class="font-display text-3xl tracking-tight text-ink">...</h2>
</div>

shadcn vanilla components

components/ — reference markup that reproduces shadcn UI components with vanilla HTML + Tailwind utilities, without React.

Component shadcn original vanilla mapping
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 <details> or vanilla JS tab + token classes
Alert Alert div.rounded-lg.border.p-4 + semantic color

The full markup for each component (including variants and accessibility notes) is in individual files — card.md · button.md · badge.md · table.md · tabs.md · alert.md. Token mapping rules are mapping/tailwind.md §1·§3.

Consumer integration

doc-html-report (moai-coworker)

moai-officer:doc-html-report에 design_system Add input parameter:

  • unspecified → existing zero-dependency template (Anthropic-inspired ivory/slate/clay, backward compatible)
  • design_system: claude|clickhouse|clay|<75개 중> → load tokens from this library → Tailwind Play CDN + shadcn vanilla render

Chain example:

[텍스트 스킬] → ai-slop-reviewer → doc-html-report (design_system: clickhouse)

Claude Design handoff (moai-designer)

design-system-preploads the user-specified system (or brand mood match) from this library → composes DESIGN.md. design-handoffis included as design-system guidance in references.md / context.md and pasted into the claude.com Design session.

Workflow

  1. System selection — user-specified or automatic recommendation based on the nature of the deliverable (heuristics above)
  2. Token loading — systems/<name>.md's YAML frontmatter (colors/typography/rounded/spacing/components) parsing
  3. Tailwind config generation — mapping/tailwind.md with rules, tailwind.config object generation
  4. shadcn vanilla mapping — replace deliverable structure cards/buttons/tables with components/ reference markup
  5. Single-file render — output CDN script + config + markup as a single .htmloutput as

Usage examples

Example 1: ClickHouse dark theme technical report

결제 게이트웨이 502 장애를 ClickHouse 스타일 다크 테마로 인시던트 리포트 HTML로 만들어줘.

Example 2: Claude warm theme business plan

사업계획서를 Claude 디자인(warm cream + coral) HTML로 렌더해줘.

Example 3: Clay playful theme landing

신제품 랜딩 페이지를 Clay 스타일(컬러 카드)로 HTML로 만들어줘.

Example 4: System organization for Claude Design handoff

Claude Design에 올릴 디자인 시스템 자료를 Linear 스타일 기반으로 정리해줘.

What it does not do

  • This library does not own render logic — rendering is handled by doc-html-report
  • Does not introduce React / Vue / a build step — sticks to single-file, CDN, vanilla
  • If you need zero-dependency self-contained output (email attachment, offline, print), use the existing doc-html-report template (design_system unspecified)
  • Brand copyright — each system is analysis/reference token, and is outside the scopeof the repository's Apache-2.0 license. The design, trademark, and typeface rights of each brand belong to their respective owners. Before applying to commercial deliverables, be sure to check BRAND-NOTICE.md's usage boundaries and the open-license substitute typeface table

Reference documents