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.00234 | $0.03431 |
| Opus 5.5 | $0.00094 | $0.01372 |
| Sonnet 5.5 | $0.00047 | $0.00686 |
| Haiku 4.5 | $0.00023 | $0.00343 |
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 1mo 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 — 190 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-system-library — 브랜드 디자인 시스템 SSOT
목적과 범위
글로벌 브랜드의 디자인 시스템(token 기반 분석 결과)을 단일 진실 원천(single source of truth)으로 보관하고, HTML 산출물에 적용 가능한 형태로 제공합니다.
두 가지 소비 경로:
- doc-html-report / HTML 문서 렌더 — 별도
moai-officer가 설치되고 해당 스킬을 사용할 수 있을 때design_system파라미터로 시스템 선택 → 토큰을 산출물 형식에 맞는 CSS와 HTML로 렌더 - Claude Design 핸드오프 —
design-system-prep가 본 라이브러리 시스템을 DESIGN.md 합성 소스로 사용 →design-handoff의 references/context에 지침 포함
핵심 원칙:
- 라이브러리는 데이터(token + 분석) SSOT — 렌더 로직은 소비자(doc-html-report)가 소유
- 아래
tailwind.config예시는 Tailwind v3 Play CDN 공식 문서의 JavaScript 설정 방식이다. 현재 v4 Play CDN의 CSS@theme방식과 섞지 않는다. 개발 미리보기용이며 최종 배포물에는 필요한 스타일을 정적 CSS로 포함하거나 프로젝트의 빌드 경로를 사용한다. - 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 (편집성·신뢰) |
전체 카탈로그
systems/registry.md 참조 — 분류(light/warm/dark) · 캔버스 · primary 색 · 폰트 · 무드 메타 포함.
전체 시스템의 파일 목록과 출처 수준은 registry.md와 BRAND-NOTICE.md에서 확인한다. 기본 3테마의 예시 config가 있으나, 현재 산출물의 렌더·대비 통과를 뜻하지 않는다. 경량 토큰의 출처·재사용 조건이 확인되지 않은 항목은 내부 참고로만 다룬다.
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.2 KB
- components/badge.md 1.5 KB
- components/button.md 2.1 KB
- components/card.md 1.9 KB
- components/README.md 2.3 KB
- components/table.md 2.3 KB
- components/tabs.md 3.8 KB
- mapping/tailwind.md 12 KB
- references/korean-design-systems.md 2.6 KB
- samples/status-claude.html 6.7 KB
- samples/status-clay.html 6.8 KB
- samples/status-clickhouse.html 6.6 KB
- systems/airbnb.md 2.7 KB
- systems/airtable.md 2.7 KB
- systems/anthropic-claude.md 34 KB
- systems/apple.md 2.7 KB
- systems/binance.md 2.7 KB
- systems/bmw-m.md 2.7 KB
- systems/bmw.md 2.7 KB
- systems/bugatti.md 2.7 KB
- systems/cal.md 2.7 KB
- systems/clay.md 25 KB
- systems/clickhouse.md 25 KB
- systems/cohere.md 20 KB
- systems/coinbase.md 27 KB
- systems/composio.md 21 KB
- systems/cursor.md 22 KB
- systems/dell-1996.md 2.7 KB
- systems/discord.md 28 KB
- systems/elevenlabs.md 22 KB
- systems/expo.md 22 KB
- systems/ferrari.md 25 KB
- systems/figma.md 32 KB
- systems/framer.md 29 KB
- systems/hashicorp.md 28 KB
- systems/hp.md 2.7 KB
- systems/ibm.md 27 KB
- systems/intercom.md 24 KB
- systems/keynote-editorial-dark.md 10 KB
- systems/kraken.md 4.7 KB
- systems/lamborghini.md 21 KB
- systems/linear.app.md 2.7 KB
- systems/lovable.md 18 KB
- systems/mastercard.md 27 KB
- systems/meta.md 39 KB
- systems/minimax.md 38 KB
- systems/mintlify.md 44 KB
- systems/miro.md 37 KB
- systems/mistral.ai.md 36 KB
- systems/mongodb.md 32 KB
- systems/nike.md 35 KB
- systems/nintendo-2001.md 2.7 KB
- systems/notion.md 27 KB
- systems/nvidia.md 35 KB
- systems/ollama.md 32 KB
- systems/opencode.ai.md 32 KB
- systems/pinterest.md 34 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.
- 1mo ago Changed · +1 lines 9591a9f508c6
- 1mo ago Changed · +4 lines · +4 tokens per session 319de6db2cec
- 2mo 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 (315 stars, last pushed 29d ago), licensed Apache-2.0. It adds 234 tokens to every session and 3,431 once invoked, about $0.0009 per session on Opus 5.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.
design-system-library compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| design-system-librarymodu-ai/moai-cowork | Skill | 315 | 29d ago | Apache-2.0 | A | 234 | Claude Code |
| excalidrawnaveedharri/benai-skills | Skill | 78 | 28d ago | MIT | A | 99 | Claude Code |
| chartwareandisab/swe-marketplace | Skill | 21 | yesterday | MIT | A | 217 | Claude Code |
| infographic-oldnaveedharri/benai-skills | Skill | 78 | 28d ago | MIT | A | 19 | Claude Code |
| canvas-designcomposio-community/awesome-claude-plugins | Skill | 2.0k | 2d ago | none | A | 59 | Claude Code |
| frontend-designcomposio-community/awesome-claude-plugins | Skill | 2.0k | 2d ago | none | A | 43 | Claude Code |
| theme-factorycomposio-community/awesome-claude-plugins | Skill | 2.0k | 2d ago | none | A | 62 | Claude Code |