# 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](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

```bash
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.