Skip to main content
Glama

Extract Design System From Existing Code

extract-design-system
Read-onlyIdempotent

Reads design tokens from CSS the caller passes in and returns the semantic palette, radius, fonts and shadow scale, with a token sheet that converts every color to oklch(). It accepts hex, rgb, hsl, named and oklch colors across :root, .dark and @theme blocks. sources merges several inputs, including a sample of computed styles from a live page. The server cannot read files, so the caller passes the text.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
cssNoFull contents of the project's globals.css (or any CSS holding the design tokens / CSS custom properties). Optional when `sources` is given.
nameNoOptional label for the extracted system, e.g. the app or repo name.
sourcesNoAny mix of brand sources, merged in order (later sources win). See the tool description for how to gather each kind.
maxTokensNoMaximum tokens to return. Truncates the token sheet to fit.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observed

TDQS

A4.1/5.0
Behavior4/5

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

Annotations already cover the safe read-only, idempotent profile, so the bar is lower. The description adds real behavioral context beyond them: the return payload, accepted color formats (hex, rgb, hsl, named, oklch), supported blocks (:root, .dark, @theme), and the important constraint that the server cannot read files.

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?

Four front-loaded sentences with no filler: purpose and return value first, then accepted inputs, then the merge behavior and the file-access constraint. Slightly dense but every sentence carries information.

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

Completeness4/5

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

With no output schema, the description correctly describes the return shape, and it discloses the key operational constraint (no file access). Missing only explicit routing against sibling tools, which keeps it short of a 5.

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 genuinely adds meaning — it clarifies what kinds of sources can be merged (including computed styles from a live page) and which color notations/blocks are accepted. The schema even defers to the description for how to gather each source kind.

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?

States a specific verb (reads/extracts) and resource (design tokens from CSS) and enumerates the exact outputs — semantic palette, radius, fonts, shadow scale, and an oklch token sheet. The line 'the server cannot read files, so the caller passes the text' implicitly separates it from the URL-based sibling extract-from-url.

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?

The description explains the input mechanism (caller passes text; sources merges inputs) which implies when the tool applies, but it never states when to prefer this over extract-from-url, find-design-system, or create-design-system. Usage is inferable rather than explicit.

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.