Capture inspo

Skill magnusrodseth/dotfiles/.claude/skills/capture-inspo

⚙️ There are many like them, but these dotfiles are mine. A stow-managed macOS setup: Zsh, Neovim, tmux, Ghostty, and a pile of Claude Code tooling.

Install

npx -y skills add magnusrodseth/dotfiles --skill capture-inspo

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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".

SKILL.md

3.8 KB, as published. Nobody here has run it

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.