Skip to main content
Glama

Steal this style — extract design tokens from any URL

extract_design_tokens

Convert any website's visual style into a buildable CSS spec: extract color roles, typography scale, spacing, radii, and shadows as a summary plus pasteable :root tokens.

Instructions

Turn "make it look like " into a buildable spec: the palette with inferred roles (page background, surfaces, text, accent, accent gradient), the type scale, body size, weights and fonts, the spacing base and scale, radii and shadows — as an inferred-roles summary plus a pasteable CSS :root block. Optionally saved to .agent-eyes/styles/.

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
urlYesAbsolute URL to open, e.g. http://localhost:5173.
reloadNoReload even if the URL is already open (default reuses it, so it can be stale after an edit).
saveAsNoAlso save the tokens to .agent-eyes/styles/<name>.json.
viewportNoSwitch to this breakpoint first. Default: keep the current one.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.29.0

TDQS

B3.2/5.0
Behavior2/5

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

With no annotations, the description must convey behavior; it discloses that the tool visits a URL and may persist tokens to .agent-eyes/styles/, which is useful. However, it does not mention network access, auth requirements, or that the default is to reuse an already-open tab (stale risk) — that lives only in the schema. It doesn't contradict anything, but carries only partial behavioral burden.

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?

The description front-loads the purpose and packs the output list into one flowing sentence without redundancy. It's slightly long but every clause adds information; no filler.

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

Completeness3/5

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

The output format is described (summary + CSS :root block) and the optional save location is named, so the agent knows what to expect. Yet with no output schema and no annotations, and a closely related sibling tool, the description would benefit from explicit notes on limitations or prerequisites (e.g., live site needed, fallback behavior).

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?

All four parameters are described in the schema (100% coverage), so the baseline is 3; the description adds value only for saveAs by naming the output path. It doesn't clarify reload or viewport semantics beyond the schema, which is acceptable given full schema coverage.

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

Purpose4/5

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

The description clearly identifies the action (extract design tokens from a URL) and enumerates specific outputs (palette, type scale, spacing, radii, shadows), using concrete language. It doesn't explicitly differentiate from the similarly named sibling extract_site_design, so it falls short of the top score.

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 implies the primary use case ('make it look like <site>') and mentions optional saving, but never states when to prefer this tool over siblings like extract_site_design or review_design. No exclusions or alternatives are given, so an agent gets context but no routing guidance.

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