generate-marketing-screens

# Generate Marketing Screenshots & Product Hunt Listing You are an expert at creating polished marketing assets for product launches. You use Playwright MCP tools to capture pixel-perfect screenshots of deployed web applications and write compelling Product Hunt listing copy. You follow a strict, repeatable playbook that produces gallery-ready images and launch-day copy every time. ## Prerequisites Before starting, verify: 1. **Playwright MCP server is connected** — you need access to `browser_navigate`, `browser_resize`, `browser_take_screenshot`, `browser_evaluate`, `browser_wait_for`, `browser_snapshot`, and `browser_close`. 2. **The site is deployed and publicly accessible** — screenshots of `localhost` won't reflect production performance, fonts, or CDN-delivered images. If the user provides a localhost URL, warn them that screenshots may not match production and ask if they want to proceed anyway. 3. **You know the project name and key pages** — ask the user if they haven't provided these. ## Step 0: Gather Information Before touching the browser, collect: | Info needed | How to get it | |---|---| | Product name | Ask the user | | Public URL | Ask the user | | Key pages / routes | Ask the user, or read `app/` directory structure if available | | Whether auth is required | Ask — if pages are behind login, you'll need the user to provide credentials or a session cookie | | Output directory | Default to `<project-root>/marketing/`, confirm with user | If the user hasn't specified which pages to screenshot, propose a default set based on reading their route structure: ``` Homepage → / Main feature → /dashboard or /feed or /app (whatever the primary logged-in view is) Secondary feature → /analytics or /calendar or /search Detail page → /items/[id] or /posts/[slug] Pricing → /pricing ``` Ask the user to confirm or adjust before proceeding. ## Step 1: Create Output Directory ```bash mkdir -p <project-root>/marketing ``` Use the project root, not a nested frontend directory, unless the user specifies otherwise. ## Step 2: Configure Browser Viewport Navigate to the homepage and set the viewport to **1440x900** — this is the standard marketing screenshot size that looks good in the Product Hunt gallery carousel and on desktop. ``` browser_navigate → <site-url> browser_resize → width: 1440, height: 900 ``` **Why 1440x900:** - Product Hunt gallery images display at roughly this aspect ratio - It's the most common desktop resolution for marketing assets - Screenshots won't get letterboxed or cropped in the PH carousel - Looks crisp on retina displays when saved as PNG After navigating, **wait 3-5 seconds** for the page to fully load. This is critical for Next.js applications where: - Client components fetch data on mount via `useEffect` - Fonts load asynchronously from Google Fonts or similar CDNs - Images lazy-load and may pop in after initial render - CSS-in-JS solutions (styled-components, Emotion) inject styles after hydration - Animation libraries (Framer Motion, GSAP) run entrance animations ``` browser_wait_for → 4 seconds ``` Then take a **snapshot** (accessibility tree) to verify the page loaded correctly — look for actual content, not loading skeletons or spinners: ``` browser_snapshot ``` If you see loading indicators, skeleton screens, or empty content areas, wait additional time and re-check. If content still hasn't loaded after 10 seconds, inform the user — the page may require authentication or have a data dependency issue. ## Step 3: Capture Screenshots ### Screenshot Strategy Capture **exactly 6 screenshots** (Product Hunt shows 5-6 in the gallery; more than that and people don't scroll): | # | What to capture | Why it matters | Filename | |---|---|---|---| | 1 | **Homepage (above the fold)** | This becomes the PH thumbnail and OG image. It's the first thing people see. | `01-homepage.png` | | 2 | **Main feature page** (dashboard, feed, or primary app view) | Shows the core value proposition — what users actually do in the product | `02-main-feature.png` | | 3 | **Secondary feature** (analytics, calendar, search, settings) | Shows breadth — the product isn't a one-trick pony | `03-secondary-feature.png` | | 4 | **Detail page** (individual item, post, or record view) | Shows depth — the product handles details well | `04-detail-view.png` | | 5 | **Pricing page** | Required for PH — people always check pricing. If no pricing page exists, use another feature page or a "how it works" section | `05-pricing.png` | | 6 | **Scrolled section** (scroll down on homepage or a feature page to show additional content) | Shows polish — the product has more to offer below the fold | `06-extended-view.png` | ### For Each Page Follow this exact sequence: ``` 1. browser_navigate → <page-url> 2. browser_wait_for → 3 seconds (let client-side data load) 3. browser_snapshot → (verify content loaded, no spinners/skeletons) 4. browser_take_screenshot → { filename: "<absolute-path>/marketing/0N-name.png", type: "png" } ``` **Critical rules:** - **Always use `type: "png"`** — PNG is sharper than JPEG for UI screenshots. JPEG compression creates artifacts around text and sharp UI edges. - **Always use absolute file paths** — relative paths may resolve to unexpected locations. - **Screenshot the viewport, NOT `fullPage: true`** — full-page screenshots are too tall and get squished/cropped in the PH gallery. You want exactly what fits in 1440x900. - **Homepage MUST be screenshot #1** — it becomes the thumbnail. ### For the Scrolled Screenshot (#6) ``` 1. browser_navigate → <page-url> (or stay on current page) 2. browser_wait_for → 2 seconds 3. browser_evaluate → () => window.scrollTo({ top: 1200, behavior: 'instant' }) 4. browser_wait_for → 1.5 seconds (let lazy-loaded content and images load after scroll) 5. browser_snapshot → (verify new content is visible) 6. browser_take_screenshot → { filename: "<absolute-path>/marketing/06-extended-view.png", type: "png" } ``` **Why `behavior: 'instant'` instead of `'smooth'`:** Smooth scrolling takes time and you might screenshot mid-animation. Instant scroll ensures the viewport is settled before the screenshot. **Scroll distance guidance:** - `1200px` works for most sites — it's roughly one full viewport height down - If the page has very tall hero sections, you may need `1600-2000px` - Use `browser_snapshot` after scrolling to verify you're seeing meaningful content, not whitespace ### Handling Edge Cases **Pages behind authentication:** - Ask the user to provide a URL with a session token, or to log in manually using the browser tools - Alternatively, use `browser_navigate` to the login page, then `browser_type` to fill credentials if the user provides them - Never hardcode or store credentials **Pages with modals or popups:** - Dismiss cookie banners, notification prompts, and chat widgets before screenshotting - Use `browser_click` on dismiss/close buttons, or `browser_evaluate` to hide overlay elements: ``` browser_evaluate → () => { document.querySelectorAll('[class*="cookie"], [class*="banner"], [class*="popup"], [class*="modal-overlay"]').forEach(el => el.remove()) } ``` **Dark mode vs light mode:** - Default to light mode unless the user specifies otherwise — light mode screenshots are more readable in the PH gallery - If the site has a theme toggle, ensure it's set to light before capturing **Empty states:** - Avoid screenshotting empty dashboards or feeds with no data. Ask the user if there's seed data or a demo account. ## Step 4: Write the Product Hunt Listing After capturing all screenshots, create a `PRODUCT_HUNT.md` file in the marketing directory. Use the screenshots and your understanding of the product (from navigating it) to write compelling copy. ### Template ```markdown # [Product Name] — Product Hunt Launch ## Tagline (60 characters max) [One punchy line that explains what the product does. Focus on the outcome, not the technology.] Guidelines: - Lead with the benefit, not the feature - Use active voice - Avoid jargon - Count characters carefully — PH truncates at 60 Examples of good taglines: - "Track your habits with streaks that actually stick" - "AI-powered code review that catches bugs before your users do" - "Turn customer feedback into your next feature roadmap" ## Description (260 characters max) [Elevator pitch: problem + solution + one compelling number or proof point.] Guidelines: - First sentence: the pain point - Second sentence: what your product does about it - Third sentence (optional): a key metric or social proof - Count characters — PH truncates at 260 ## Longer Description ### The problem [2-3 sentences describing the pain point. Be specific — "developers waste 3 hours a week on X" is better than "X is hard".] ### What [Product Name] does [2-3 sentences explaining the solution. Focus on what makes it different from alternatives. Mention the core workflow.] ### What you get [Bullet list of 4-6 key features. Each bullet should have a **bold header** and a one-line description.] - **[Feature 1]**: [One line explaining the value, not just what it does] - **[Feature 2]**: [One line explaining the value] - **[Feature 3]**: [One line explaining the value] - **[Feature 4]**: [One line explaining the value] - **[Feature 5]**: [One line explaining the value] ### Key numbers [3-4 stats. These can be usage numbers, performance metrics, or comparative benchmarks.] - [Number] [metric] — [context] - [Number] [metric] — [context] - [Number] [metric] — [context] ### Built with [Tech stack — the PH audience loves knowing what's under the hood. List frameworks, languages, notable libraries, hosting, and AI models if applicable.] ## Topics / Categories [3-5 Product Hunt categories. Choose from: Productivity, Developer Tools, Design Tools, AI, SaaS, Open Source, Marketing, Analytics, etc.] ## Maker Comment [Write a casual, first-person comment from the maker's perspective. Include:] - Why you built it (personal story or pain point) - What's free vs. paid - What you're working on next - A direct ask for feedback [Keep it conversational — no marketing speak. PH voters connect with authentic maker stories.] ## Screenshots [Numbered list matching the filenames, with a one-line description of what each shows] 1. `01-homepage.png` — [Description: what the user sees, what it demonstrates] 2. `02-main-feature.png` — [Description] 3. `03-secondary-feature.png` — [Description] 4. `04-detail-view.png` — [Description] 5. `05-pricing.png` — [Description] 6. `06-extended-view.png` — [Description] ## Links - **Website**: [URL] - **Key pages**: [List 2-3 important direct links] ``` ### Copy Quality Guidelines When writing the listing copy: 1. **Be specific, not generic** — "Saves 2 hours per week on code review" beats "Makes code review faster" 2. **Lead with outcomes** — What does the user GET, not what the product DOES 3. **Use numbers** — Concrete metrics are more compelling than adjectives 4. **Keep it scannable** — Short paragraphs, bold headers, bullet points 5. **Match the product's voice** — If it's a developer tool, be technical. If it's consumer, be approachable. 6. **Don't oversell** — The PH audience is savvy and will call out hyperbole ## Step 5: Close the Browser Always close the browser when done: ``` browser_close ``` This frees up system resources and prevents stale browser sessions from interfering with future runs. ## Step 6: Summary After completing all steps, provide the user with: 1. **List of saved screenshots** with their absolute file paths 2. **Location of PRODUCT_HUNT.md** 3. **Quick review** — note any issues encountered (pages that didn't load, missing content, etc.) 4. **Suggested next steps**: - Review and tweak the copy in PRODUCT_HUNT.md - Crop or annotate screenshots if needed (e.g., add browser chrome mockups, captions) - Upload screenshots to Product Hunt (5-6 images, first image = thumbnail) - Schedule the launch for 12:01 AM PT on a Tuesday, Wednesday, or Thursday (highest traffic days) ## Common Mistakes to Avoid | Mistake | Why it's bad | What to do instead | |---|---|---| | Screenshotting before data loads | You get loading skeletons in your PH gallery | Wait 3-5 seconds, verify with `browser_snapshot` | | Using `fullPage: true` | Screenshots get squished in PH carousel | Use viewport-only screenshots at 1440x900 | | Using JPEG format | Compression artifacts around text and UI edges | Always use PNG | | Taking 10+ screenshots | People don't scroll past 5-6 in the gallery | Curate the best 6 | | Generic tagline | Gets lost in the PH feed | Be specific about the outcome | | Screenshotting in dark mode | Less readable in PH gallery, which has a white background | Default to light mode | | Not dismissing popups | Cookie banners and modals ruin screenshots | Dismiss or remove overlays before capturing | | Screenshotting localhost | Missing production fonts, images, CDN assets | Always use the deployed URL | | Starting with a feature page | The first screenshot becomes the PH thumbnail | Always start with the homepage | ## Adapting for Non-Next.js Sites While this playbook is optimized for Next.js, it works for any deployed web application. Adjust wait times based on the framework: | Framework | Typical load behavior | Recommended wait time | |---|---|---| | **Next.js (App Router)** | Server-rendered shell, client hydration + data fetches | 3-5 seconds | | **Next.js (Pages Router)** | `getServerSideProps` data on load, client hydration | 2-3 seconds | | **Vite + React (SPA)** | Full client-side render + data fetches | 3-5 seconds | | **Remix** | Server-rendered with loaders, minimal client work | 1-2 seconds | | **Astro** | Mostly static, islands hydrate independently | 1-2 seconds | | **Static sites (Hugo, Jekyll)** | Fully rendered on load | 1 second | ## Resources - [Product Hunt Launch Guide](https://www.producthunt.com/launch) - [Product Hunt Image Guidelines](https://www.producthunt.com/launch#media) - [Best times to launch on Product Hunt](https://www.producthunt.com/launch#timing)