Looking at a reference site before you design

Renders a web page the way a visitor sees it — wide (1440×900) and on a phone (390×844) — into PNGs in your project's design/refs/ folder, and prints what the page is really set in: the faces it loaded, its body and heading type, its ground and text colours. A reference is a page you LOOKED at; this is how you look.

Summary#

The design method ([[ui-design#direction]]) asks for at least two references from the category's best, each written down as its URL and one concrete thing you saw there. A page's text says nothing about its type, its whitespace or how its photographs own the screen — which is what a reference is for — so a reference has to be looked at, not read. osy design look renders it in a real browser and saves the pictures in your project.

Signature#

osy design look <url> [--full] [--out <dir>] [--name <name>] [--path <project>]

--full takes the whole page, top to bottom (up to 7,000px), instead of what the first screen shows. --out is where the pictures go, relative to the project (default design/refs); --name is the files' stem (default: the URL's host and path, example-com-shop).

Description#

What you get#

Two pictures — the page at a laptop's width and on a phone, the phone rendered as a phone (touch, a mobile browser, 2× pixels), so a site that serves phones a different layout shows that layout — and what the page is set in:

$ osy design look https://example.com/shop
✓ wide  1440×900  → design/refs/example-com-shop-wide.png
✓ phone 390×844  → design/refs/example-com-shop-phone.png
  title       Example — Shop
  faces loaded Söhne, Tiempos Headline
  body        Söhne, sans-serif · rgb(20, 20, 20) on rgb(246, 243, 236)
  h1          "Tiempos Headline", serif 64px weight 400 — "Everything for the table"
  Open both pictures and look at them, then write in DESIGN.md the URL and one concrete thing
  you SAW — the type, the ground, how the photographs sit — not what the page says about itself.

Open both pictures. The faces line is what the browser actually LOADED, not what the stylesheet asked for, so it is the honest answer to "what is this set in?" — and with it, Finding a typeface by its character, and shipping it finds an open-source face with the same character.

The page is given time to settle — its network to go quiet, its fonts to load, its entrance animations to finish — before the picture is taken, so you see the design rather than its first frame.

What it needs#

A browser, found exactly as osy test --pixels finds one: Playwright (npm i -D playwright in the project), driving the Google Chrome already installed — or Playwright's own Chromium (npx playwright install chromium) when there is no Chrome. When either is missing it says which, and that one command.

A page that refuses an automated browser, or never finishes loading, is reported as not loaded: take another reference rather than writing notes about one you did not see.