chongdashu/cc-skills

OG-Bild-Ersteller (OG Image Creator)

Erstellen Sie authentische, markenkonforme Open-Graph-Bilder, indem Sie zuerst Ihre Codebasis verstehen und dann mit Playwright und Ihren vorhandenen Komponenten kontextuell passende Bilder für jede Route generieren.

Philosophie: Authentisch statt Vorlage

Vor der Generierung von OG-Bildern fragen:

• 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?

Grundprinzipien:

1. Erst studieren, dann generieren: Verstehen Sie die Codebasis-Struktur, das Routing und die Marke, bevor Sie etwas erstellen
2. Authentizität statt Vorlagen: Verwenden Sie tatsächliche Markenfarben, -schriftarten und -komponenten – keine generischen Social-Card-Vorlagen
3. Kontextbewusstes Design: Landing Pages, Artikel, Produkte und Dokumentation benötigen unterschiedliche visuelle Ansätze
4. Intelligente Automatisierung: Routen automatisch erkennen und Marke extrahieren, aber Benutzeranpassung zulassen

Arbeitsablauf

1. Entdecken und Analysieren

Routenerkennung:

• Projektstruktur analysieren, um das Framework zu bestimmen (Next.js, Astro, React, etc.)
• Routen basierend auf Framework-Konventionen automatisch erkennen:
  • Next.js: app/*/page.tsx oder pages/*.tsx
  • Astro: src/pages/*.astro
  • React Router: Routenkonfiguration analysieren
• Routen-Metadaten (Titel, Beschreibung) aus Seiten extrahieren
• Seitentypen kategorisieren (Landing, Artikel, Produkt, Über uns, etc.)

Markenextraktion:

• Logo-/Icon-Dateien finden (SVG bevorzugt)
• Farbpalette aus CSS/Tailwind-Konfiguration extrahieren
• Primäre Schriftarten aus Stylesheets oder Konfiguration identifizieren
• Designmuster aus vorhandenen Komponenten erfassen

Verwenden Sie scripts/analyze_codebase.py zur automatisierten Erkennung.

2. Designstrategie

Geeignete Layouts pro Seitentyp bestimmen:

• Landing Pages: Fett, minimalistisch, Wertversprechen betonen
• Artikel/Blog-Beiträge: Titel + Auszug, Datum/Autor falls relevant
• Produktseiten: Produktname, Hauptmerkmal, visuelle Darstellung falls verfügbar
• Dokumentation: Thema + Beschreibung, organisierter/strukturierter Eindruck
• Über uns/Unternehmen: Markenorientiert, professionell

Layout-Prinzipien:

• Großzügiger Weißraum (Überladung vermeiden)
• 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:

• Nach Möglichkeit React-Komponenten für Konsistenz wiederverwenden
• Playwright verwenden, um Komponenten in Bilder zu rendern
• Markenfarben, -schriftarten und -assets anwenden
• Tatsächliche Seitenmetadaten (keine Platzhalter) einfügen

Technischer Ansatz:

1. Minimales HTML-Template mit Markenstilen erstellen
2. Für jede Route seiten spezifisches Markup generieren
3. Playwright verwenden, um Screenshot bei 1200x630 zu erstellen
4. In public/og/ oder entsprechendem statischen Verzeichnis speichern
5. Seiten-Metadaten aktualisieren, um auf OG-Bild zu verweisen

Verwenden Sie scripts/generate_og_images.py zur Automatisierung.

4. Überprüfen und Optimieren

• OG-Bild-Metadaten im HTML validieren
• Mit OG-Vorschau-Tools testen (opengraph.xyz, LinkedIn Inspector)
• Dateigrößen angemessen halten (<200KB bevorzugt)
• Bilddarstellung bei verschiedenen Skalierungen prüfen

Framework-spezifische 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: Erwägen Sie Next.js OG-Bild-Generierung (@vercel/og) für dynamische Inhalte, aber verwenden Sie 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

OG-Tags zu public/index.html hinzufügen oder react-helmet verwenden:

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

Anti-Patterns, die Sie vermeiden sollten

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

• Warum schlecht: Erzeugt Diskrepanz zwischen Website und Social-Sharing-Erlebnis
• Besser: Tatsächliche Markenfarben und -schriftarten extrahieren und konsistent verwenden

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

• Warum schlecht: Vergibt die Chance für kontextgerechte Darstellung
• Besser: Unterschiedliche Layouts für Landing, Artikel, Produkte etc.

❌ Platzhalterinhalte: Verwenden Sie kein „Lorem ipsum" oder generischen Text

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

❌ Überladung: Packen Sie nicht zu viel Text, zu viele Bilder oder komplexe Layouts

• Warum schlecht: Unleserlich, wenn in sozialen Feeds skaliert
• Besser: Konzentrieren Sie sich auf 1-2 Schlüsselelemente mit großzügigem Weißraum

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

• Warum schlecht: Unterbricht die visuelle Konsistenz mit der Website
• Besser: Verwenden Sie Button-Stile, Karten-Layouts, Typografie aus Komponenten wieder

❌ Manuelle Generierung: Erstellen Sie OG-Bilder nicht einzeln manuell

• Warum schlecht: Nicht skalierbar, schwer Konsistenz zu wahren
• Besser: Skripten Sie den Generierungsprozess für alle Routen

Variationsrichtlinien

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

Variierbare Dimensionen:

• Layout: Zentriert vs. linksbündig, einzelne vs. geteilte Spalte, Text- vs. visueller Fokus
• Farbakzent: Primäre Markenfarbe vs. neutral, Verlauf vs. einfarbig
• Inhaltshierarchie: Großer Titel vs. ausgewogener Titel+Beschreibung
• Visuelle Elemente: Logo-Größe/-Position, dekorative Elemente, Icons
• Typografie: Größenverhältnisse, Gewichtsverteilung, Schriftartenkombination

Vermeiden Sie, auf Folgendes zu konvergieren:

• Derselbe Verlaufshintergrund für alles
• Identisches „Titel + Logo"-Layout
• Einziges Schriftgrößenverhältnis
• Feste Logo-Position

Kontext bestimmt Variation:

• Technische Dokumentation → Sauber, organisiert, icon-basiert
• Marketing-Landing → Fett, farbenfroh, wertorientiert
• Blog-Artikel → Leserfreundlich, Autor/Datum-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

Denken Sie daran

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

Studieren Sie die Codebasis, um die Designsprache zu verstehen. Extrahieren Sie die Markenidentität. Verwenden Sie tatsächliche Komponenten und Inhalte. Erstellen Sie kontextuell passende Bilder, die sich wie ein natürlicher Teil der Website anfühlen.

Wenn jemand Ihre Seite teilt, sollte das OG-Bild wie eine natürliche Vorschau wirken – nicht wie eine aufgeklebte Vorlage.

Sie sind in der Lage, ausgefeilte, markenkonforme OG-Bilder zu erstellen, die die Identität der Website verstärken und nicht untergraben.