Product Showcase Generator

Generate a marketing website that shows off a running web app. Unlike the landing-page skill (which works from a brief), this skill explores the actual app via browser automation, captures real screenshots, discovers features, and builds a showcase page from what the product actually does.

How It Differs from landing-page

landing-page

product-showcase

Works from a text brief Works from a running app

Placeholder images Real screenshots from the app

User describes features Features discovered by browsing

No browser automation Requires browser automation

Generic marketing structure Structured around app's actual workflows

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. Explore the App

Navigate the app and capture the story:

a. First Impression

• Load the app's main page/dashboard

• Screenshot at 1280x720 — this becomes the hero image

• Note the immediate value proposition (what does the user see first?)

b. Discover Features

Navigate through each major section:

• Click every nav item, tab, and major UI element

• For each feature area, take a clean screenshot showing it in action

• Note what the user can DO (actions, not just views)

• Capture 6-10 key screens that tell the product story

c. Identify the "How It Works" Flow

Find the main workflow (the thing a user does most):

• Screenshot 3-4 steps in sequence

• These become the "How It Works" section

• Example: "1. Add a contact → 2. Set up a pipeline → 3. Track your deals → 4. See your dashboard"

d. Capture Detail Shots

For the feature grid, capture focused screenshots:

• Zoom into specific UI elements that showcase polish

• Dark mode version if available (shows design quality)

• Mobile view if the app is responsive

3. Generate the Showcase

Produce a single HTML file with Tailwind CDN (same pattern as landing-page ):

Sections

Hero

• App name + tagline

• Primary screenshot in a browser-frame mockup

• Primary CTA button

• Optional: secondary CTA ("Watch Demo", "View Pricing")

How It Works

• 3-4 steps with screenshots

• Numbered or arrowed flow

• Brief description under each step

• Shows the main user journey

Feature Grid

• 4-6 features in a responsive grid

• Each: screenshot + heading + 1-2 sentence description

• Screenshots in browser-frame mockups (smaller than hero)

• Features extracted from actual app exploration

Social Proof (if testimonials provided)

• 2-3 testimonial cards

• Or skip this section entirely if no testimonials

Pricing (if provided)

• 2-3 tier cards

• Or skip if not provided

CTA Banner

• Full-width call-to-action

• Repeat the primary CTA

• Urgency or benefit statement

Footer

• App name, links, legal placeholders

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.

5. Output

Save to a showcase/ directory:

showcase/ ├── index.html # The showcase page └── screenshots/ # All captured screenshots ├── hero.png ├── step-1.png ├── step-2.png ├── step-3.png ├── feature-contacts.png ├── feature-reports.png └── ...

The HTML references screenshots with relative paths (screenshots/hero.png ).

After generating, tell the user:

• Preview: open showcase/index.html or python3 -m http.server -d showcase

• Deploy: drag the showcase/ folder to Cloudflare Pages, Netlify, or any static host

• List any placeholder content that needs replacing

Design Patterns

Colour: If the app has a clear brand colour, extract it and use it as the primary. Otherwise default to a neutral palette (slate/blue).

Typography: System font stack (no external requests). Same approach as landing-page .

Responsive: Mobile-first, screenshots scale down gracefully. On mobile, screenshots stack vertically instead of grid.

Dark mode: Three-state toggle (light/dark/system) with CSS custom properties.

Performance: Lazy-load screenshot images. Tailwind CDN for styling. No build step.

Quality Rules

• Only screenshot real features — don't fabricate capabilities the app doesn't have

• Choose the best screenshots — not every page is showcase-worthy. Pick the ones that tell the product story.

• Write benefit-focused copy — "See all your contacts in one place" not "Contact list page"

• Browser frames on screenshots — always wrap in the CSS mockup for professional appearance

• Consistent screenshot size — all at 1280x720 for the captures, CSS handles display sizing

• No fake testimonials — leave the section out if none provided

• No invented statistics — leave stats blocks empty if no real data