Skip to main content
Glama
marvkr

Better Design

Extract Design System From a Live Site

extract-from-url
Read-onlyIdempotent

Read a public URL to capture its brand styles as an oklch token sheet, merging stylesheet data with rendered element samples so agents can reuse the site's look.

Instructions

Point Better Design at a URL and get the site's brand back as an oklch token sheet, without pasting anything.

Use this when the user names their site ("match uclips.eu", "use our website's style") or hands you any public URL whose look should be reused. Server side, Better Design fetches the page's stylesheets AND renders the page in a headless browser to sample what role elements actually look like (body, heading, link, button, input, card), then merges both, rendered truth last. That reads the brand even when the site's variable names are unrecognizable.

Slow by nature (a real browser loads the page): expect 10 to 45 seconds. For CSS the user already has locally, prefer extract-design-system, which is instant.

Input Schema

NameRequiredDescriptionDefault
urlYesPublic http(s) URL of the page to read, usually the homepage.
nameNoOptional label for the extracted system. Defaults to the site's hostname.
maxTokensNoMaximum tokens to return. Truncates the token sheet to fit.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.0

TDQS

A4.5/5.0
Behavior5/5

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

Annotations already declare readOnly/openWorld/idempotent/non-destructive, but the description adds substantial context not in them: it fetches stylesheets AND renders in a headless browser, samples role elements, and merges with "rendered truth last." It also discloses the key operational cost — 10 to 45 seconds because a real browser loads the page — which an agent needs for timeout and sequencing decisions.

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 outcome, then usage, then mechanism, then latency and alternative — a sensible order. The middle mechanics paragraph is dense but each sentence justifies either the latency or the robustness claim, so little is wasted.

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 still tells the agent what comes back (oklch token sheet) and what it costs in time. Minor gaps remain: no mention of failure behavior for non-public, unreachable, or auth-walled URLs, which is likely for an open-world fetch tool.

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

Parameters3/5

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

Schema description coverage is 100%, so the url/name/maxTokens semantics are already documented in structured data; the description's "without pasting anything" only reinforces the url parameter. Nothing is added about how maxTokens truncation interacts with the merge precedence. Baseline 3 is correct when the schema does the heavy lifting.

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?

Specific verb + resource + output shape: point it at a URL and get back "the site's brand... as an oklch token sheet." It is clearly distinguished from the nearest sibling (extract-design-system) by input source (live URL vs local CSS), so an agent can route without opening either schema.

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

Usage Guidelines5/5

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

Gives concrete triggering conditions (user names their site, or hands over any public URL whose look should be reused) and an explicit exclusion with the alternative named: "For CSS the user already has locally, prefer extract-design-system." Both when-to-use and when-not-to-use are stated.

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