Skip to main content
Glama

Design system health score

score_design_system
Read-only

Score a design system from its CSS. Pass css and optionally html and pairs (free), or a public url (Pro). The score is out of 100 and weighted: tokens 25 (share of color, size, spacing, radius and shadow declarations that go through a variable, full marks at 60%, scaled down below 8 custom properties), scales 25 (mean of color, type, spacing and radius discipline), components 20 (penalty of 0.20, 0.10 and 0.03 per high, medium and low inconsistency), state coverage 20 (focus-visible weighted 0.5, hover 0.25, pressed and disabled less, minus 0.15 per outline removed without a replacement) and contrast 10 (share of text and background pairs reaching 4.5:1; pairs are taken from rules that set both colors, plus any you state as pairs, a list of {foreground, background, label} or lines such as "#767676 on #ffffff"). An area with nothing to measure is left out and the others are rescaled. The result shows each area's points, the basis, and a ranked fix list with the points each fix would recover.

Tool call template

This tool declares no required parameters. Add optional parameters from the input schema as needed.

{
  "id": 1,
  "jsonrpc": "2.0",
  "method": "tools/call",
  "params": {
    "arguments": {},
    "name": "score_design_system"
  }
}

Input Schema

NameRequiredDescriptionDefault
cssNoCSS text to read (a stylesheet, or several concatenated). Free up to 100,000 characters; Pro up to 2,000,000.
urlNoPro only. Public page whose linked and inline stylesheets are fetched (up to 12 sheets, 5 MB).
htmlNoOptional page markup. Any <style> blocks in it are read as CSS too.
pairsNoOptional stated pairs: an array of {foreground, background, label} or a string with one pair per line.

Schema Changelog

Changes observed during successful MCP inspections.

  1. Added

TDQS

A4.4/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations only cover safety (read-only, open-world), and the description goes well past them: free vs Pro limits, the weighted rubric, the rescaling rule when an area has nothing to measure, and the shape of the returned fix list. That is the behavioral detail an agent needs to know a partial CSS input still yields a usable normalized score.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Front-loaded with the verb, then inputs, then scoring, then output — a sensible order with no filler. The rubric parentheticals (0.20/0.10/0.03, 0.5/0.25) are dense and slightly over-specified for tool selection, keeping it from a 5.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness5/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

There is no output schema, so the description must describe the return value and it does: per-area points, the basis, and a ranked fix list with recoverable points. Combined with the input-mode and tier coverage, an agent has everything needed to call it and interpret the result.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3, but the description adds real semantics: it explains how `pairs` feeds the contrast area ('taken from rules that set both colors, plus any you state as pairs') and names the accepted line form ('#767676 on #ffffff'). It also restates the free/Pro character ceilings, which the schema already carries, so it stops short of 5.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Opening clause 'Score a design system from its CSS' gives a specific verb plus resource, and the following text makes clear this is a composite 0-100 audit rather than the single-axis siblings (check_contrast, audit_spacing, audit_type_scale). An agent can tell it is the aggregate scorer without opening the schema.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It states invocation context clearly (pass css + optional html/pairs, or a public url on Pro), which is genuinely useful routing information. But it never says when to reach for this instead of the many narrower siblings (audit_token_scales, check_state_coverage, check_contrast_tokens), nor any exclusions or prerequisites beyond the tier split.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Try in Browser

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources