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.