Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/modu-ai/moai-coworknpx agentmods add skills/modu-ai/moai-cowork/design-system-prepWrote 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-prep)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-system-prep"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-system-prep/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-prep"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-system-prep.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.00164 | $0.04542 |
| Opus 5 | $0.00082 | $0.02271 |
| Sonnet 5 | $0.00033 | $0.00908 |
| Haiku 4.5 | $0.00016 | $0.00454 |
Grade A, and why
design-system-prep 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 6d 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 — 322 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-system-prep — 디자인 시스템 자산 합성
개요
docs-site 디자인 시스템 페이지에서 정리한 대로, Claude Design 결과 품질을 가장 크게 좌우하는 것은 디자인 시스템 셋업입니다. 이 스킬은 흩어진 브랜드 자산을 분석해 Claude Design이 한 번에 흡수할 수 있는 DESIGN.md로 합성합니다.
네이티브 경로와의 관계 (2026-06 업데이트): Claude Design은 이제 GitHub repo·디자인 파일·업로드에서 디자인 시스템을 직접 import하고, 출력을 등록된 시스템에 대조해 자가 수정합니다. Claude Code 터미널에서는
design-workflow스킬로 코드베이스 디자인 시스템을 바로 보낼 수도 있습니다. 깔끔한 코드 repo가 있으면 그 네이티브 경로가 가장 빠릅니다. 이 스킬은 자산이 흩어져 있거나, 깔끔한 코드 repo가 없거나,design-system-library의 큐레이션된 토큰을 출발점으로 쓰고 싶을 때 DESIGN.md로 합성해 네이티브 경로를 보완합니다(대체가 아니라 보완).
트리거 키워드
Claude Design 디자인 시스템, 디자인 시스템 자산, DESIGN.md, 브랜드 자산 합성, 디자인 시스템 셋업, claude.ai/design 시스템
입력 — 자산 5종
다음 중 가능한 만큼 제공합니다 (한 가지만 있어도 시작 가능).
| 자산 유형 | 형태 | Claude가 추출하는 것 |
|---|---|---|
| 코드 | GitHub repo URL · 로컬 UI 패키지 디렉토리 | React·Vue·Svelte 컴포넌트, CSS 토큰, Tailwind 설정 |
| 디자인 파일 | Figma .fig, Sketch, 컴포넌트 스크린샷 PNG |
색 팔레트, 타이포 스케일, 컴포넌트 라이브러리 |
| 브랜드 자산 | 로고 SVG·PNG, 색 팔레트 이미지, 스타일 가이드 PDF | 색·타이포·로고 사용 규칙 |
| 실물 | 운영 중 웹사이트 URL, PPTX 덱, 잘 만든 마케팅 페이지 | 실제 컴포넌트·간격·voice |
| 사전 빌트인 | Apple · Linear · Stripe 시스템 (오픈 라이선스) | 시작점 |
| 디자인 시스템 라이브러리 | moai-designer:design-system-library의 75개 시스템 (claude · clickhouse · clay 등) |
토큰(색·타이포·radius·spacing) + 컴포넌트 매핑 — DESIGN.md 합성의 즉시 소스 |
우선 순위 (v2.21.0+): 사용자가 특정 브랜드 무드를 지정하거나 결과물 성격에 맞는 시스템이 필요하면, 별도 자산 수집 전
design-system-library의 75개 시스템에서 먼저 선택합니다.design-system-prep는 선택된systems/<name>.md토큰을 DESIGN.md 합성의 1차 소스로 사용합니다. 외부 자산(웹사이트 URL·Figma 등)은 라이브러리 시스템에 대한 보강 자료로만 활용합니다.
워크플로우
1단계 — 자산 수집
사용자에게 자산 유형을 묻고 입력을 받습니다. AskUserQuestion 1라운드.
가지고 있는 자산을 모두 알려 주세요 (복수 선택):
- 우리 웹사이트 URL
- 로고·이미지 파일
- 잘 만든 자사 페이지 (PPTX·PDF·캡처)
- GitHub repo (UI 컴포넌트)
- Figma 파일
- 사전 빌트인에서 시작
선택 후 각 자산의 경로·URL을 차례로 수집합니다.
2단계 — 자산 분석
| 자산 | 처리 방법 |
|---|---|
| 웹사이트 URL | WebFetch로 라이브 페이지 분석 — 색·폰트·컴포넌트 패턴 추출 |
| 이미지 파일 | 비전 분석으로 색 팔레트·로고 형태 추출 |
| PPTX·PDF | 텍스트·이미지·배경 색 분석 |
| GitHub repo URL | package.json · tailwind.config.* · UI 디렉토리 분석 |
| 로컬 폴더 | ls · Read로 파일 구조 분석 |
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.
- 6d ago First seen · 322 lines · 164 tokens per session scan A 85bac2b4981a
design-system-prep is a skill published in the GitHub repository modu-ai/moai-cowork (298 stars, last pushed 7d ago), licensed Apache-2.0. It adds 164 tokens to every session and 4,542 once invoked, about $0.0008 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.
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…
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…
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"…