Product Showcase Generator
Generate a marketing website that actually teaches people what a web app does. Not just a hero and feature grid — a multi-page site with real screenshots, animated GIF walkthroughs of workflows, feature deep-dives, and progressive depth from "what is this" to "here's exactly how it works."
Especially valuable for complex apps, agentic AI tools, and anything where a static screenshot doesn't convey the value.
Depth Levels
| Depth |
Output |
Duration |
| quick |
Single page — hero, features, CTA. Same as before. |
15-20 min |
| standard |
Multi-page site — home, features page, how-it-works with screenshots. |
1-2 hours |
| thorough |
Comprehensive site — home, per-feature pages, animated GIF walkthroughs, use cases, comparison page, docs-style demo. |
3-6 hours |
Default: standard
Browser Tool Detection
Before starting, detect available browser tools:
- Chrome MCP (
mcp__claude-in-chrome__*) — preferred for authenticated apps
- Playwright MCP (
mcp__plugin_playwright_playwright__*) — for public apps
- playwright-cli — for scripted flows
Workflow
1. Gather Input
| Field |
Required |
Example |
| App URL |
Yes |
https://app.example.com or http://localhost:5173 |
| App name |
Yes |
"Acme CRM" |
| Tagline |
No |
"The CRM that gets out of your way" |
| Target audience |
No |
"Small business owners" |
| Pricing info |
No |
Free tier, $29/mo pro |
| CTA text + URL |
No |
"Start Free Trial" → signup page |
| Testimonials |
No |
User provides or skip section |
2. Capture Screenshots
Use capture-screenshots (shipped in bin/) to capture the app. This is faster and more consistent than generating Playwright scripts each time.
Quick capture (all key pages at once):
capture-screenshots http://localhost:5173 \
--pages /,/dashboard,/contacts,/settings \
--output showcase/screenshots \
--prefix screen \
--mobile --dark
This produces desktop (1280x720), mobile (375px), and dark mode variants for each page in one run.
For authenticated apps:
capture-screenshots https://app.example.com \
--pages /,/dashboard,/settings \
--auth user:password \
--output showcase/screenshots \
--mobile --dark
What to capture:
a. First Impression — the main page/dashboard becomes the hero image. Note the immediate value proposition.
b. Features — each major section. Use --pages with all nav paths. Capture 6-10 key screens that tell the product story.
c. "How It Works" flow — the main workflow in sequence. Run capture-screenshots multiple times with --prefix workflow-step as you navigate through the flow steps.
d. Detail shots — zoom into specific UI elements. Use --full-page for scrollable content.
e. Both modes — --dark flag captures light and dark variants automatically. Use the best-looking mode for the hero.
Post-capture optimisation:
img-process batch showcase/screenshots --action optimise --max-width 1920 -o showcase/screenshots-opt
f. Extract the Value Propositions
Don't just list features. For each one, answer: why does the user care?
- BAD: "Contact management page"
- GOOD: "See every client, their history, and what needs attention — in one view"
- BAD: "Search functionality"
- GOOD: "Find anything in seconds — semantic search understands what you mean, not just what you type"
3. Generate the Site
Quick Mode: Single Page (same as before)
One HTML file: hero + feature grid + CTA. Use for MVPs and quick marketing.
Standard Mode: Multi-Page Site
showcase/
├── index.html # Home — hero, overview, feature highlights, CTA
├── features.html # All features with screenshots and descriptions
├── how-it-works.html # Step-by-step workflow walkthrough with screenshots
├── screenshots/ # All captured images
│ ├── hero.png
│ ├── feature-*.png
│ ├── workflow-step-*.png
│ └── *.gif # Animated walkthroughs
└── styles.css # Shared styles (or inline Tailwind CDN)
Home page: Hero with animated GIF or key screenshot, 3-4 feature highlights (not all features — just the best), "How It Works" summary (3 steps), CTA.
Features page: Every feature with a real screenshot and benefit-focused description. Group by category if there are 6+. Each feature gets enough space to actually explain what it does.
How It Works page: The primary workflow as a step-by-step visual guide. Each step has a screenshot (or animated GIF), a heading, and 2-3 sentences. This page answers "ok but what does using it actually look like?"
Thorough Mode: Comprehensive Site
showcase/
├── index.html # Home — hero, overview, value proposition
├── features/
│ ├── index.html # Feature overview grid
│ ├── [feature-1].html # Deep-dive: one page per major feature
│ ├── [feature-2].html # Each with screenshots, GIFs, use cases
│ └── [feature-n].html
├── how-it-works.html # Full workflow walkthrough
├── use-cases/
│ ├── [use-case-1].html # Scenario: "A day in the life of..."
│ └── [use-case-2].html # Scenario: "When a new client calls..."
├── compare.html # "Why [app] vs alternatives" (optional)
├── screenshots/
│ ├── hero.png
│ ├── feature-*/ # Per-feature screenshot sets
│ └── workflows/ # Animated GIFs
└── styles.css
Per-feature deep-dive pages: Each major feature gets its own page with:
- Hero screenshot of the feature in action
- "What it does" — 1-2 paragraphs explaining the value
- "How it works" — step-by-step with screenshots or GIF
- "Why it matters" — the problem this solves
- Edge cases or power-user tips
- Link to next feature (flow between pages)
Use case pages: Story-driven pages that show the app in a real scenario:
- "It's Monday morning. You open the dashboard and see..."
- Walk through a realistic workflow with screenshots at each step
- Show the outcome — what's different because the user used this app
- These are the most persuasive pages for apps that are hard to explain
Comparison page (optional): "Why [app] vs [alternatives]" — honest comparison, not marketing fluff. Feature table, key differentiators, who it's best for.
4. Animated GIF Walkthroughs
Static screenshots don't convey workflow. For key features, capture animated GIFs that show the actual interaction:
How to capture (using Playwright or Chrome MCP):
- Navigate to the starting state
- Start recording screenshots at ~2fps
- Perform the workflow (click, type, navigate)
- Stop recording
- Combine frames into a GIF
Generating the GIF — capture sequential screenshots then combine:
capture-screenshots http://localhost:5173/clients \
--prefix workflow-01 --output .jez/screenshots
capture-screenshots http://localhost:5173/clients/new \
--prefix workflow-02 --output .jez/screenshots
python3 -c "
from PIL import Image; import glob
frames = [Image.open(f) for f in sorted(glob.glob('.jez/screenshots/workflow-*.png'))]
frames[0].save('showcase/screenshots/workflows/create-client.gif',
save_all=True, append_images=frames[1:], duration=500, loop=0)
"
What to animate:
- The primary "create something" flow (2-4 seconds)
- A search/filter interaction (show results appearing)
- A drag-and-drop or reorder operation
- Dark mode toggle (satisfying visual)
- Any "magic moment" where the app does something impressive (AI classification, instant search, real-time update)
GIF guidelines:
- Max 10 seconds / 20 frames — shorter is better
- Capture at 1280x720, display at 640x360 (half size for file size)
- Add a brief pause (3 frames) on the final state so viewers see the result
- Loop continuously — no "click to play"
- If the GIF would be >5MB, use fewer frames or crop to the relevant area
Display in HTML:
<div class="browser-frame">
<div class="browser-frame-bar">
<span class="browser-frame-dot"></span>
<span class="browser-frame-dot"></span>
<span class="browser-frame-dot"></span>
</div>
<img src="screenshots/workflows/create-client.gif"
alt="Creating a new client in 3 clicks"
loading="lazy" width="640" height="360">
</div>
5. Explaining Agentic / AI Apps
Agentic apps are especially hard to market because the value is invisible — the AI does work the user never sees. Standard screenshots show a chat interface. That's not compelling.
Patterns that work for agentic apps:
| Pattern |
What it shows |
Example |
| Before/after |
What the user used to do manually vs what the agent does |
"Used to: copy-paste from 3 systems. Now: agent does it in background." |
| Timeline |
What happens over time — show the agent working across hours/days |
"8am: agent checks inbox. 9am: classifies 47 emails. 10am: flags 3 urgent." |
| Result showcase |
Skip the process, show the output |
"Agent mined 1,200 emails → 89 clients, 340 contacts, 2,100 knowledge facts" |
| Side-by-side |
Show the agent's work next to what a human would have done |
Split screen: left is the raw email, right is the extracted structured data |
| Magic moment GIF |
One animation of the most impressive thing |
User asks a question → agent searches knowledge → returns answer with sources |
Copy tips for agentic apps:
- Lead with the outcome, not the technology ("Know every client's history" not "AI-powered CRM")
- Show volume ("Processed 1,200 emails" is more impressive than "Processes your emails")
- Use time comparisons ("What took 2 hours now takes 30 seconds")
- Avoid jargon ("Finds connections in your data" not "Semantic vector search with RAG")
4. Screenshot Presentation
Screenshots are shown in browser-frame mockups using CSS:
.browser-frame {
border-radius: 8px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
overflow: hidden;
border: 1px solid rgba(0,0,0,0.1);
}
.browser-frame-bar {
background: #f1f5f9;
padding: 8px 12px;
display: flex;
gap: 6px;
}
.browser-frame-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e2e8f0;
}
This gives screenshots a polished "app in a browser" look without needing to edit the images.
6. Site Navigation
Multi-page
