KeyzHub
19Keys · community archive

design-capture

Playwright design forensics: screenshot any site + extract its ranked design tokens (fonts, colors, spacing).

◆ 2 commits history main
UNLOCK THE CODE

Read the overview free. Drop your email once to unlock the clone command and source across the whole archive.

One email unlocks every project here. No spam.

main
· .gitignore
· capture.py
· README.md
· requirements.txt
· SETUP.md
README

design-capture

Requirements: Python 3 + pip install -r requirements.txt + playwright install chromium (no Docker, no account, no API key) — full walkthrough in SETUP.md

A single-file Playwright script that renders any live website and pulls down everything you need to study or rebuild its DESIGN — not its data.

For one URL it produces:

  • Full-page screenshots at a desktop breakpoint (1440x900) and a mobile breakpoint (390x844), captured at 2x device scale.
  • The fully rendered HTML (post-JavaScript DOM), not the raw server response.
  • The site's linked stylesheets, downloaded locally.
  • A ranked design-token report (tokens.json + REPORT.md) covering:
  • font families, font sizes, font weights, line heights, letter spacing
  • text colors and background colors
  • border radii and the spacing scale (margins/padding/gap)
  • any CSS custom properties declared on :root
  • each value ordered by how often it actually appears across the rendered page, so you can see what's load-bearing versus incidental.

Why it matters

Reading a site's raw HTML/CSS with a scraper tells you what's in the source files. It doesn't tell you what actually renders, what Playwright's headless Chromium computes after JS runs, or which values a designer is really leaning on. This script uses a real browser (getComputedStyle on every element) so the token report reflects the DOM as visitors experience it.

Quickstart

pip install -r requirements.txt
playwright install chromium
python capture.py https://example.com

Output lands in ./captures/<name>/, where <name> defaults to the site's domain (or pass a name explicitly: python capture.py https://example.com my-study).

Each run writes:

captures/<name>/
  desktop-full.png
  mobile-full.png
  rendered.html
  tokens.json
  REPORT.md
  css/
    00_<stylesheet>.css
    01_<stylesheet>.css
    ...

Make it your own

  • The two viewport sizes (DESKTOP / MOBILE) and the design-token properties tallied (EXTRACT_JS) are both defined at the top of capture.py — extend the tally object to track anything else you care about (box-shadow, transitions, z-index, whatever your own design system needs).
  • rank() controls how many top values make it into each table; bump top if you want a longer tail.
  • The script makes no network calls beyond the target site and the site's own stylesheet links — no API keys, no accounts, no external services. There is nothing to configure before your first run.

Notes

  • Respect the target site's terms of service and robots.txt before capturing it. This tool is for studying design systems (fonts, color, spacing, layout) you have a legitimate reason to reference — not for scraping content or bypassing access controls.
  • captures/ is gitignored since it's regenerated output, not the tool itself.