/product-showcase

name: product-showcase
description: "Generate a comprehensive marketing website for a web app — multi-page with real screenshots, animated GIF walkthroughs, feature deep-dives, and workflow demonstrations. Browses the running app, captures screens and sequences, and produces a deployable site that actually teaches people what the product does. Especially useful for complex or agentic apps that are hard to explain. Triggers: 'showcase site', 'product page', 'show off the app', 'marketing site', 'demo site', 'product showcase', 'explain the app', 'how do I market this'."
compatibility: claude-code-only

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:

1. **Chrome MCP** (`mcp__claude-in-chrome__*`) — preferred for authenticated apps 2. **Playwright MCP** (`mcp__plugin_playwright_playwright__*`) — for public apps 3. **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/
│   ├── he