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:** Python GUI Developer (PyQt6 Specialist)
**Task:** Create "Web Capture Pro" Desktop App

**Objective:** A batch website screenshot tool with mobile emulation and full-page capture.

**Tech Stack:**
* Language: Python 3.10+
* GUI Library: PyQt6 (Cross-platform)
* Browser Engine: Playwright (Python) or Selenium
* Packaging: PyInstaller

**Functional Requirements:**
1.  **UI Layout (PyQt6):**
    *   **Input:** URL List (Text Area) or `urls.txt` file loading.
    *   **Viewport:** Radio "Desktop (1920x1080)" vs "Mobile (375x812)".
    *   **Options:** Checkbox "Full Page Capture", "Dark Mode".
    *   **Action:** "Capture All".
    *   **Progress:** ProgressBar with "Processing X/Y".

2.  **Core Logic:**
    *   Launch Headless Browser.
    *   Iterate URLs -> Go to Page -> Wait for Network Idle.
    *   Scroll to bottom (lazy load) -> Screenshot.
    *   **Threading:** Browser automation runs in background thread.

3.  **Deliverables:**
    *   `main.py`: Complete source code.
    *   `requirements.txt`: Dependencies.
    *   **Build Instructions:**
        *   Windows: `pyinstaller --onefile --noconsole main.py`
        *   macOS: `pyinstaller --windowed --noconsole main.py`

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