ridelink0 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
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:
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.