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 Onevium/awesome-claude-skills --skill design-system-extractgit clone --depth 1 https://github.com/Onevium/awesome-claude-skillsWrote 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/onevium/awesome-claude-skills/design-system-extract)<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/design-system-extract"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/design-system-extract/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/onevium/awesome-claude-skills/design-system-extract"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/design-system-extract.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00094 | $0.00825 |
| Opus 5 | $0.00047 | $0.00413 |
| Sonnet 5 | $0.00019 | $0.00165 |
| Haiku 4.5 | $0.00009 | $0.00082 |
Grade A, and why
design-system-extract 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 11d 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
提取设计系统 Token
从可验证来源提取现有视觉语言，让后续设计复用同一套规则。此 Skill 用于发现和结构化，不负责凭空创造品牌。
1. 确认来源
可能的来源包括主题文件、CSS 变量、Tailwind 配置、组件库、线上页面、截图、品牌 PDF 或 Figma。优先级通常为：明确的设计规范与 token 源码，其次是稳定组件实现，最后才是截图推断。
若来源未指定，先询问。记录每个值来自哪里；无法确认时标记缺口，不要补成“合理默认值”。
2. 按类别提取
- 颜色：品牌主色与强调色、语义色、中性色阶、页面和组件表面、边框与遮罩；记录值、来源名称和用途。
- 排版：字体家族与 fallback、字号、字重、行高、字距和已命名文本样式；只保留实际加载或明确定义的字重。
- 间距：真实使用的尺度，以及内边距、行内、区块或组件间距是否分层。
- 圆角与阴影：所有有效级别及完整 CSS 值，说明对应组件或层级。
- 其他：动效时长与缓动、z-index、断点、容器宽度、图标尺寸等来源确实存在的 token。
把近似重复、不同色调的中性色阶和离群值列为发现，不要自行合并。
3. 输出项目原生格式
优先匹配现有格式与命名：tokens.css、带类型导出的 tokens.ts、tokens.json、SCSS 变量或 Tailwind 扩展。新项目默认可使用 tokens.css，按品牌、语义、中性、表面、排版、间距、圆角、阴影和动效分组。
所有名称应表达语义或稳定层级，避免把一次性页面位置写进全局 token。保留来源可追溯性，但不要把本机绝对路径或私有信息写入公开文件。
4. 交付报告
列出使用的来源、已提取类别、无法确认的缺口、近似重复或离群值，以及需要用户决定的合并项。不要把未决项静默写成最终规范。
示例
输入：“从这个 React 项目的主题和组件里提取设计 token。”
**输出：**读取主题、CSS 变量与核心组件后生成项目命名风格一致的 tokens.ts；报告发现两套近似蓝色和三个离散圆角值，保留原值并要求用户确认是否收敛。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。
What ships with it
1 file 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.
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.
- 11d ago First seen · 49 lines · 94 tokens per session scan A 8c195eb2ea4c
design-system-extract is a skill published in the GitHub repository Onevium/awesome-claude-skills (1 stars, last pushed 14d ago), licensed MIT. It adds 94 tokens to every session and 825 once invoked, about $0.0005 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
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accesslint-scan
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
theme-factory
Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.