Smart OG image generation that studies your codebase, understands routes and brand identity, then creates contextually appropriate Open Graph images using Playwright and React components. Triggers: "create og images", "generate social cards", "add open graph images".
Smart OG image generation that studies your codebase, understands routes and brand identity, then creates contextually appropriate Open Graph images using Playwright and React components. Triggers: "create og images", "generate social cards", "add open graph images".
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:
Study before generate: Understand the codebase structure, routing, and brand before creating anything
Authenticity over templates: Use actual brand colors, fonts, and components—not generic social card templates
Context-aware design: Landing pages, articles, products, and docs need different visual approaches
Smart automation: Auto-detect routes and extract brand, but allow user customization
Workflow
1. Discover and Analyze
Route discovery:
Analyze project structure to determine framework (Next.js, Astro, React, etc.)
Auto-detect routes based on framework conventions:
Next.js: app/*/page.tsx or pages/*.tsx
Astro: src/pages/*.astro
React Router: Analyze route configuration
Extract route metadata (title, description) from pages
OG images are an extension of your brand, not generic social cards.
Study the codebase to understand the design language. Extract the brand identity. Use actual components and content. Create contextually appropriate images that feel native to the site.
When someone shares your page, the OG image should feel like a natural preview—not a template slapped on top.
You're capable of creating sophisticated, brand-aligned OG images that enhance rather than undermine the site's identity.
