generate-consistent-og-images
How to generate share-imagery (OpenGraph banners, portraits, squares, tall WhatsApp/iMessage cards) for any Lossless site or splash page so the resulting images form a coherent visual family — via two coexisting techniques: Ideogram illustration, or rasterizing the project's own hero/specimen component with macOS's qlmanage+sips (or a Playwright screenshot for higher fidelity). Use whenever a site, splash, plugin page, or fundraise deck needs an OG image generated or refreshed; whenever the user says "make an og image", "generate a banner", "we need a share image", "regenerate banners across formats", "the unfurl looks stale", "screenshot the hero for the share image", "turn this component into an OG image"; whenever scaffolding a new Astro Knots site that doesn't yet have an og:image or a DESIGN.md; whenever per-page or per-component custom illustrative imagery is needed even if it deliberately departs from the OG-image canon; whenever an existing OG image (of either technique) might already be live and a decision is needed about replacing vs. keeping it. Encodes the pattern of (1) choose Ideogram illustration vs. hero rasterization per the Strategy Choice section, (2) check / create a DESIGN.md following the Google Stitch open spec, (3) check / add an imagery: recipe block to that DESIGN.md, (4) call Ideogram v3 generate with every field locked except prompt and aspect_ratio (or rasterize the hero via qlmanage+sips), (5) save with the canonical naming convention, (6) treat WhatsApp + iMessage chat-preview as the primary share surface and other socials as secondary, (7) run the Case Protocol before wiring anything into a live og:image tag. The skill never sees an API key in source — IDEOGRAM_API_KEY lives in ~/.secrets and is inherited from the shell, same pattern as the crawl-fetch-ingest skill.
Pinned to revision 9804a6ca9408, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/generate-consistent-og-images/SKILL.md
- skills/generate-consistent-og-images/templates/ideogram-request.sh
- skills/generate-consistent-og-images/templates/imagery-block.yaml
Every link opens the file at its source, pinned to the revision this page describes.