marketing-screenshots

marketing-screenshots

A Claude Code plugin that captures element-level screenshots from any web app, driven by a YAML spec. Designed for marketing sites that need product UI imagery — FeatureBlock images, email previews, hero posters, OG cards.

• Native browser rendering via Playwright. Handles oklab colors, gradient text, frozen animations — none of the workarounds html2canvas-based tools need.
• Auth-aware. Five strategies: none, static headers, pre-built storage state, interactive headed login, or minted JWT for local dev apps.
• Spec-driven. One YAML file per project describes URLs, target elements (anchor + walk-up to handle moving DOM), DOM tweaks (text replacement, hide lists, force single column), and outputs.
• DOM-tweak verb catalog with a JS escape hatch — declarative for common patterns, raw JS for one-offs.
• PNG + WebP out of the box, via Sharp.

Install

In Claude Code:

/plugin marketplace add brandonhall/marketing-screenshots
/plugin install marketing-screenshots@marketing-screenshots

Open a new session, then run the one-time setup in the plugin's assets/ directory:

cd ~/.claude/plugins/<...>/marketing-screenshots/plugins/marketing-screenshots/skills/screenshot/assets
npm run setup

(This installs Node deps and downloads the Chromium binary Playwright needs.)

Updating

/plugin marketplace update marketing-screenshots

Uninstalling

/plugin uninstall marketing-screenshots@marketing-screenshots
/plugin marketplace remove marketing-screenshots

Try the bundled example

cd <plugin-assets>
mkdir -p examples/tmp
node capture.mjs examples/fastapi-docs-spec.yaml
ls examples/tmp/

Two screenshots from fastapi.tiangolo.com (the hero and the install code block) appear in examples/tmp/.

Write your own spec

output_dir: ./public/marketing
app:
  base_url: https://app.yoursite.com
auth:
  strategy: none                # or: headers | storage_state | interactive | mint_jwt
shots:
  - slug: pricing-hero
    url: /pricing
    wait_for: 'h1:has-text("Pricing")'
    target:
      anchor: { tag: h1, text: 'Pricing' }
      walk_up_until: { class_contains: 'hero' }
    style: marketing-card

Run it:

cd <plugin-assets>
node capture.mjs /path/to/your/spec.yaml

The full spec schema, all auth strategies, target descriptors, and tweak verbs are documented in the skill itself:

<plugin-assets>/../SKILL.md

Why Playwright (vs html2canvas / DevTools)

Playwright eliminates every workaround other approaches need:

• No html2canvas. Native CDP element screenshots render exactly what the browser sees — gradient text, oklab colors, animations frozen via animations: 'disabled'.
• No HTTPS upload server. Writes directly to disk.
• No JS-context resets. A single Node process drives the entire capture run.
• Real mobile viewport emulation. When the app is responsive, viewports: { mobile: { device: 'iPhone 13' } } triggers md:/lg: Tailwind breakpoints.
• Headless-by-default. Runs in CI; no browser window needed.
• Auth via storage state. Once you mint or save a storage state, every subsequent run reuses it.

License

MIT — see LICENSE.

Design notes

See DESIGN.md for the design rationale and PLAN.md for the implementation plan.