Extract design styles from a website

Give your Agent a domain or exact page URL to inspect colors, typography, spacing, shadows and button/card styles from the captured page. Use these page observations as a reference for design review or interface planning.

Your AI

Use with your AI

For tasks with several steps, continue in the AI you already use.

CodexClaude CodeCursorWindsurfCline

View instructions

Use extract-styleguide-context-dev for either the website or one exact page, never both. Ask for a website or page link, not a bare site name. For an overall website view, derive the site name from its link; for one page, pass that full link. Use plain-language light or dark preferences when supplied; otherwise use the default. If the user asks how the page looks now or requests the latest styles, bypass saved results and make a fresh check (maxAgeMs=0); never ask the user to choose a technical cache age. Reuse the existing Toolmu connection and authorization, follow the page setup guide if needed, and stay within the agreed budget and current price. Summarize observed colors, text sizes, spacing, shadows, buttons/cards and font names; preserve actual values. Identify the page checked and any gaps without calling it a complete official style guide.

Task:
Review [website link] or [specific page link]. Describe its colors, text, spacing, shadows, buttons and cards in plain language; point out anything the page does not show. If I specify [light mode] or [dark mode], check that too.

Paste into your connected AI's conversation.

Connection guide

Up to 0.0108 credits / call

The final charge is based on confirmed usage. Unused reserved credits return to your available balance.

Context.dev

Extract design styles from a website

You receive

Receive a structured reference of observed page styles, with typography and component CSS values, font-family references, reported color mode and cache context. Your Agent can summarize these details into a practical design reference.

Start with your task

Review [website link] or [specific page link]. Describe its colors, text, spacing, shadows, buttons and cards in plain language; point out anything the page does not show. If I specify [light mode] or [dark mode], check that too.

What to know

The result describes captured page observations, with possible cache reuse. It does not establish a complete official design system, all responsive or interaction states, font reuse rights or accessible design. light/dark emulation depends on the site honoring the browser preference.

Inputs & outputs

Inspect the current inputs, availability, and maximum charge before starting.

Input schema

Input schema
Field / Path	Type	Requirement	Meaning
Style inspection settings`queryParams`	`object`	Optional	Settings for inspecting a website’s visual styles. Supply one domain or exact page URL, with optional color scheme, supplier timeout and brand-cache age.
Website domain`queryParams.domain`	`string`	Optional	Domain to inspect, such as example.com, with at least three characters. Use domain or directUrl, never both. Minimum length `3`
Brand-cache age`queryParams.maxAgeMs`	`integer`	Optional	Age setting for cached brand data, in milliseconds. The current Tool description clamps it to 86,400,000–31,536,000,000 (one day–one year). Set the age you can accept. Minimum `0` Maximum `9007199254740991`
Exact page URL`queryParams.directUrl`	`string`	Optional	Exact URL to inspect without domain resolution, such as a pricing page. Use this or domain, never both. Format `uri`
Supplier timeout`queryParams.timeoutMS`	`integer`	Optional	Supplier deadline in milliseconds, from 1,000 to 300,000. Set it below the Tool request timeout. Context.dev describes HTTP 408 when exceeded. Minimum `1000` Maximum `300000`
Preferred color scheme`queryParams.colorScheme`	`string`	Optional	Emulate light or dark in the browser for sites that honor prefers-color-scheme. This requests an existing theme preference rather than creating a new theme. Options `light, dark`

View raw JSON

{
  "type": "object",
  "required": [],
  "properties": {
    "queryParams": {
      "type": "object",
      "$schema": "https://json-schema.org/draft/2020-12/schema",
      "~standard": {
        "vendor": "zod",
        "version": 1,
        "jsonSchema": {}
      },
      "properties": {
        "domain": {
          "type": "string",
          "minLength": 3,
          "description": "Domain to extract the styleguide from, e.g. 'example.com'. Mutually exclusive with directUrl."
        },
        "maxAgeMs": {
          "type": "integer",
          "maximum": 9007199254740991,
          "minimum": 0,
          "description": "Maximum age in milliseconds of cached brand data before Context.dev hard-refreshes it. Default 7776000000 (3 months); values are clamped to [86400000 (1 day), 31536000000 (1 year)]."
        },
        "directUrl": {
          "type": "string",
          "format": "uri",
          "description": "Exact URL to use, bypassing domain resolution (e.g. 'https://example.com/pricing'). Mutually exclusive with domain."
        },
        "timeoutMS": {
          "type": "integer",
          "maximum": 300000,
          "minimum": 1000,
          "description": "Upstream timeout in milliseconds (max 300000). Context.dev aborts the call with a 408 when exceeded. Keep it below the endpoint's requestTimeoutMs so the provider answers before the platform's own budget expires."
        },
        "colorScheme": {
          "enum": [
            "light",
            "dark"
          ],
          "type": "string",
          "description": "Browser color scheme to emulate for sites that honor prefers-color-scheme."
        }
      },
      "additionalProperties": false
    }
  },
  "additionalProperties": false
}

Result schema

No fixed output contract is available. Field types reflect saved result evidence; individual responses can differ.

Result schema
Field / Path	Type	Meaning
Observed style guide`result.styleguide`	`object`	Grouped visual styles extracted from the captured page, for design reference and review.
Observed color mode`result.styleguide.mode`	`string`	Color mode reported for the captured page, such as light.
Observed palette`result.styleguide.colors`	`object`	Reported text, accent and background colors; this is a page-derived palette rather than an exhaustive brand color specification.
Text color`result.styleguide.colors.text`	`string`	Color value reported for text.
Accent color`result.styleguide.colors.accent`	`string`	Color value reported for an accent treatment.
Background color`result.styleguide.colors.background`	`string`	Color value reported for the page background.
Typography styles`result.styleguide.typography`	`object`	Reported heading and paragraph typography, including families, fallbacks, sizes, weights, line heights and letter spacing.
Heading styles`result.styleguide.typography.headings`	`object`	Heading style groups when observed, such as h1–h4. Returned levels do not establish all heading or responsive states.
H1 style`result.styleguide.typography.headings.h1`	`object`	Typography values reported for h1, with original CSS units and numeric font weight.
H2 style`result.styleguide.typography.headings.h2`	`object`	Typography values reported for h2, including family, size, weight, line height and letter spacing.
H3 style`result.styleguide.typography.headings.h3`	`object`	Typography values reported for h3, including family, size, weight, line height and letter spacing.
H4 style`result.styleguide.typography.headings.h4`	`object`	Typography values reported for h4, including family, size, weight, line height and letter spacing.
Paragraph style`result.styleguide.typography.p`	`object`	Typography values reported for paragraphs, including family/fallbacks, size, weight, line height and letter spacing.
Heading font family`result.styleguide.typography.headings.h1.fontFamily`	`string`	Font family name reported for h1. A matching entry in fontLinks may provide a font reference.
Heading font fallbacks`result.styleguide.typography.headings.h1.fontFallbacks`	`array`	Ordered font-family fallback list reported for h1.
Heading font size`result.styleguide.typography.headings.h1.fontSize`	`string`	Font size reported for h1, retaining its CSS unit.
Heading line height`result.styleguide.typography.headings.h1.lineHeight`	`string`	Line height reported for h1, retaining the returned value and unit.
Spacing values`result.styleguide.elementSpacing`	`object`	Named spacing values such as xs–xl, with their returned CSS units. These are reference values, not a complete layout specification.
Shadow styles`result.styleguide.shadows`	`object`	Named CSS box-shadow values. Literal none is a valid no-shadow value and remains distinct from missing data.
Component style references`result.styleguide.components`	`object`	Observed button and card visual treatments, not full component code or interactive behavior.
Button styles`result.styleguide.components.button`	`object`	Groups of observed button styles, such as primary, secondary and link.
Primary button style`result.styleguide.components.button.primary`	`object`	Reported primary-button colors, typography, spacing, borders, dimensions, shadows and CSS declaration text.
Secondary button style`result.styleguide.components.button.secondary`	`object`	Reported secondary-button colors, typography, spacing, borders, dimensions, shadows and CSS declaration text.
Link button style`result.styleguide.components.button.link`	`object`	Reported link-button treatment. Values such as 0px, none and transparent are literal CSS values.
Primary button CSS`result.styleguide.components.button.primary.css`	`string`	CSS declaration text supplied for the observed primary button, for inspection and adaptation.
Card style`result.styleguide.components.card`	`object`	Reported card background, text, padding, border, radius, shadow and CSS declaration text.
Font references`result.styleguide.fontLinks`	`object`	Font-family entries associated with detected typography. Family keys vary by page; references do not establish font licenses.
Detected font-family entry`result.styleguide.fontLinks.sohne-var`	`object`	A sohne-var entry when that family is detected. Other pages may return different family keys; match entries to the reported fontFamily.
Font display name`result.styleguide.fontLinks.sohne-var.displayName`	`string`	Display name provided for this detected font-family entry.
Font file references by weight`result.styleguide.fontLinks.sohne-var.files`	`object`	Font URLs keyed by weight for this family. Several weights can share one URL, so the key count is not a count of distinct files.
Associated domain`result.domain`	`string`	Domain associated with the returned style observations.
Captured page load state`result.finalDOMState`	`string`	Page load state reported for the capture, such as loaded; it does not describe every element or interactive state.
Cache details`result.cache_metadata`	`object`	Cache reuse details associated with the style observations.
Cache age`result.cache_metadata.age_ms`	`number`	Age of the reused result in milliseconds, not the website’s update time.
Cache status`result.cache_metadata.status`	`string`	Cache status reported for the result, such as hit.

Questions about this tool.

Inputs, results and details to know before running it.

Get connected

Provide exactly one. Use domain to inspect a website domain, or directUrl to inspect an exact page without domain resolution. A selected page can help you review a particular interface, without establishing that its styles represent the whole site.

Extract design styles from a website

Extract design styles from a website

You receive

Start with your task

What to know

Inputs & outputs

Input schema

Result schema

Use Toolmu with your AI assistant

Share a website or page link

Review the style notes

Questions about this tool.

You receive

Start with your task

What to know

Inputs & outputs

Input schema

Result schema

Use Toolmu with your AI assistant

Share a website or page link

Review the style notes

Questions about this tool.

Should I use a domain or a particular page URL?

Is this the website’s official design system?

What do none, transparent and zero values mean?

Do the font references include reusable font assets?

Will choosing dark produce a dark version of the design?