Capture and Tokens

Capture and tokens

Choosing how pictures get in

Situation	Command
Public site	BW capture KIT --site NAME URL... --crawl 10
Behind your login (SSO, intranet)	BW login KIT --site NAME URL --channel msedge, sign in yourself and close the window, then BW capture KIT --site NAME URL --crawl 10 --channel msedge
Already signed in, in your own browser	start Edge or Chrome with --remote-debugging-port=9222, then BW capture ... --cdp http://127.0.0.1:9222
Not reachable, or automation not allowed	save screenshots to a folder, then BW import KIT --site NAME FOLDER (--kind component for single components, --viewport mobile for phone shots)

What capture does

For each page and viewport (desktop 1440x900 and mobile 390x844 at 2x by default):

1. Opens the page (GET only), scrolls to load lazy images, and clicks only what --click names.
2. Masks:
   • e-mail addresses become name@example.com;
   • digit runs (phones, account and card numbers) become 5s;
   • typed field values are replaced;
   • consent banners, chat bubbles and survey pop-ups are hidden;
   • --hide SELECTOR removes more, and --blur SELECTOR blurs. Hiding is better, because blur teaches the LoRA to draw blur.
3. Takes a full-page screenshot into capture/<site>/pages/.
4. Records the component boxes and text (header, nav, footer, hero, card, form, button, input, table, dialog, tabs, alert, pagination, breadcrumb) in capture.jsonl.
5. Tallies the computed styles: colours (read through a canvas, so oklch() and friends work), fonts, sizes, radius, shadows and spacing. It also reads the :root custom properties, the @font-face rules and the style of each component kind, into tokens/.

--crawl N follows up to N same-site links. It skips sign-out, delete, cancel, mailto, file links, and cookie, privacy, terms and sitemap pages (--crawl-all keeps those).

Names and free text cannot be detected. Capture staging or a test account, or hide those regions, and look at a few pages before training.

Tokens

BW tokens KIT writes:

• tokens.json: in the shape of the DTCG design-token format 2025.10, with brand (all sites) and sites.<name> (per-site overrides). Recipes, custom properties and font faces go under $extensions.brandwright.
• brand.css: see Routes.
• tokens.md: a table to show people. palette.png: the palette as swatches.

The primary button recipe (.bw-button-primary) comes from the most common button with a coloured fill. Index and browse pages rarely have the main call to action, so list a form, start or sign-up page among the capture URLs. When none was captured, tokens says so and leaves the recipe out. Unstyled browser-default buttons never count.

For deeper token work, dembrandt (MIT, npx dembrandt URL --dtcg) is a well-kept alternative.