How do I convert the generated SVG to a WebP or PNG?

You can use the 'svg-to-webp' plugin as a follow-up command to convert your SVG files into optimized web formats.

Does this skill require an internet connection?

No, this skill generates SVG images locally using Node.js and does not require any external APIs or internet access.

Can I use my own brand colors?

Yes, you can define a custom theme in a JSON file to specify your own background gradients, accent colors, and text styles.

What dimensions are supported?

The skill supports any custom dimensions via width and height flags, defaulting to 1920x1080 for high-definition headers.

SVG Header Image Generator

Name: SVG Header Image Generator
Author: haboshi

byhaboshi

0•

Design Tools

Generates professional, template-based SVG header images and eye-catch visuals for blogs and social media without external APIs.

This Claude Code skill provides a streamlined, offline-capable way to create high-quality SVG header images directly from your terminal. Designed for developers and content creators, it uses pre-defined themes and customizable metadata to produce polished visuals complete with noise textures, glow effects, and geometric accents. It is ideal for generating blog eye-catchers, YouTube thumbnails, or documentation headers where professional aesthetics are required without the need for graphic design software or third-party API keys.

Key Features

01Template-based SVG generation with rich visual effects

02Support for custom theme JSON files for brand consistency

03Customizable dimensions, badges, categories, and subtitles

04Fully offline functionality with no external API dependencies

050 GitHub stars

06Diverse built-in themes including Cyberpunk, Glass, and Nature styles

Use Cases

01Producing title cards for technical presentations and documentation

02Creating professional eye-catch images for blog posts and articles

03Generating YouTube thumbnails and social media banners

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add haboshi/claude-code-skills svg-header-image

For use in Claude.ai and ChatGPT

Download Skill