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 agentmods add skills/jansenanalytics/claudex/design-systemnpx skills add JansenAnalytics/claudex --skill design-systemgit clone --depth 1 https://github.com/JansenAnalytics/claudexWhat 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 | $0.00026 | $0.00391 |
| Opus 5 | $0.00013 | $0.00196 |
| Sonnet 5 | $0.00005 | $0.00078 |
| Haiku 4.5 | $0.00003 | $0.00039 |
Grade A, and why
design-system 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 3d 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.
What it actually says
design-system
Enforce design consistency: component inventory, style token extraction, CSS consistency checking, spacing/color/typography auditing.
When to Use
- Auditing UI consistency across a project
- Extracting design tokens from CSS/SCSS
- Building component inventories
- Checking for style drift or inconsistencies
- Standardizing a design system
Scripts
token-extractor.py
Extract design tokens (colors, fonts, spacing) from CSS/SCSS files.
python3 scripts/token-extractor.py --dir src/
python3 scripts/token-extractor.py --dir styles/ --format json
Arguments:
--dir <path>— Directory to scan (default:.)--format json|markdown— Output format (default: markdown)
style-auditor.sh
Audit CSS for consistency issues.
bash scripts/style-auditor.sh --dir src/
Arguments:
--dir <path>— Directory to scan (default:.)
Reports: unique colors, near-duplicate colors, font sizes, spacing values, z-index values, unit mixing.
component-inventory.sh
Build component inventory from React/Vue project.
bash scripts/component-inventory.sh --dir src/
Arguments:
--dir <path>— Directory to scan (default:.)
Reports: component name, file path, props, usage count, unused components, untested components.
References
design-tokens-guide.md— Design token concepts and naming conventions
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.
- 3d ago First seen · 68 lines · 26 tokens per session scan A fb63f4292797
design-system is a skill published in the GitHub repository JansenAnalytics/claudex (5 stars, last pushed 2mo ago), licensed MIT. It adds 26 tokens to every session and 391 once invoked, about $0.0001 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-08-31.
Other skills, from other repositories
designlang-tokens
Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.
tinted-ui-tokens-skills
从一个品牌色生成完整、可直接上线的设计 Token 系统：让每一个中性表面（背景、边框、文字、阴影、语义色、渐变、图标、暗色模式）都带上一小撮品牌色的温度，而不是使用纯中性色。当用户想用品牌色 / hex 生成、构建或设计 UI 颜色 Token、设计系统、CSS 变量、染色配色或品牌主题，或想通过修正扁平中性色让现有 UI 显得更高级时使用。触发语示例：给我生成一套设计Token、用这个品牌色出一套配色、UI颜色太廉价了、生成染色中性色系统、build a design system from #XXXXXX、tinted neutral palette。.
css-spacing-layout
CSS Spacing & Container Layout Architect — expert in padding, margin, borders, container hierarchy, spacing scales, and layout consistency across breakpoints.
accessible-by-default
Build web UI that is accessible through the platform instead of patched with ARIA and JavaScript. Use when writing or reviewing HTML and CSS for any web interface - choosing between a native element and a hand-built component, styling focus, honouring user preferences such as reduced motion or forced colors, meeting…
extract-design
Extract the full design language from any website URL. Produces 8 output files including AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS variables. Also runs WCAG accessibility scoring. Use when user says 'extract design', 'get…
video-shot-demos
为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 Skill。核心是统一的电影化播放器机制 + 每页完全不同的视觉风格 + 镜头语言 + 同步音效 + 角色表情吐槽，内容完全开放不设限。.