Sampling from Websites

tl;dr Point your AI at any public URL and it extracts colors, typography, and spacing. Save those tokens as a taste model you can use forever. Sampling is available to Iterate and Scale subscribers. See Usage for plan details.

Why sample?

You've found a website with exactly the vibe you're after. Instead of eyeballing hex codes and guessing at font sizes, let your AI extract everything automatically. In seconds, you'll have a taste model that captures the essence of that design, ready to use on your own projects.

The workflow

1. Pick a website to sample
2. Sample the website's style
3. Create a taste model from the sample

Step 1: Pick a website

Choose a site whose design inspires you. The site needs to be publicly accessible (no login required).

Step 2: Sample the website's style

Ask your AI to sample the site: Sample https://linear.app

Your AI visits the page and samples:

• Colors from backgrounds, text, borders, and accents
• Typography including font families, sizes, and weights
• Spacing patterns from padding and margins
• Components (if you ask for them)

Want more detail on specific elements? Just ask: Sample https://linear.app and show me the button and card styles

Component details

You can request styles for common components:

Component	What it finds
header	Navigation bars and headers
footer	Page footers
button	Buttons and clickable elements
card	Card-style containers
input	Form fields and textareas
nav	Navigation menus

Or ask for custom CSS selectors: Sample https://example.com and get styles for the .hero-section

Step 3: Create a taste model from the sample

Once you've sampled, save the tokens: Create a taste model called "Linear-Inspired" from those tokens

Your AI formats the extracted data into a valid taste model with all the semantic tokens mapped correctly. You can start using it immediately.

Refining your sample

Sampling is smart, but not perfect. Sometimes you'll want to adjust the results:

Wrong color mapping? Use the blue as primary instead of the purple

Missing something? Sample the pricing page too and add those card styles

Too much? Simplify the typography to just two font weights

Think of sampling as a starting point. The extracted tokens capture the essence of a design for you to build on.

Tips & tricks

Pick pages with variety

Different pages reveal different design elements. Homepages show brand colors and hero styling. Pricing pages have cards and CTAs. Documentation shows typography hierarchy. Sample the page that has what you need.

Combine samples for complete coverage

One page rarely has everything. Sample the homepage for colors, then the docs for typography, and your AI will merge them into a cohesive model.

Review before saving

Your AI makes educated guesses about which colors map to "primary," "accent," etc. Take a quick look and correct anything that feels off before saving.

Specify light or dark mode

Some sites serve different styles based on your system preference. If you want the dark version specifically, just say so: Sample https://example.com in dark mode

Troubleshooting

Page not accessible

The URL might be wrong, the site might be down, or they might block automated access. Try a different URL or check the site manually first.

Empty results

Some sites are difficult for Popmelt to understand. Try sampling a different page on the same site.

Incorrect colors

The site might use different colors for light/dark mode, or serve different content based on location. Check what you see in your browser matches what was sampled.

Missing components

The page might use unconventional markup. Try asking for specific CSS selectors instead of component names.

Common questions

Can I sample any website?

Any publicly accessible URL. Sites behind authentication, paywalls, or with aggressive bot protection may not work.

How accurate is sampling?

Better than a screenshot, worse than direct code access. Popmelt gives your AI tool real style values from the website, but complex design systems with lots of conditional logic will need fine-tuning.

Can I sample localhost?

No. Popmelt can only sample live websites and can't access your local development environment. Deploy to a public URL first, or ask your AI tool to read your codebase directly.

What about copyright?

Sampling pulls technical values (hex codes, pixel sizes, font names), not complete design and we discourage cloning others' work. Use sampled styles as an inspirational starting point, then make the design your own.

What's next

• Creating Taste Models - Other ways to create models
• Building Landing Pages - Put your sampled model to work
• Taste Models - Understand how models work
• Principles - Deep dive on design tokens