sample

tl;dr The sample tool extracts design tokens from public webpages. Use it to analyze existing designs and create taste models based on real-world references.

What it does

The sample tool visits a public webpage and extracts:

• Color palette with semantic mapping (background, foreground, primary, etc.)
• Typography styles (fonts, sizes, weights)
• Spacing patterns
• Component styles (opt-in, to keep responses compact)

Parameters

Parameter	Type	Required	Description
url	string	Yes	URL to sample (public webpage)
components	array	No	Request details for specific components (e.g., ["button", "card"])
includeStructure	boolean	No	Include simplified DOM structure. Default: false
resolveVariables	boolean	No	Resolve CSS variables to final values. Default: true

What you get back

An overview of the design including:

• Colors : Extracted palette plus semantic mapping to standard tokens
• Typography : Font families and a scale of sizes/weights
• Spacing : Base unit and common spacing values
• Components : List of detected components (names only, unless you request details)

When you request component details, you get the actual styles (colors, padding, border-radius, etc.) for those components.

Examples

Basic sampling: sample { url: "https://stripe.com" }

With component details: sample { url: "https://linear.app", components: ["button", "card"] }

Include DOM structure: sample { url: "https://vercel.com", includeStructure: true, components: ["header"] }

Natural language

• "Sample the design from stripe.com" → sample { url: "https://stripe.com" }
• "Get the button styles from linear.app" → sample { url: "https://linear.app", components: ["button"] }

Component selectors

For webpages, these component names map to common HTML elements:

Name	Finds
header	<header>, [role="banner"]
footer	<footer>, [role="contentinfo"]
button	<button>, [role="button"], .btn
card	.card, [class*="card"]
input	<input>, <textarea>, <select>
nav	<nav>, [role="navigation"]

You can also pass CSS selectors directly: sample { url: "https://example.com", components: [".hero-section", "#pricing-table"] }

Sample to taste model workflow

1. Sample a reference site: sample { url: "https://stripe.com" }
2. Review the extracted tokens
3. Create a taste model from the results

Or just ask: "Sample stripe.com and create a taste model from it"

Requirements

• URL must be publicly accessible (no authentication required)
• HTTPS strongly recommended
• Page must render meaningful content

Sites behind paywalls or with aggressive bot protection may not work.

Common questions

What sites can I sample?

Any publicly accessible webpage. Sites behind authentication or with aggressive bot protection may not work.

Can I sample authenticated pages?

No. The sample tool can only access public URLs.

How accurate is the sampling?

Sampling extracts actual computed styles from the page. Results are accurate but may not capture every nuance of a complex design system. Review and adjust the extracted tokens as needed.

Related

• connect - Initialize session and set active model
• list - Browse available taste models
• use - Fetch full taste model or pattern
• create - Create or update a taste model
• search - Search the UI pattern library
• Principles - Design token concept
• Sampling from Websites - Full guide