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-tokens-transformergit 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-tokens-transformer)<a href="https://agentmods.dev/skills/modu-ai/moai-cowork/design-tokens-transformer"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-tokens-transformer/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-tokens-transformer"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-cowork/design-tokens-transformer.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.00255 | $0.06661 |
| Opus 5 | $0.00128 | $0.03331 |
| Sonnet 5 | $0.00051 | $0.01332 |
| Haiku 4.5 | $0.00026 | $0.00666 |
Grade A, and why
design-tokens-transformer 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 9d 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 — 358 lines — stays where its author put it; the contents beside it link to each section on GitHub.
design-tokens-transformer — 3계층 토큰 양방향 변환
개요
브랜드 토큰은 소비처마다 다른 형태를 요구합니다. 이 스킬은 **동일한 브랜드 진실(색·타이포·spacing·radius·shadow·motion)**을 3계층으로 인코딩·변환합니다. L1(DTCG)이 SSOT이고, L2/L3은 파생물이며, 역방향 추출과 라운드트립 검사로 계층 간 정합을 보장합니다.
이 SKILL.md는 3계층 스키마·양방향 변환 규칙·라운드트립 검사·사용 예시를 모두 포함합니다. 색·폰트 값은 브랜드 무관 플레이스홀더(
#RRGGBB,<BrandFont>)로 표기하며, 실제 브랜드 값은 변환 입력(DTCG 소스)에서 주입됩니다.
트리거 키워드
DTCG 토큰 변환, 3계층 토큰 매핑, CSS custom properties 생성, shadcn semantic 롤, Tailwind v4 @theme, 토큰 라운드트립, design tokens transformer
3계층 모델
| 계층 | 형태 | 소비처 | 대표 파일(handoff.zip) |
|---|---|---|---|
| L1 — DTCG SSOT | W3C Design Tokens ($value/$type/$description), 계층적 그룹 |
브랜드 진실 원천 | assets/round3/02-tokens.json |
| L2 — 원시 CSS 변수 | --color-* · --neutral-50..950 · --tracking-* + self-host @font-face |
단일 파일 HTML 렌더 / 카드 | colors_and_type.css |
| L3 — semantic/shadcn | --base-background · --base-primary · --base-ring · --base-sidebar-* · --base-chart-1..5 + Tailwind v4 @theme + .dark 전환 |
프로덕션 코드(shadcn 체계) | assets/round3/globals.css |
L1 — DTCG SSOT 스키마
- W3C 포맷: 각 토큰은
$value/$type/$description보유 - 계층적 그룹:
color.{brand,neutral,semantic,dark,gradient}·typography.{family,weight,size,lineHeight,letterSpacing}·spacing·radius·shadow·motion.{duration,easing}·container·logo $description은 출처·의미를 기록 → 브랜드 진실 원천
DTCG 그룹별 최소 토큰 세트
| 그룹 | 최소 토큰 | 비고 |
|---|---|---|
color.brand |
primary, ink, background (+ primary-hover/active, surface) | 주색·본문색·배경 3종이 필수 하한 |
color.neutral |
50·100·200·300·400·500·600·700·800·900·950 | 11단계 휘도 스케일 |
color.semantic |
success, warning, danger, info | 상태색 4종 |
color.dark |
background, surface, primary, foreground, border | 다크 오버라이드 최소셋 |
color.gradient |
signature (+ soft/dark 파생) | 시그니처 자산 |
typography.family |
sans (+ latin/mono/serif) | 본문 폰트 필수 |
typography.weight |
regular(400), bold(700) (+ medium/semibold/black) | fontWeight |
typography.size |
xs…6xl + display | rem/clamp |
typography.lineHeight |
tight, normal (+ snug/relaxed) | number |
typography.letterSpacing |
display, heading, body, caption | 한국어 자간 인코딩 |
spacing |
0…32 (4px 베이스 스텝) | dimension |
radius |
none, sm, md, lg, full (+ xl/pill) | dimension |
shadow |
sm, md, lg (+ xs/xl/signature) | shadow |
motion.duration |
fast, normal (+ instant/slow/page) | duration |
motion.easing |
default (+ bounce/smooth) | cubicBezier |
container·logo |
(선택) 브레이크포인트·자산 경로 | logo는 asset 타입 |
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.
- 9d ago First seen · 358 lines · 255 tokens per session scan A 6128dcac8252
design-tokens-transformer is a skill published in the GitHub repository modu-ai/moai-cowork (300 stars, last pushed 9d ago), licensed Apache-2.0. It adds 255 tokens to every session and 6,661 once invoked, about $0.0013 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
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…
colors
Color systems for web interfaces — OKLCH conversion and palette generation, contrast measurement (APCA/WCAG), gamut and P3 fallbacks, theming, one meaning per color. INVOKE PROACTIVELY when converting color values, building or extending a palette or token set, checking or reporting contrast, or theming light and dark…
ui-polish
Design-engineering details that make an interface feel polished — border radius, optical alignment, shadows and elevation, animations and micro-interactions, press feedback, icons. INVOKE PROACTIVELY when building or reviewing UI components, adding motion or hover/active states, or when the user says "make it feel…
layout
Layout structure for web interfaces — grouping, alignment, negative space, reading order, progressive disclosure, breakpoints, direction-aware (RTL) structure. INVOKE PROACTIVELY when structuring a page or component, spacing or aligning controls, deciding what collapses at small sizes, or reviewing frontend structure.…
motion-system
Define the app's motion language before animating anything -- a small set of durations, easings, and named moves that every animation draws from, so the app feels designed instead of decorated. Use before writing the first animation in a project, or when existing motion feels scattered.
polish-pass
The de-AI pass -- audit a vibe-coded app for template smell in design and copy, then fix it with editorial layout, purposeful motion, and human-sounding words. Use after any build session, before anyone else sees it.