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-handoff-readerWrote 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-handoff-reader)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-handoff-reader"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-handoff-reader/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-handoff-reader"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-handoff-reader.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.00179 | $0.03409 |
| Opus 5 | $0.00089 | $0.01705 |
| Sonnet 5 | $0.00036 | $0.00682 |
| Haiku 4.5 | $0.00018 | $0.00341 |
Grade A, and why
design-handoff-reader 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 — 301 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-handoff-reader — 핸드오프 번들 분석
개요
Claude Design의 Export → "Handoff to Claude Code"(로컬 터미널 또는 Claude Code Web)는 프로젝트의 디자인 파일 + chat + README 3요소를 담은 번들을 만듭니다(공식 확인 사실). Anthropic은 디자인을 "code under the hood(HTML/CSS/JS)"로 규정하며, 구조화된 DTCG JSON 형식은 공식 규격이 아닙니다. 이 스킬은 그 번들을 방어적으로 분석해 사람이 5분 안에 핸드오프 상태를 파악할 수 있는 요약 보고서와 Claude Code에 그대로 붙여 넣을 수 있는 지시 1줄을 생성합니다.
공식 규격 vs 추론 (anti-hallucination — docs 03 §5.4): 공식 문서가 보장하는 것은 3요소 triad(디자인 파일 + chat + README)뿐입니다.
design-tokens.json/tokens.json,components.json,layout-hierarchy.json,chat-history.md같은 구체 파일명은 MoAI 작업 가정이며 Anthropic 문서화 규격이 아닙니다. 따라서 하드 5-파일 존재 검사를 하지 않고, 존재하는 것만 best-effort로 파싱하며 없으면 코드(HTML/CSS)에서 유도합니다.
핸드오프 방향 + 진입 모드 (2026-06): 번들은 Claude Design 캔버스의 Export → Handoff to Claude Code(local/web)에서 생성됩니다. 반대 방향(코드→디자인)은 Claude Code 터미널의
design-workflow스킬로 코드베이스 디자인 시스템을 Claude Design에 import — 핸드오프는 양방향입니다. 두 진입 모드를 지원합니다: (1) .zip 다운로드(확정 오프라인 컨테이너), (2) 붙여넣기 프롬프트 + 번들 URL(실제 메인 흐름 — Claude Code가 URL을 fetch).
트리거 키워드
Claude Design 핸드오프, handoff 번들, design-tokens 분석, components.json, Claude Code 인계, 디자인 토큰 추출
입력
다음 중 하나:
| 입력 | 형태 |
|---|---|
| ZIP archive | ./handoff-bundle.zip |
| 디렉토리 | ./handoff-bundle/ |
| URL | Claude Design Export 시 제공된 번들 URL |
워크플로우
1단계 — README 우선 파싱 + 방어적 glob (graceful degradation)
하드 5-파일 존재 검사를 하지 않습니다. 정확한 번들 형식이 공식 미문서화이므로 다음 순서로 방어적으로 처리합니다.
- README 우선 (source of truth): 번들에서 README를 먼저 읽어 구조·의도를 파악합니다. Anthropic이 "모델에게 디자인 해석 지침을 주도록" 설계한 유일한 공식 문서화 요소입니다.
README.md가 일반적이나 확장자 없는README도 수용합니다. - 선택적 best-effort glob (하드 요구 금지): 아래 파일들을 있으면 사용, 없어도 실패하지 않는 입력으로 discover합니다. 파일명은 추론이므로 변형을 모두 수용합니다.
| 개념 | 수용 파일명 (추론 — 공식 규격 아님) | 없을 때 fallback |
|---|---|---|
| 디자인 토큰 | design-tokens.json 또는 tokens.json (둘 다 수용) |
CSS custom properties / standalone HTML에서 토큰 유도 |
| 컴포넌트 | components.json |
HTML DOM 구조에서 컴포넌트 트리 추론 |
| 레이아웃 | layout-hierarchy.json |
HTML/CSS에서 반응형 패턴 추론 |
| chat 맥락 | chat-history.md (또는 README 내 chat 요약) |
코드 주석·README에서 결정 맥락 유도 |
| 자산 | assets/ |
없으면 생략 |
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 · 301 lines · 179 tokens per session scan A 40a965efffd8
design-handoff-reader is a skill published in the GitHub repository modu-ai/moai-cowork (300 stars, last pushed 7d ago), licensed Apache-2.0. It adds 179 tokens to every session and 3,409 once invoked, about $0.0009 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"…