Does this skill require an external API key?

Yes, it requires a Gemini API key and the gemini-imagegen skill to be installed and configured in your environment.

Where are the generated images saved?

The images are automatically saved to standard web directories like /public or /public/images to ensure they are ready for deployment.

What aspect ratio are the generated images?

All images are generated in a 16:9 aspect ratio, which is the standard for social media open-graph previews and modern website hero sections.

How does the skill determine my brand colors?

It scans your project for brand-profile.yaml or tailwind.config.ts files. If no configuration is found, it will ask you to provide the colors directly.

OG Hero Image Generator

Name: OG Hero Image Generator
Author: phrazzld

byphrazzld

•

デザインツール

Generates high-quality, brand-consistent open-graph images and website headers using AI.

This skill automates the creation of professional social sharing images by analyzing your project's brand identity, including color palettes and taglines. It constructs detailed, high-fidelity prompts for the Gemini Image Generation API to produce 16:9 hero images that feature clean layouts, modern typography, and minimalist UI panels, ensuring your project looks polished across social media platforms and marketing materials.

主な機能

01High-fidelity prompt engineering for premium, minimalist aesthetics

025 GitHub stars

03Automated 16:9 image generation via Gemini API integration

04Standardized output optimized for social media previews and headers

05Direct file placement and automated metadata update suggestions

06Automatic brand context extraction from local configuration files

ユースケース

01Creating professional open-graph images for a new SaaS product launch

02Generating consistent social media headers for brand marketing

03Producing high-end hero images for website landing pages and portfolios

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config og-hero-image

For use in Claude.ai and ChatGPT

Download Skill