git:20260907.2f0c00d to git:20260925.8a9b5ba

- description: Use when a question is better answered by looking than by reading - researching how websites or apps look, gathering design references, finding what a style or palette or typeface actually is in the wild, comparing competitors visually, or building a moodboard. Renders real sites and searches real images, then reads them as pictures.

- # Visual research

-

- Most design questions are answered by looking at twenty examples, not by

- reading one article about them. This gets the pictures in front of you cheaply.

-

- ## Render real sites - the highest-signal source

-

- ```bash

- node "${CLAUDE_PLUGIN_ROOT}/scripts/webdesign.mjs" study <url> <url> ...

- node "${CLAUDE_PLUGIN_ROOT}/scripts/webdesign.mjs" study --list editorial

- ```

-

- Renders each site at the top and one screen down in a real headless browser

- and tiles them into contact sheets - eight references become one image to

- read. Curated lists: `editorial`, `object`, `cinema`, `product`.

-

- **Read the contact sheet first**, then the individual PNGs only for the two or

- three worth a closer look. A sheet is roughly eight times cheaper than eight

- reads.

-

- Two things it cannot see, and it says so: WebGL sites render only their

- preloader, and Cloudflare-walled ones show a challenge page. For those, use the

- `-y900` tile (usually below any cookie modal) or find a video walkthrough.

-

- ## Find images on the open web

-

- Free and no key needed:

-

- | Source | Endpoint | Note |

- |---|---|---|

- | Openverse | `https://api.openverse.org/v1/images/?q=<q>` | ~600M CC images, no key for light use |

- | Wikimedia Commons | `https://commons.wikimedia.org/w/api.php?action=query&generator=search&gsrnamespace=6&gsrsearch=<q>&prop=imageinfo&iiprop=url&format=json` | canvas-safe, CORS `*` |

- | Art Institute of Chicago | `https://api.artic.edu/api/v1/artworks/search?q=<q>` then the IIIF URL | 60 req/min, CORS `*` |

- | Met Museum | `https://collectionapi.metmuseum.org/public/collection/v1/search?q=<q>` | no key |

-

- Unsplash and Pexels need a free key for their APIs, but their CDN URLs can be

- hotlinked directly once you have an id. Verify every URL with a HEAD request

- before shipping it - `look` reports images that failed to load, but only after

- the fact.

-

- ## Design galleries, for finding sites worth rendering

-

- Awwwards, Godly, Land-book, SiteInspire, Minimal Gallery, Curated.design,

- One Page Love. Fetch the gallery page, extract the outbound site URLs, then

- `study` them. The gallery's own thumbnails are small and colour-shifted -

- render the real thing instead.

-

- ## Reading what you got

-

- Go in with a question. "What do these have in common" produces mush; "where

- does the eyebrow sit relative to the headline, and at what size" produces a

- number you can build with.

-

- Worth extracting every time: the type pairing and sizes, the ground colours,

- where the accent appears, section rhythm, what the first screen does, and the

- one move you have not seen before.

-

- Palette straight off a rendered page:

-

- ```bash

- node -e "import('./scripts/inspect.mjs').then(async m=>{

- const r = await m.inspect('https://example.com',{widths:[1440],out:'./shots'});

- console.log(JSON.stringify(r[0].stats));

- })"

- ```

- ## Do not

- Do not describe an image you have not read. Do not treat a gallery thumbnail as

- evidence of colour. Do not conclude a site uses a library because the effect

- looks like it - check the bundle. And say plainly when a render is a wall or a

- preloader rather than guessing what is behind it.