Marketing images

Note

These are Linear-style marketing composites. Each has a headline and the Promptless logo on a dark gradient, with a product screenshot floated on the right. They’re generated to exact pixel dimensions for app listings (Microsoft Teams, Slack, etc.) and live in public/assets/marketing/. See the Media Kit for logos and brand colors.

Generate one

The generator is a small Node script, and no browser is required. From the repo root:

npm run marketing:image -- \
  --headline "Turn conversations|into docs updates" \
  --screenshot public/assets/integrations-page.png \
  --out public/assets/marketing/teams-listing.png \
  --eyebrow "Promptless for Microsoft Teams"

| (or \n) forces a hard line break; otherwise the headline wraps to fit its column. Defaults are 1366×768 with a 1024 KB size cap, so a minimal run only needs --headline, --screenshot, and --out.

Options

Flag	Default	Notes
--headline	(required)	| or \n for hard breaks; wraps to fit
--screenshot	(required)	Product screenshot to embed
--out	(required)	Output path (.jpg if it must fall back)
--eyebrow	(none)	Small accent label above the headline
--logo	public/assets/logo_darkbg.svg	Any svg/png
--width	1366	Exact output width
--height	768	Exact output height
--max-kb	1024	Size cap; triggers compression fallbacks
--scale	2	Supersample factor for crispness
--bg-top	#15171d	Gradient color at the top (almost black)
--bg-bottom	#000000	Gradient color at the bottom (pure black)
--fg	#ffffff	Headline color
--accent	#8ea2ff	Eyebrow color

How it works

Satori lays out a flexbox tree (so the headline wraps within its column automatically) and emits an SVG with text as vector paths. @resvg/resvg-js rasterizes it, using the vendored static Inter TTFs. Then sharp downscales to the exact size and compresses under the cap. Full notes are in scripts/marketing-image/README.md.

Tip

Because the screenshots are referenced from public/assets/, Promptless keeps them current. When the app UI changes, the embedded screenshots are updated like any other doc asset. Re-running the script then refreshes these composites.

Current set

docs-in-sync.png — npm run marketing:image — —headline “Keep your docs|in sync, automatically” —screenshot public/assets/promptless_1_listen.png —out public/assets/marketing/docs-in-sync.png

reviewed-before-ship.png — npm run marketing:image — —headline “Every update,|reviewed before it ships” —screenshot public/assets/promptless_1_review.png —out public/assets/marketing/reviewed-before-ship.png

teams-listing.png — npm run marketing:image — —eyebrow “Promptless for Microsoft Teams” —headline “Turn conversations|into docs updates” —screenshot public/assets/integrations-page.png —out public/assets/marketing/teams-listing.png

Vercel Marketplace gallery

The Vercel Integration Console takes 1 to 8 gallery images at 16:9, 1920×1080. These two pass --width and --height rather than taking the 1366×768 default. Upload them in the order below: what starts a docs update, then what you review.

A third image showing the connected integrations is still missing. It needs a capture from a clean workspace, for the reasons given in #902.

vercel-code-ships.png — npm run marketing:image — —eyebrow “Promptless Starport” —headline “Your docs update|when your code ships” —screenshot public/assets/promptless_1_listen.png —out public/assets/marketing/vercel-code-ships.png —width 1920 —height 1080

vercel-docs-current.png — npm run marketing:image — —eyebrow “Promptless Starport” —headline “Docs that keep|themselves current” —screenshot public/assets/promptless_1_review.png —out public/assets/marketing/vercel-docs-current.png —width 1920 —height 1080