ari-ayvazyan/AISkills

OG Image Creator

Erstelle authentische, markenkonforme Open Graph-Bilder, indem du zuerst deine Codebasis verstehst und dann mit Playwright und deinen vorhandenen Komponenten kontextuell passende Bilder für jede Route erstellst.

Philosophie: Authentisch statt Vorlage

Frage vor der Generierung von OG-Bildern:

• Was ist die Markenidentität dieser Website (Farben, Schriftarten, Logo, Designsprache)?
• Welche Routen/Seiten existieren und was sind ihre Zwecke?
• Welche Komponenten und Assets können für Konsistenz wiederverwendet werden?
• Welche Seitentypen benötigen unterschiedliche visuelle Behandlungen?

Kernprinzipien:

1. Studiere vor dem Generieren: Verstehe die Codebasis-Struktur, das Routing und die Marke, bevor du etwas erstellst.
2. Authentizität vor Vorlagen: Verwende tatsächliche Markenfarben, Schriftarten und Komponenten – keine generischen Social-Card-Vorlagen.
3. Kontextbewusstes Design: Landingpages, Artikel, Produkte und Dokumentationen benötigen unterschiedliche visuelle Ansätze.
4. Intelligente Automatisierung: Erkenne Routen automatisch und extrahiere die Marke, erlaube aber Benutzeranpassungen.

Arbeitsablauf

1. Entdecken und Analysieren

Routenerkennung:

• Analysiere die Projektstruktur, um das Framework zu bestimmen (Next.js, Astro, React, etc.)
• Erkenne Routen automatisch basierend auf Framework-Konventionen:
  • Next.js: app/*/page.tsx oder pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: Analysiere die Routenkonfiguration
• Extrahiere Routenmetadaten (Titel, Beschreibung) aus den Seiten
• Kategorisiere Seitentypen (Landing, Artikel, Produkt, Über uns, etc.)

Markenextraktion:

• Finde Logo-/Symboldateien (SVG bevorzugt)
• Extrahiere die Farbpalette aus der CSS-/Tailwind-Konfiguration
• Identifiziere primäre Schriftarten aus Stylesheets oder Konfiguration
• Erfasse Designmuster aus vorhandenen Komponenten

Verwende scripts/analyze_codebase.py, um die Erkennung zu automatisieren.

2. Designstrategie

Lege geeignete Layouts pro Seitentyp fest:

• Landingpages: Fett, minimalistisch, betone den Wertvorschlag
• Artikel/Blogbeiträge: Titel + Auszug, Datum/Autor falls relevant
• Produktseiten: Produktname, Hauptmerkmal, visuelles Element falls verfügbar
• Dokumentation: Thema + Beschreibung, organisierter/strukturierter Eindruck
• Über uns/Unternehmen: Markenorientiert, professionell

Layout-Prinzipien:

• Großzügiger Weißraum (Vermeide Unordnung)
• Hoher Kontrast für Lesbarkeit beim Teilen
• Markenfarben als Akzente, nicht überwältigend
• Typografie-Hierarchie, die der Website entspricht
• 1200x630px (Standard-OG-Maße)

3. Bilder generieren

Komponentenbasierte Generierung:

• Verwende nach Möglichkeit React-Komponenten für Konsistenz
• Nutze Playwright, um Komponenten in Bilder zu rendern
• Wende Markenfarben, Schriftarten und Assets an
• Füge tatsächliche Seitenmetadaten ein (keine Platzhalter)

Technischer Ansatz:

1. Erstelle ein minimales HTML-Template mit Markenstilen
2. Generiere für jede Route seiten-spezifisches Markup
3. Nutze Playwright, um einen Screenshot bei 1200x630 zu erstellen
4. Speichere in public/og/ oder einem geeigneten statischen Verzeichnis
5. Aktualisiere die Seitenmetadaten, um auf das OG-Bild zu verweisen

Verwende scripts/generate_og_images.py zur Automatisierung.

4. Überprüfen und Optimieren

• Validiere OG-Bild-Metadaten im HTML
• Teste mit OG-Vorschau-Tools (opengraph.xyz, linkedin inspector)
• Stelle sicher, dass die Dateigrößen angemessen sind (<200KB bevorzugt)
• Überprüfe das Erscheinungsbild des Bildes in verschiedenen Maßstäben

Frameworkspezifische Anleitung

Next.js

App Router:

// app/page.tsx
export const metadata = {
  openGraph: {
    images: ['/og/home.png'],
  },
}

Pages Router:

// pages/index.tsx
<Head>
  <meta property="og:image" content="/og/home.png" />
</Head>

Dynamische OG-Bilder: Ziehe Next.js OG Image Generation (@vercel/og) für dynamische Inhalte in Betracht, verwende aber statische Generierung für Markenkonsistenz.

Astro

---
// src/pages/index.astro
const ogImage = '/og/home.png';
---
<head>
  <meta property="og:image" content={ogImage} />
</head>

React SPAs

Füge OG-Tags zu public/index.html hinzu oder verwende react-helmet:

<Helmet>
  <meta property="og:image" content="/og/home.png" />
</Helmet>

Anti-Patterns, die vermieden werden sollten

❌ Generische Vorlagen: Verwende keine Standard-Social-Card-Vorlagen, die die Marke der Website ignorieren

• Warum schlecht: Erzeugt eine Diskrepanz zwischen Website und Social-Sharing-Erlebnis
• Besser: Extrahiere tatsächliche Markenfarben, Schriftarten und verwende sie konsistent

❌ Einheitsgröße für alle: Verwende nicht dasselbe OG-Bild-Design für jeden Seitentyp

• Warum schlecht: Verpasst die Gelegenheit für eine kontextgerechte Darstellung
• Besser: Unterschiedliche Layouts für Landingpages, Artikel, Produkte usw.

❌ Platzhalterinhalte: Verwende keinen "Lorem ipsum"- oder generischen Text

• Warum schlecht: Macht den Zweck von Vorschaubildern zunichte
• Besser: Verwende tatsächliche Seitentitel und -beschreibungen aus den Metadaten

❌ Überladung: Stopfe nicht zu viel Text, zu viele Bilder oder komplexe Layouts hinein

• Warum schlecht: Unleserlich, wenn in sozialen Feeds verkleinert
• Besser: Konzentriere dich auf 1-2 Schlüsselelemente mit großzügigem Weißraum

❌ Komponenten ignorieren: Erstelle keine OG-Bilder von Grund auf, wenn Komponenten existieren

• Warum schlecht: Unterbricht die visuelle Konsistenz mit der Website
• Besser: Verwende Schaltflächenstile, Kartenlayouts, Typografie aus Komponenten wieder

❌ Manuelle Generierung: Erstelle OG-Bilder nicht einzeln manuell

• Warum schlecht: Nicht skalierbar, schwierig, Konsistenz zu wahren
• Besser: Skripte den Generierungsprozess, um alle Routen zu behandeln

Variationen-Richtlinie

WICHTIG: OG-Bilder sollten je nach Seitenkontext variieren, nicht auf ein einziges Design konvergieren.

Zu variierende Dimensionen:

• Layout: Zentriert vs. linksbündig, Einzel- vs. geteilte Spalte, Text- vs. visueller Fokus
• Farbakzent: Primäre Markenfarbe vs. neutral, Farbverlauf vs. einfarbig
• Inhaltshierarchie: Großer Titel vs. ausgewogener Titel+Beschreibung
• Visuelle Elemente: Logogröße/-platzierung, dekorative Elemente, Symbole
• Typografie: Größenverhältnisse, Gewichtsverteilung, Schriftartkombination

Vermeide Konvergenz auf:

• Denselben Farbverlaufshintergrund für alles
• Identisches "Titel + Logo"-Layout
• Ein einzelnes Schriftgrößenverhältnis
• Feste Logoposition

Der Kontext treibt die Variation:

• Technische Dokumentation → Sauber, organisiert, symbolbasiert
• Marketing-Landingpage → Fett, farbenfroh, wertorientiert
• Blog-Artikel → Leserfreundlich, Autoren-/Datums-Kontext
• Produktseiten → Visuelle Produktbetonung

Technische Anforderungen

Abhängigkeiten (nach Bedarf installieren):

npm install playwright sharp
# or
pip install playwright Pillow

Playwright-Setup:

playwright install chromium

Dateistruktur:

project/
├── public/og/          # Generierte OG-Bilder
│   ├── home.png
│   ├── about.png
│   └── ...
└── scripts/            # Generierungsskripte
    ├── analyze_codebase.py
    └── generate_og_images.py

Denk daran

OG-Bilder sind eine Erweiterung deiner Marke, keine generischen Social Cards.

Studiere die Codebasis, um die Designsprache zu verstehen. Extrahiere die Markenidentität. Verwende tatsächliche Komponenten und Inhalte. Erstelle kontextuell passende Bilder, die sich wie ein natürlicher Teil der Website anfühlen.

Wenn jemand deine Seite teilt, sollte das OG-Bild wie eine natürliche Vorschau wirken – nicht wie eine darüber gestülpte Vorlage.

Du bist in der Lage, anspruchsvolle, markenkonforme OG-Bilder zu erstellen, die die Identität der Website verbessern, anstatt sie zu untergraben.