Claude Code + Puppeteer: Automate Screenshots and Visual Content

What it is: A practical guide to using Claude Code with Puppeteer to automate screenshots, generate visual content from web pages, and build image production pipelines for content marketing.
Who it’s for: Content creators, documentation teams, and marketers who need consistent screenshots, social cards, and visual assets generated at scale.
Best if: You regularly need screenshots of websites, tools, or dashboards for articles, tutorials, or presentations and want to automate the process.
Skip if: You only need occasional screenshots and are happy using manual screenshot tools.

Automate Your Visual Content Pipeline with Puppeteer

Bottom line up front: Claude Code paired with Puppeteer gives you a powerful visual content automation system. Puppeteer is a headless browser library that can navigate web pages, take screenshots, generate PDFs, and manipulate the DOM programmatically. When Claude Code writes and runs Puppeteer scripts for you, you get an AI-powered assistant that can capture, modify, and produce visual content at any scale — from single screenshots to thousands of social media cards, all from your terminal.

Key Takeaways

• Puppeteer controls a headless Chrome browser programmatically — it can navigate pages, click elements, fill forms, and screenshot anything a browser can display
• Claude Code writes Puppeteer scripts from plain English descriptions, so you never need to learn the Puppeteer API directly
• Common use cases include documentation screenshots, social media cards, competitor monitoring, and visual regression testing
• You can modify page content before screenshotting — inject CSS, change text, remove ads — to get exactly the image you need
• Batch screenshot generation lets you capture hundreds of pages with consistent framing, viewport size, and timing
• The combination works for any visual content that originates from a web page or HTML template

Setting Up Claude Code with Puppeteer

# Create a project directory
mkdir visual-content && cd visual-content
npm init -y

# Install Puppeteer (downloads Chromium automatically)
npm install puppeteer

# Start Claude Code
claude

That is all the setup you need. Claude Code can now write and execute Puppeteer scripts directly from your terminal.

Basic Screenshots with Claude Code

Start with simple screenshot capture:

claude "Write a Puppeteer script that takes a full-page screenshot of
https://beginnersinai.org at 1920x1080 and saves it to output/homepage.png.
Wait for all images to load before capturing."

Claude generates and can execute the script:

// screenshot.js
const puppeteer = require("puppeteer");

async function captureScreenshot() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });

  await page.goto("https://beginnersinai.org", {
    waitUntil: "networkidle0",
    timeout: 30000,
  });

  // Wait an extra second for animations to complete
  await new Promise((resolve) => setTimeout(resolve, 1000));

  await page.screenshot({
    path: "output/homepage.png",
    fullPage: true,
    type: "png",
  });

  await browser.close();
  console.log("Screenshot saved to output/homepage.png");
}

captureScreenshot();

Capturing Specific Elements

Often you need a screenshot of just one section, not the full page:

claude "Modify the screenshot script to:
1. Navigate to a blog post URL
2. Find the main article content area (article or .post-content element)
3. Screenshot only that element, not the header/footer/sidebar
4. Add 20px padding around the captured area
5. Save with the page title as the filename"

// element-screenshot.js
const puppeteer = require("puppeteer");
const path = require("path");

async function captureElement(url, selector, outputDir) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1200, height: 800 });
  await page.goto(url, { waitUntil: "networkidle0" });

  const title = await page.title();
  const safeTitle = title.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase();

  const element = await page.$(selector);
  if (element) {
    await element.screenshot({
      path: path.join(outputDir, `${safeTitle}.png`),
      type: "png",
    });
    console.log(`Captured: ${safeTitle}.png`);
  } else {
    console.log(`Element "${selector}" not found on ${url}`);
  }

  await browser.close();
}

captureElement(
  "https://beginnersinai.org/claude-code-beginners-guide/",
  "article",
  "output"
);

Generating Social Media Cards from Web Pages

Create branded social cards by rendering HTML templates and screenshotting them:

claude "Build a social media card generator system:
1. Create an HTML template (templates/social-card.html) at 1200x630
   with a gradient background, large title text, subtitle, and logo
2. Accept parameters via URL query strings: title, subtitle, color
3. Write a Puppeteer script that reads article data from data/articles.json
   and generates a social card for each article
4. Save cards as social-{slug}.png in output/
5. Process all articles in parallel (5 at a time) for speed"

// social-card-generator.js
const puppeteer = require("puppeteer");
const path = require("path");
const articles = require("./data/articles.json");

async function generateCards() {
  const browser = await puppeteer.launch();
  const batchSize = 5;

  for (let i = 0; i < articles.length; i += batchSize) {
    const batch = articles.slice(i, i + batchSize);

    await Promise.all(batch.map(async (article) => {
      const page = await browser.newPage();
      await page.setViewport({ width: 1200, height: 630 });

      const templateUrl =
        `file://${path.resolve("templates/social-card.html")}` +
        `?title=${encodeURIComponent(article.title)}` +
        `&subtitle=${encodeURIComponent(article.subtitle)}` +
        `&color=${encodeURIComponent(article.color)}`;

      await page.goto(templateUrl, { waitUntil: "networkidle0" });
      await page.screenshot({
        path: `output/social-${article.slug}.png`,
        type: "png",
      });

      console.log(`Generated: social-${article.slug}.png`);
      await page.close();
    }));
  }

  await browser.close();
  console.log(`Generated ${articles.length} social cards`);
}

generateCards();

Modifying Pages Before Screenshots

One of Puppeteer’s most powerful features is DOM manipulation before capture. You can inject CSS, remove unwanted elements, or change content:

claude "Write a Puppeteer script that:
1. Navigates to any given URL
2. Removes all ads, cookie banners, and popups
3. Injects custom CSS to change the font to Inter and increase readability
4. Hides the navigation bar and footer
5. Takes a clean screenshot of just the content
This should work for any blog or news site."

// clean-screenshot.js
const puppeteer = require("puppeteer");

async function cleanScreenshot(url, output) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1200, height: 800 });
  await page.goto(url, { waitUntil: "networkidle0" });

  // Remove distracting elements
  await page.evaluate(() => {
    const removeSelectors = [
      '[class*="cookie"]', '[class*="popup"]', '[class*="modal"]',
      '[class*="banner"]', '[class*="ad-"]', '[id*="cookie"]',
      'nav', 'header', 'footer', '[class*="sidebar"]',
    ];
    removeSelectors.forEach((sel) => {
      document.querySelectorAll(sel).forEach((el) => el.remove());
    });
  });

  // Inject clean styling
  await page.addStyleTag({
    content: `
      body { font-family: 'Inter', sans-serif !important; }
      * { animation: none !important; transition: none !important; }
    `,
  });

  await page.screenshot({ path: output, fullPage: false, type: "png" });
  await browser.close();
  console.log(`Clean screenshot saved: ${output}`);
}

cleanScreenshot("https://example.com/article", "output/clean.png");

Batch Documentation Screenshots

For documentation teams that need consistent screenshots of product features or UI states:

claude "Create a documentation screenshot pipeline that:
1. Reads a list of screens from data/screens.json with fields:
   url, actions (click/type/wait), selector_to_capture, filename
2. For each screen, navigates to the URL, performs the actions
   (like clicking buttons or typing in fields), then screenshots
3. Captures at 2x resolution for retina displays
4. Adds a subtle drop shadow and rounded corners to each screenshot
5. Processes all screens sequentially (some depend on login state)"

This is particularly valuable for SaaS companies that need to update documentation screenshots every time the UI changes. Run the pipeline after each release and all your docs stay current automatically.

Combining Puppeteer with Other Visual Tools

Puppeteer integrates well with image processing tools for post-capture enhancement:

claude "After generating screenshots with Puppeteer, use Sharp to:
1. Add a branded border (3px solid #6c5ce7) to each screenshot
2. Resize to exactly 1200x675 (Twitter card size)
3. Add a watermark logo in the bottom-right corner at 20% opacity
4. Compress to under 200KB while maintaining quality
5. Generate both PNG and WebP versions for different platforms"

For more on automated thumbnail and image generation, see our guide on automating video thumbnails with code. And for broader content automation strategies, check our Claude for coding workflows guide.

Monitoring and Competitive Intelligence

Use Puppeteer on a schedule to monitor websites and capture changes:

claude "Build a website monitoring script that:
1. Takes screenshots of 5 competitor homepages daily
2. Saves with date-stamped filenames (competitor-2026-03-29.png)
3. Uses Sharp to compare today's screenshot with yesterday's
4. If significant pixel differences are detected, sends an alert
5. Runs via a cron job or scheduled task"

Performance Tips for Large-Scale Screenshot Generation

• Reuse browser instances: Launch one browser and open multiple pages instead of launching/closing for each screenshot
• Parallel processing: Process 5-10 pages simultaneously using Promise.all with page pools
• Disable unnecessary features: Pass --disable-gpu --disable-extensions --no-sandbox for faster headless rendering
• Cache common resources: Use Puppeteer’s request interception to cache fonts and images across captures
• Use WebP format: WebP screenshots are 30-50% smaller than PNG with negligible quality loss

For more on building complete content pipelines, see our Claude Code beginner’s guide.

Get the Claude Essentials Toolkit

Our Claude Essentials toolkit includes pre-built Puppeteer scripts, HTML templates for social cards, and Claude Code prompts for visual content automation. Download it and start automating your screenshot workflow today.

For weekly AI automation tutorials, subscribe to the Beginners in AI newsletter.

Frequently Asked Questions

Is web scraping with Puppeteer legal?

Taking screenshots of publicly accessible web pages is generally legal in most jurisdictions. However, respect robots.txt directives, terms of service, and rate limits. Do not use Puppeteer to bypass paywalls, access private content, or overload servers with requests. When in doubt, consult a legal professional about your specific use case.

Can Puppeteer capture pages that require login?

Yes. Puppeteer can fill login forms, click buttons, and navigate authenticated pages. You can store session cookies and reuse them across captures. Claude Code can write scripts that handle the entire authentication flow before taking screenshots. Store credentials securely in environment variables, not in the script files.

How does Puppeteer compare to Playwright for this use case?

Playwright is a newer alternative that supports Chrome, Firefox, and Safari. For screenshot automation, both work well. Puppeteer is more mature with more examples and tutorials available. Playwright has better cross-browser support. Claude Code can generate scripts for either library — specify which one you prefer in your prompt.

Can I run Puppeteer in a CI/CD pipeline or cloud server?

Yes. Puppeteer runs headlessly on any Linux server, Docker container, or CI/CD runner. You need to install Chromium dependencies (the Puppeteer npm package can install them automatically). GitHub Actions, GitLab CI, and AWS Lambda all support Puppeteer for automated screenshot generation as part of deployment workflows.

What resolution should I capture screenshots at for different platforms?

Standard recommendations: Twitter/X cards at 1200×675, Facebook/LinkedIn at 1200×630, Instagram at 1080×1080 (square) or 1080×1350 (portrait), blog featured images at 1200×628, documentation screenshots at 2x your display resolution (e.g., 2560×1440 for 1280×720 display). Claude Code can set up multi-resolution capture in a single script.

Sources

• Puppeteer Documentation — github.com
• Web Automation Tools — Wikipedia

You May Also Like

• Claude Code for Content Creators: The Complete Workflow
• Claude Agent SDK Tutorial: Build Autonomous AI Workers
• Claude for Architects: Design, Rendering, and Project Planning
• Claude vs ChatGPT for Writing: Which AI Writes Better?
• How to Use Claude AI: The Complete Beginner’s Guide (2026)