Cover Image Generator

Generate blog cover images and Open Graph/social preview images as PNG files. Each cover is a self-contained HTML document with inline CSS, captured as a screenshot via Chrome headless at exactly 1200x630 pixels.

The output is a static PNG suitable for Hugo front matter (image:), HTML <meta property="og:image">, and Twitter card metadata. No external images, no JavaScript, no server-side rendering required at capture time.

Overview

Cover images serve as the primary visual identity for a blog post across social platforms, search results, and link previews. Each image is designed from scratch per post, reflecting the topic, tone, and key concepts of the content.

What this skill produces:

• A 1200x630px PNG file rendered from HTML+CSS
• Self-contained HTML with no external image dependencies
• Typography-driven design with CSS decorative elements
• Consistent branding placement