Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add modu-ai/moai-cowork --skill design-system-librarygit clone --depth 1 https://github.com/modu-ai/moai-coworkWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/modu-ai/moai-cowork/design-system-library)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-system-library"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-system-library/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-system-library"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-system-library.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00230 | $0.02868 |
| Opus 5 | $0.00115 | $0.01434 |
| Sonnet 5 | $0.00046 | $0.00574 |
| Haiku 4.5 | $0.00023 | $0.00287 |
Grade A, and why
design-system-library scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 185 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-system-library — 75개 브랜드 디자인 시스템 SSOT
목적과 범위
글로벌 브랜드 75종(56개 풍부 분석 + 19개 경량 토큰)의 디자인 시스템(token 기반 분석 결과)을 단일 진실 원천(single source of truth)으로 보관하고, HTML 산출물에 적용 가능한 형태로 제공합니다.
두 가지 소비 경로:
- doc-html-report / HTML 문서 렌더 —
design_system파라미터로 시스템 선택 → Tailwind Play CDN config + shadcn vanilla 컴포넌트로 단일 파일 HTML 렌더 - 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/clickhouse.md · systems/clay.md
자동 추천 휴리스틱
| 산출물 | 추천 테마 |
|---|---|
| 주간 현황·경영 요약·사업계획서 | claude (warm editorial) |
| 인시던트 리포트·데이터 리포트·API 문서 | clickhouse (다크 엔지니어링) |
| 랜딩·제품 소개·마케팅 원고 | clay (playful saturated) |
| 재무제표·법률 문서 | claude (편집성·신뢰) |
전체 75개 카탈로그
systems/registry.md 참조 — 분류(light/warm/dark) · 캔버스 · primary 색 · 폰트 · 무드 메타 포함.
전체 75개 시스템(56개 풍부 분석 + 19개 경량 토큰 ⚙️) — 각 systems/<name>.md에 토큰 보관, registry.md에 휘도 기반 분류(light 48 · dark 25 · warm 2)·메타 표기. 기본 3테마(claude/clickhouse/clay)는 Tailwind 매핑 검증 완료. 19개 경량(⚙️)은 테마_컴포넌트_쇼케이스_전체.html에서 추출 — 풍부한 분석·typography 스케일은 추후 보강.
What ships with it
60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- BRAND-NOTICE.md 2.9 KB
- components/alert.md 2.0 KB
- components/badge.md 1.4 KB
- components/button.md 1.8 KB
- components/card.md 1.9 KB
- components/README.md 1.9 KB
- components/table.md 2.0 KB
- components/tabs.md 2.9 KB
- mapping/tailwind.md 10 KB
- references/korean-design-systems.md 5.9 KB
- samples/status-claude.html 6.7 KB
- samples/status-clay.html 6.7 KB
- samples/status-clickhouse.html 6.6 KB
- systems/airbnb.md 2.5 KB
- systems/airtable.md 2.5 KB
- systems/anthropic-claude.md 33 KB
- systems/apple.md 2.5 KB
- systems/binance.md 2.5 KB
- systems/bmw-m.md 2.5 KB
- systems/bmw.md 2.5 KB
- systems/bugatti.md 2.5 KB
- systems/cal.md 2.5 KB
- systems/clay.md 25 KB
- systems/clickhouse.md 25 KB
- systems/cohere.md 20 KB
- systems/coinbase.md 25 KB
- systems/composio.md 20 KB
- systems/cursor.md 21 KB
- systems/dell-1996.md 2.5 KB
- systems/discord.md 27 KB
- systems/elevenlabs.md 20 KB
- systems/expo.md 21 KB
- systems/ferrari.md 24 KB
- systems/figma.md 32 KB
- systems/framer.md 28 KB
- systems/hashicorp.md 27 KB
- systems/hp.md 2.5 KB
- systems/ibm.md 26 KB
- systems/intercom.md 23 KB
- systems/keynote-editorial-dark.md 10 KB
- systems/kraken.md 4.7 KB
- systems/lamborghini.md 21 KB
- systems/linear.app.md 2.5 KB
- systems/lovable.md 17 KB
- systems/mastercard.md 27 KB
- systems/meta.md 37 KB
- systems/minimax.md 37 KB
- systems/mintlify.md 43 KB
- systems/miro.md 36 KB
- systems/mistral.ai.md 35 KB
- systems/mongodb.md 31 KB
- systems/nike.md 36 KB
- systems/nintendo-2001.md 2.5 KB
- systems/notion.md 26 KB
- systems/nvidia.md 35 KB
- systems/ollama.md 32 KB
- systems/opencode.ai.md 32 KB
- systems/pinterest.md 36 KB
- systems/playstation.md 39 KB
- systems/posthog.md 40 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 7d ago First seen · 185 lines · 230 tokens per session scan A 672f6d7d1a9d
design-system-library is a skill published in the GitHub repository modu-ai/moai-cowork (300 stars, last pushed 8d ago), licensed Apache-2.0. It adds 230 tokens to every session and 2,868 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
excalidraw
Create visual presentations, slide decks, and explanatory diagrams in Excalidraw. Use when user asks to create a presentation, slide deck, visual explainer, pitch deck, comparison diagram, process flow, or any multi-slide visual content. Supports two output modes — generating .excalidraw JSON files OR injecting slides…
infographic-old
Basic infographic generator. Just tell me what you want and I'll make it.
design-system-creator
Produces a complete, Claude-Design-compatible design system folder for any brand, ready to upload to Claude Design's "Set up your design system" flow and use across every future asset (websites, landing pages, pitch decks, Instagram/LinkedIn carousels, infographics, emails, ads). Handles two paths: building a brand…
carousel-builder
Build a Ben AI image-first carousel (Type B) from provided source content and export it as a PDF. Give it a newsletter, a YouTube transcript, a LinkedIn post, or a raw brief; it picks the slide count (3-10), writes the copy in Ben's voice, renders every slide with Higgsfield GPT Image 2, composites the real-logo brand…
instant-ui
Build a BenAI-branded HTML page in the neo-brutalist instant-ui design language (cream background, near-black ink, 3px hard borders, 6px zero-blur shadows, a blue/green/amber gradient stripe, system font plus SF Mono, weight-900 headings). Use for any BenAI landing page, offer, sales, or pricing page, onboarding or…
infographic
Generate professional infographics using Nano Banana MCP (Gemini AI image generation). Follows a guided flow — analyze content, suggest visualizable concepts, propose visualization approaches, then generate on-brand images. USE THIS SKILL WHEN user says "create infographic", "make a visual", "design an infographic"…