Automated Customer Onboarding Video & Screenshot Documentation Generator
Automated Customer Onboarding Video & Screenshot Documentation Generator
SaaS Factory automatically produces visual onboarding documentation for every product it builds. Using the same Playwright-based infrastructure that powers visual regression testing, the platform captures annotated screenshots and assembles feature walkthrough sequences without any human involvement.
Overview
When SaaS Factory builds and deploys a product, the documentation generator:
- Captures screenshots at key steps across each core user journey.
- Annotates frames with labels, callouts, and navigation cues.
- Sequences frames into feature walkthroughs that illustrate end-to-end workflows.
- Outputs artefacts that are immediately usable in help centres, onboarding flows, and marketing pages.
All of this happens automatically as part of the standard build pipeline — there is no separate recording step and no manual effort required.
How It Works
Playwright-Powered Capture
The visual documentation generator reuses the visual-testing.ts agent. Rather than running solely for regression comparison, the agent now operates in two modes:
| Mode | Purpose |
|---|---|
| Regression | Compares screenshots against baselines to detect unintended UI changes. |
| Documentation | Captures and annotates screenshots to produce onboarding and feature reference material. |
Both modes run against the same Playwright browser sessions, so there is no additional infrastructure overhead.
Screenshot Annotation
Captured frames are processed to add:
- Element labels — identifies buttons, inputs, and navigation items.
- Step callouts — numbered overlays that sequence multi-step workflows.
- Highlight regions — bounding boxes drawn around the active UI area for each step.
Feature Walkthrough Assembly
Annotated screenshots are ordered into walkthrough sequences based on the journey definition used during capture. Each sequence covers one feature or workflow end-to-end and can be exported as:
- A series of static images (PNG).
- An animated walkthrough (video/GIF) for embedding in onboarding flows or marketing pages.
Output Artefacts
| Artefact | Format | Primary Use |
|---|---|---|
| Annotated screenshots | PNG | Help centre articles, support docs |
| Feature walkthroughs | PNG sequence / video | Onboarding flows, product tours |
| Marketing previews | PNG | Landing pages, social media |
Artefacts are generated per product, per release, and stored alongside the product's other build outputs.
Integration Points
Customer Management
Onboarding screenshots and walkthrough sequences are surfaced automatically in customer-facing onboarding flows, reducing time-to-value and lowering inbound support ticket volume.
Marketing
Marketing-ready product previews are made available to the campaign automation and landing page generation pipelines as soon as a build completes.
Documentation Agent
The text-based documentation agent (this system) and the visual documentation generator operate in parallel. Text docs and visual docs are produced together for every release, giving customers both written reference material and visual walkthroughs.
Impact
- Support ticket reduction — customers can self-serve common questions using visual step-by-step guides.
- Faster onboarding — new users see exactly what to do from their first session without reading dense text documentation.
- No human bottleneck — walkthroughs, screenshots, and annotations are produced autonomously on every release.
- Competitive parity — matches the visual preview capability offered by tools like Lovable and v0, where visual artefacts are a natural output of the generation process.