Hydrafetch

Styleguide

styleguide

Read-only

A site's design tokens read from computed styles in a real browser: colours by role with contrast ratios, the dark theme colours when the site has one, the type scale, corner radius and button styling, how panels, the header bar and panel titles are drawn, plus ready-made CSS, Tailwind and shadcn/ui stylesheets. Values defined through CSS variables come back resolved to the hex actually painted. To recreate how a site looks rather than only its tokens, take a screenshot of the page too.

Input Schema

TableJSON Schema

Name	Required	Description
`url`	No	One page to read instead of the homepage, e.g. https://stripe.com/pricing.
`domain`	No	The domain to read, e.g. stripe.com, using its homepage. Send this or url.
`maxAge`	No	Accept a stored result no older than this many milliseconds. 0 reads fresh.

Schema Changelog

Changes observed during successful MCP inspections.

Changed4 schema fields changedOct 10, 2026

changedInput schema / properties / domain / description

Previous value: -"The domain to read, e.g. stripe.com. A full URL works too."New value: +"The domain to read, e.g. stripe.com, using its homepage. Send this or url."

addedInput schema / properties / maxAge

Added value: +{
+  "description": "Accept a stored result no older than this many milliseconds. 0 reads fresh.",
+  "maximum": 9007199254740991,
+  "minimum": 0,
+  "type": "integer"
+}

addedInput schema / properties / url

Added value: +{
+  "description": "One page to read instead of the homepage, e.g. https://stripe.com/pricing.",
+  "type": "string"
+}

removedInput schema / required
```
Removed value: -[
-  "domain"
-]
```

First observedAug 20, 2026

TDQS

A4.2/5.0

Behavior4/5

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

Annotations already declare readOnly/openWorld/non-destructive, so the bar is lower, yet the description still adds meaningful behaviour: values are read from computed styles in a real browser and CSS variable references are returned resolved to the hex actually painted. It could say more about cache freshness semantics beyond the schema's maxAge note, but this is solid added context.

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 what is returned, then the resolution behaviour, then the screenshot alternative — a logical order. The middle sentence is dense but each clause describes a distinct part of the payload, so little is wasted.

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 carries the full burden of explaining return values, and it does so comprehensively: colour roles, contrast ratios, dark theme, type scale, radius, component styling, and generated stylesheets. An agent knows exactly what it will get and when to call screenshot instead.

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% and all three parameters (url, domain, maxAge) are documented there with examples and defaults. The description adds no parameter-level meaning, so the baseline 3 is correct.

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 and resource: read a site's design tokens from computed styles in a real browser, and enumerates the exact payload (colours by role, contrast ratios, dark theme, type scale, radius, button/panel styling, CSS/Tailwind/shadcn sheets). It is clearly distinguishable from siblings like brand, logo, or scrape.

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

Usage Guidelines4/5

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

Explicitly routes the agent to a sibling: use screenshot when the goal is recreating how a site looks rather than just its tokens. That is a real when-not condition, but it doesn't distinguish against other plausible neighbours such as brand or extract, so it falls short of full alternative coverage.

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

All Hydrafetch tools Inspect

Try in Browser

Let your AI agent see the webWeb-to-screenshot MCP for Claude, Cursor and Codex. No cookie banners. Free to start.snap-render.comAd

Glama MCP Gateway

Add one secure layer between your agents and this server.

Resources

Need Help?