Screenshots
Weekly snapshots of every public surface across the ChurchWiseAI portfolio, captured at desktop (1280x800) and mobile (390x844) viewports.
What's here
Each public page has two files:
<slug>-desktop.png— 1280x800<slug>-mobile.png— 390x844 (iPhone 14 Pro approx, device scale 2x)
The capture-summary.json file records when the last capture ran, how many surfaces succeeded, and any that failed.
Scope
MVP covers 19 public surfaces:
| Site | Surfaces |
|---|---|
| churchwiseai.com | home, /voice, /chatbot, /pricing, /onboard |
| FuneralWiseAI | home, /pricing |
| SermonWise | home, /pricing |
| ShareWiseAI | home (Coming Soon) |
| pewsearch.com | home, /directory, /pricing |
| illustratetheword.com | home, /pricing |
| docs.churchwiseai.com | home, /journeys/, /architecture/system-overview, /journeys/voice/crisis-call-escalation |
Out of scope (for now): authenticated admin dashboard surfaces, widget-open chatbot state, checkout-embedded state. These need either seeded demo tokens or a test account and can be added in a follow-up once those flows are stable enough to screenshot without flakes.
How it runs
Automated (default): .github/workflows/refresh-screenshots.yml fires Sundays 02:00 UTC. If the capture produces any diffs vs. the committed state, the workflow opens a PR against master for founder review. If nothing changed, no PR.
Manual: From this repo root:
pnpm install --frozen-lockfile
pnpm exec playwright install --with-deps chromium
pnpm tsx scripts/capture-screenshots.ts
Runs against production URLs, not localhost. Takes ~60-90 seconds for all 38 captures (19 surfaces × 2 viewports).
How to use the screenshots
- Visual regression baseline. If a marketing change lands and the next weekly capture shows a surprise delta on an unrelated page, that's a regression.
- Onboarding context. When explaining the portfolio to a new hire or investor, link them a relevant screenshot here instead of asking them to click through each property.
- Journey docs. Any user journey in
knowledge/journeys/can embed the relevant screenshot inline — e.g., the crisis-call journey embedsdocs-voice-journey-desktop.png.
Adding a new surface
Edit scripts/capture-screenshots.ts, append an entry to the SURFACES array with:
slug— kebab-case, used as the filename prefixurl— full HTTPS URLdescription— one-line explainer for the capture-summary JSON- optional
waitFor— CSS selector to wait for before snapping - optional
settleMs— extra milliseconds to settle (animations, lazy rendering)
No config file; the script is the source of truth.
When a capture fails
The script keeps going even if a single URL times out or returns 4xx. Failures are recorded in capture-summary.json under failures[]. The workflow still opens a PR so the reviewer can see both the successful deltas and the failure list.
A capture that fails every week on the same URL usually means: (a) the URL changed, (b) the page is behind auth now, (c) the production build is broken. Open a ticket, don't silently remove the surface.