What is the difference between og-card and og-hero-image?

The og-card skill uses deterministic templates for strict brand consistency, whereas og-hero-image uses AI to generate one-off creative artwork.

What dimensions are the generated images?

All generated Open Graph cards are exported as 1200x630 PNG files, which is the standard recommended size for platforms like Twitter, LinkedIn, and Facebook.

Does this skill require external dependencies?

Yes, you will need to install @vercel/og, satori, and sharp via pnpm to handle the rendering and image processing.

How does it handle branding?

The skill checks for a brand-profile.yaml file in your project to automatically apply your specific brand colors and typography to the templates.

Open Graph Card Generator

Name: Open Graph Card Generator
Author: phrazzld

byphrazzld

•

디자인 도구

Generates consistent, branded Open Graph images for social media using deterministic Satori templates.

The og-card skill enables developers to automate the creation of professional social sharing images for blogs, product pages, and changelogs. By utilizing Satori for template-driven rendering, it ensures brand consistency through CSS-in-JS styles and configuration from brand-profile.yaml. While superseded by the newer brand-kit system, it remains a reliable tool for generating 1200x630 PNG assets that improve social media click-through rates and SEO visibility.

주요 기능

01Support for blog, product, changelog, and comparison templates

02Streamlined CLI workflow for generating assets during content creation

03Integration with brand-profile.yaml for custom colors and fonts

04Automatic 1200x630 PNG output optimized for social meta tags

05Deterministic template-based image generation using Satori

065 GitHub stars

사용 사례

01Automating social media preview images for technical blog posts

02Creating consistent visual updates for project changelogs and versions

03Generating branded product announcement cards for marketing launches

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config og-card

For use in Claude.ai and ChatGPT

Download Skill