| name | capture-inspo |
| description | Capture full-page screenshots of real sites by aesthetic or vibe as design inspiration, driving your own Chrome via playwriter over Land-book, Lapa Ninja, Awwwards and Mobbin. Use for "capture inspo". |
Capture Inspo
Turn a vibe ("country wedding", "neo-brutalist", "warm editorial") into a folder of full-page
website screenshots, captured from the user's real Chrome, ready to drag into Claude Design.
Background on why this exists: the user's vault note "Building Beautiful UI with AI - Ras Mic"
describes generating a design system in Claude Design from a full-page screenshot of an
inspiration site. This skill automates the "go find and screenshot good inspiration" step.
Prerequisites
- Read the playwriter skill first: run
playwriter skill and follow its rules (observe→act,
state.page, single quotes, etc.). This skill assumes you drive the browser through playwriter.
- Chrome must be running with the playwriter extension connected (
playwriter session new).
- Capture writes via Playwright's
path (real fs, any dir). In-sandbox require('fs') is scoped
and cannot read /tmp or arbitrary dirs — verify saved files from the outer shell instead.
Source map (vibe → gallery)
| Vibe / intent | Galleries (in order) | Notes |
|---|
| Marketing / landing page | land-book.com, lapa.ninja | Free, direct links to live sites, style filters. Default. |
| Premium / award-winning / animated | add awwwards.com | High craft; many are WebGL-heavy → expect viewport fallback. |
| Mobile / web app screens & flows | mobbin.com | Best for app UI. Needs login, but the user's Chrome session handles it. Only when asked. |
Skip recent.design / Godly: they link to X posts, not live sites.
Workflow
Phase 1 — discover + preview (cheap)
- Map the vibe to a gallery + the closest style filter / search term.
- With playwriter: open the gallery, dismiss any cookie modal, apply the filter, then
page.evaluate() to extract candidates as { title, liveUrl, thumbnailUrl }. Strip
?ref=... tracking params from liveUrl. Collect ~8–12.
- Download each
thumbnailUrl into <dir>/_previews/ and Read them inline so the user can see
the shortlist. Present a numbered list (title + URL).
- Ask the user which to keep. Do not full-capture everything.
Phase 2 — capture chosen (expensive)
For each chosen liveUrl, run the bundled capture script (handles viewport pin, cookie dismiss,
lazy-load scroll, and WebGL fallback):
playwriter -s <SID> -e 'state.captureUrl="https://round.ai/"; state.outPath="/Users/<you>/screenshots/inspo/<slug>/round-ai.png"'
playwriter -s <SID> -f ~/.claude/skills/capture-inspo/scripts/capture.js
The script logs { url, outPath, mode } where mode is fullPage or viewport (fallback).
Output location
Save to ~/screenshots/inspo/<vibe-slug>-<YYYY-MM-DD>/ (e.g. country-wedding-2026-06-24/).
Get the date from the environment, never hardcode it. After capture:
- Make downscaled previews (
sips --resampleWidth 800 in.png --out preview.png) for any image you
read back, so you don't burn tokens on multi-MB full-page PNGs.
- Print the absolute folder path and tell the user it's ready to upload to Claude Design.
Caveats (learned, real)
fullPage fails on WebGL/canvas-heavy sites (e.g. family.co). The script catches this and
falls back to a viewport shot — flag those to the user as partial.- Always pin viewport width (the script uses 1440). Without it, capture inherits the monitor
width (e.g. 3440 ultrawide) → distorted layout and huge files.
- Full-page PNGs are large (multi-MB). Fine for Claude Design upload; resize before reading back.
- Login walls (Mobbin, Twitter) work because it's the real Chrome session, not headless.
