UI Screenshot Gallery
Capture screenshots of all key app pages and organize into a visual gallery
Example Prompt
Take screenshots of all pages of our app at staging.example.com and create a gallery
About
Navigates through all key pages of a web application using Puppeteer, captures full-page screenshots of each view, and organizes them into a structured gallery directory. This is useful for design reviews, visual regression tracking, and maintaining up-to-date documentation of your application's UI.
Workflow Steps
List the existing gallery directory to check for previous screenshot captures
📁 List DirectoryNavigate to the first key page of the application
🎯 Navigate PageCapture a full-page screenshot of the current view
📷 Take ScreenshotRepeat navigation and capture for each remaining key page in the application
🎯 Navigate PageWrite an index file cataloging all captured screenshots with page names and timestamps
✏️ Write FileTools Used
List Directory
List all files and subdirectories in a given directory path
Write File
Write or overwrite a file at a specified path with the given content
Navigate Page
Navigate to a URL and extract the page content as text or HTML
Take Screenshot
Navigate to a URL and capture a screenshot of the rendered page