Lift any site's tokens in one paste.
Paste a URL — your own, a competitor's, the SaaS you wish your product looked like. The extractor opens it headlessly, lifts the colors, typography, spacing, radius, and primary CTA pattern, and writes a draft DESIGN.md you can review and commit.
Live in v1.1 — get notified when it ships: add my email →
- 01
Token lift via Playwright
A headless Chromium navigates to the URL, reads :root CSS variables, computed font stacks, primary button styles, and surface tones.
- 02
Screenshot pass
Hero, card, button, and type-sample screenshots captured at 1440×900 + iPhone 14 Pro viewports.
- 03
Multi-pass prose synthesis
Claude Sonnet 4.6 reads tokens + screenshots, writes a 200-word Overview, identifies named influences (Lineage), and produces Do's & Don'ts.
- 04
Lint pass
Output runs through @google/design.md lint to catch missing primary, contrast warnings, and section order issues before the draft hits your inbox.
- 05
Review queue
For first-time submitters, the draft enters a moderation queue. Returning contributors auto-publish.
Onboard fast
New designer at the company? Run extract on your own homepage — instant briefing for any agent that needs to match your brand.
Compete sharper
See what your competitor is doing at the token level. Useful for refresh briefs and visual differentiation arguments.
Inspiration → kit
Saw a site you want to riff on? Extract → adjust → use as a starting palette for your own design system.
We only extract token-level facts — colors, typography metadata, spacing scales. We don't lift logos, copy, or brand assets. If you're the brand owner and you'd prefer your tokens off the directory, email richard@webdesignhot.com and we'll remove the entry within 24 hours.