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 HalidSaglam/saglitzdesign-mcp --skill design-system-auditgit clone --depth 1 https://github.com/HalidSaglam/saglitzdesign-mcpWrote 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/halidsaglam/saglitzdesign-mcp/design-system-audit)<a href="https://agentmods.dev/skills/halidsaglam/saglitzdesign-mcp/design-system-audit"><img src="https://agentmods.dev/badge/skills/halidsaglam/saglitzdesign-mcp/design-system-audit/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/halidsaglam/saglitzdesign-mcp/design-system-audit"><img src="https://agentmods.dev/badge/skills/halidsaglam/saglitzdesign-mcp/design-system-audit.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.00093 | $0.01075 |
| Opus 5 | $0.00046 | $0.00537 |
| Sonnet 5 | $0.00019 | $0.00215 |
| Haiku 4.5 | $0.00009 | $0.00108 |
Grade A, and why
design-system-audit 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 10d 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 — 58 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design System Audit
A UI rarely looks accidental because any one screen is bad. It looks accidental because the values drift: nineteen greys that should be four, a radius per component, a shadow authored inline every time someone needed a card. Each decision was locally reasonable; the sum is incoherent.
This is measurable. Do not argue about it — count it.
The full audit is one call in the SaglitzDesign MCP (
npx saglitzdesign-mcp):audit_design_system(code)returns a consistency score, the value counts per dimension, the near-duplicate colors with the survivor named, off-grid spacing, and token adoption. Thencreate_design_system,generate_color_system,generate_type_scale,generate_elevation_systemandgenerate_layout_systemproduce the target scales, anddesign_lintcatches regressions.
Method
- Concatenate the real styles. Every stylesheet, theme file, and component with inline styles. Audit the whole surface at once — drift only shows up across files.
- Count distinct values per dimension, then compare against a budget:
| Dimension | Healthy budget | Why |
|---|---|---|
| Colors | ≤ 14 | One brand ramp + one neutral ramp + semantic roles. Everything else is derived. |
| Font sizes | ≤ 9 | A modular scale has ~8–9 steps. More means sizes were chosen per component. |
| Border radii | ≤ 4 | Small, medium, large, pill. Mixed radii are the most common reason a UI reads as accidental. |
| Shadows | ≤ 6 | Elevation is a ramp of named levels, not a shadow per component. |
| Spacing values | ≤ 12 | One 4/8pt scale. |
- Collapse near-duplicates. Two colors closer than roughly ΔRGB 12 are the same color to every human being who will ever use the product. Keep the most-used one; replace the rest. This single step usually removes a third of a sprawling palette.
- Snap the off-grid values. Anything that isn't a multiple of 4px breaks vertical rhythm. It is felt even when it isn't noticed.
- Measure token adoption. Count
var(--…)references against raw literals. 0% adoption with a "design system" in the repo means the system exists as documentation, not as code. - Migrate, then lock. Generate the target scales, replace literals with tokens, and add a lint rule so the next hardcoded hex fails review instead of quietly landing.
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.
- 10d ago First seen · 58 lines · 93 tokens per session scan A 9c713b3a2dbf
design-system-audit is a skill published in the GitHub repository HalidSaglam/saglitzdesign-mcp (5 stars, last pushed 8d ago), licensed MIT. It adds 93 tokens to every session and 1,075 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
logo-creator
Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.
conversational-ux
Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.
platform-conventions
Design to iOS and Android conventions — what each OS mandates, where they diverge, and when to unify. Use when shipping native apps. For breakpoint adaptation use responsive-design; for matching competitor patterns use jakobs-law (interaction-design).
design-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use design-token-audit (designer-toolkit); for WCAG gaps use accessibility-audit (design-systems).
design-impact-reporting
Communicate design's contribution to business and user outcomes in stakeholder language. Use when reporting results upward. For choosing the metrics in the first place, use metrics-definition (ux-strategy).
design-system-governance
Define how the system evolves — contribution model, versioning, deprecation, and change management. Use when multiple teams contribute. For driving uptake use design-system-adoption (designer-toolkit); for design file history use version-control-strategy (design-ops).