OG Image Creator

Generate authentic, brand-aligned Open Graph images by understanding your codebase first, then creating contextually appropriate images for each route using Playwright and your existing components.

Philosophy: Authentic Over Template

Before generating OG images, ask:

• What is the brand identity of this site (colors, fonts, logo, design language)?
• What routes/pages exist and what are their purposes?
• What components and assets can be reused for consistency?
• What page types need different visual treatments?

Core principles:

1. Study before generate: Understand the codebase structure, routing, and brand before creating anything
2. Authenticity over templates: Use actual brand colors, fonts, and components—not generic social card templates
3. Context-aware design: Landing pages, articles, products, and docs need different visual approaches
4. Smart automation: Auto-detect routes and extract brand, but allow user customization

Workflow