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. Some pages timeout, some have cookie popups.

🚀 Agentic Solution

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

Key Features:

• Full Page: Captures the entire scrollable height, not just what’s visible on screen.
• Smart Wait: Uses network idle detection instead of fixed timeouts.
• Error Recovery: Retries on timeout, logs failures, continues to next URL.
• Multi-Viewport: Supports desktop (1920x1080) and mobile (375x812) modes.

⚔️ Phase 1: Commander (Quick Fix)

For a quick investigation.

Prompt:

“I have urls.txt with one URL per line. Write a Node.js script using Puppeteer to:

1. Smart Wait:
   • Use waitUntil: 'networkidle2' (at most 2 network connections for 500ms).
   • Set timeout to 30 seconds per page.
2. Full Page Capture:
   • Set viewport to 1920x1080 (Desktop).
   • Scroll to bottom to trigger lazy-loaded images.
   • Take fullPage: true screenshot.
3. Error Handling:
   • If page fails (timeout, 404, SSL error), log to error_log.txt and continue.
   • Retry once on timeout.
4. Output: Save as screenshots/{domain}.png.

Print progress (e.g., ‘Captured 1/50: example.com’).”

Result: A folder of design references with full error handling.

🏗️ Phase 2: Architect (Permanent Tool)

For UI/UX Designers.

Engineering Prompt:

**Role:** Node.js Automation Engineer
**Task:** Create a "Batch Website Screenshot Tool".

**Requirements:**
1.  **Input:** Read URLs from `urls.txt` (one per line).
2.  **Engine:** Puppeteer (Headless Chrome).
3.  **Features:**
    *   **Smart Wait:** `networkidle0` + 30s timeout per page.
    *   **Viewport Options:**
        *   Desktop: 1920x1080 (default)
        *   Mobile: 375x812 (via `--mobile` flag)
    *   **Full Page:** Scroll to trigger lazy-load, then capture.
    *   **Concurrency:** Process 3 URLs at a time (optional).
    *   **Error Handling:** Log failures to `error_log.txt`, continue to next.
    *   **Dark Mode:** Optional `--dark` flag to emulate prefers-color-scheme: dark.

4.  **Deliverables:**
    *   `screenshot_advanced.js`
    *   `package.json`
    *   `run.bat` and `run.sh`

🧠 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.
• Retry Logic: Real-world sites sometimes timeout. Instead of failing the whole batch, retry once and log failures.

🛠️ Instructions

1. Install Node.js.
2. Copy Prompt → Paste to AI → Run generated script.
3. Edit urls.txt → Run → Check screenshots/ folder.