---
name: promo-image-generator
description: "Generate designed promo images and multi-slide social carousels from real product screenshots, using a browser the machine already has. Use when asked to make a launch graphic, a Facebook, LinkedIn, or Instagram carousel, an OG image, a beta-recruiting post, or any social image that shows the product. HTML-first: composes slides from one shared template, puts whole app screens inside a laptop or browser mockup so a stranger recognises a web app, renders via headless Chrome --screenshot at 2x, and reviews the set on a contact sheet rather than file by file. Ships the arc for a carousel, CSS-overlay redaction for real data (mask, blur, replace) so screenshots are safe to publish, the oversized-brand-mark watermark, the resolution maths that decides mockup size, and a plaintext caption as part of the deliverable."
---

# Promo Image Generator

Show the whole app inside a laptop, not a cropped panel, because the reader has never heard of your product. One template for the whole carousel, real data redacted in CSS, and the set reviewed on a contact sheet where drift is actually visible.

## Phases

Work through these in order.

### 1. Rules

Read the promo rulebook before writing any HTML: why whole screens beat crops for a cold audience, the arc a carousel needs, what may never appear in a screenshot, the resolution calculation that decides how big the mockup can be, and why a hero section's watermark constants are wrong on a square.

Read: [branding-overview](https://selwynuy.dev/d/branding-overview.md), [design-tokens](https://selwynuy.dev/d/design-tokens.md)

### 2. Ground

Establish what is actually live and what a stranger can actually do, from the product's own copy, pricing config, feature flags, and signup path. A CTA that does not match the real door wastes the whole post, so write the findings down before any headline is drafted.

Read: [writing-without-ai-slop](https://selwynuy.dev/d/writing-without-ai-slop.md)

### 3. Shoot and scrub

Capture at 2x, then check every shot: no third-party names, no account identifiers, no figures you would not publish, no trial banners, no negative totals, no empty tables, no scrollbars. Redact with CSS overlays (mask, blur, replace) and say on the slide what was blurred.

### 4. Compose

Copy the carousel template and edit the tokens, the brand mark paths, and the slides. One template emits every slide, because a sequence seen back to back turns any drift in type scale or pill placement into sloppiness. Each screenshot slide carries one pill restating its claim at a size a phone can read.

Read: [design-tokens](https://selwynuy.dev/d/design-tokens.md)

### 5. Render and review

Render at 2x, then build a contact sheet and judge the set rather than the files: drift first, then slide 1 with the others covered, then whether a pill is sitting on something the slide needed, then the headlines in order. Ship a plaintext caption alongside the images.

Read: [writing-without-ai-slop](https://selwynuy.dev/d/writing-without-ai-slop.md), [working-with-me](https://selwynuy.dev/d/working-with-me.md)

## Bundled files

- `scripts/render-slides.mjs` (script): Cross-platform renderer: finds an installed Chrome, Edge, or Chromium and screenshots each HTML slide at its declared canvas and scale, reporting real pixel dimensions. Zero dependencies.
- `scripts/contact-sheet.mjs` (script): Tiles rendered slides into one review image at deliberately small tiles, because a slide that fails at 420px fails in a feed and drift between slides is invisible one file at a time.
- `templates/carousel.mjs` (template): The slide generator: brand tokens, the corner-bleeding watermark, laptop and browser mockups, the claim pill, checks, CTA, and CSS redaction in mask, blur, and replace modes.
- `references/promo-design.md` (reference): The promo rulebook: the cold-audience rule, the carousel arc, matching the CTA to the product's real door, what may appear in a screenshot and how to redact it, resolution maths, canvas sizes and platform crop behaviour, the vertical budget, the watermark on a square, and a troubleshooting table.

---

Part of Promo Image Generator from Selwyn Uy's Next.js Handbook. Full page: https://selwynuy.dev/skills/promo-image-generator