Website Screenshot Batch

😫 The Pain Point

Boss: “Go to these 20 competitor websites and capture their homepage for our design meeting.” You: Open link -> Wait load -> Print Screen -> Paste Paint -> Crop. x 20.

🚀 Agentic Solution

Headless Browser: Controls high-speed Chrome without drawing the UI (Headless), capturing pixels perfectly.

Key Features:

• Full Page: Captures the entire scrollable height, not just what’s visible on screen.
• Resolution: Simulates a 1920x1080 desktop monitor.

⚔️ Phase 1: Commander (Quick Fix)

For a quick investigation.

Prompt:

“I have a list of URLs in sites.txt. Use Puppeteer to visit each one, wait for network idle, and take a full-page screenshot. Save as [domain].png.”

Result: A folder of design references.

🏗️ Phase 2: Architect (Permanent Tool)

For UI/UX Designers.

Engineering Prompt:

**Role:** Node.js Automation Expert
**Task:** Create a "Batch Website Capture Tool".
**Requirements:**
1.  **Tech Stack:** Node.js + Puppeteer (Python Selenium is too slow for screenshots).
2.  **GUI:**
    *   (Since this is Node, use a simple `run.bat` that reads from `urls.txt`).
    *   *Alternative:* A simple Electron wrapper if requested, but Command Line is standard for Node.
3.  **Logic:**
    *   `browser = launch()`.
    *   `page.goto(url, {waitUntil: 'networkidle0'})`.
    *   `page.screenshot({fullPage: true})`.
4.  **Deliverables:** `capture.js`, `package.json`, `run.bat` (Windows), `run.sh` (Mac).

🧠 Prompt Decoding

• NetworkIdle0: Websites have lazy-loading images. If you screenshot immediately, it’s blank. This command waits until “0 network connections” are active, ensuring the site is fully loaded.

🛠️ Instructions

1. Install Node.js.
2. Copy Prompt -> Paste -> Run.
3. Edit urls.txt -> Run.