Social Preview Architect
Damit jeder geteilte Link deiner Website überall gut aussieht — strategiegeleitet, markentreu und technisch korrekt.
SKILL.md im offenen agentskills.io-Standard — direkt nutzbar in Claude, ChatGPT/Codex, Cursor, Copilot & Co.
Social Preview Architect ist ein KI-Skill für Open-Graph- und Social-Media-Vorschauen, der die Bilder und Meta-Tags plant, gestaltet, prüft und pflegt, mit denen deine Website beim Teilen auf Discord, Slack, LinkedIn, WhatsApp, X & Co. erscheint. Er generiert nie blind: Erst analysiert er die echte Seite (Logo, Farben, Theme, vorhandene og:-Tags), dann legt er eine Vorschau-Strategie zur Freigabe vor.
Was dieser Skill macht
- Analysiert die echte Website: bestehende og:/twitter:-Tags, Logo, Favicon, Markenfarben, Typografie, Standard-Theme
- Legt vor der Erstellung ein Manifest mit Strategie, Bildanzahl und Templates zur Freigabe vor (nie blind generieren)
- Gestaltet Vorschau-Karten asset-first aus deiner echten Marke im Universal-Standard 1200×630 (1.91:1)
- Liefert je nach KI-Laufzeit: fertiges Bild, SVG, HTML/CSS, Next.js/Satori-Code, Spezifikation oder Bild-Prompt
- Prüft jede Karte auf Lesbarkeit (300–1200 px), Kontrast, Safe Area, Marken-Fit und Faktentreue
- Schreibt die passenden Meta-Tags + Einbindung für deinen Stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …)
- Bietet Review-, Maintenance- und Reparatur-Modus (Cache/Tag-Mismatch) + Social Preview Profile
Beschreibung
Social Preview Architect ist ein Skill für Social Previews (Link-Vorschauen) — er sorgt dafür, dass jede öffentliche Seite deiner Website technisch korrekt, markentreu, gut lesbar und plattformübergreifend überzeugend dargestellt wird, sobald jemand den Link teilt. Leitidee: **Eine Social Preview ist Teil des Designsystems der Website, keine losgelöste Werbegrafik.** Deshalb springt der Skill nicht sofort zu Bildern, sondern analysiert erst die reale Seite (bestehende og:/twitter:-Tags, Logo, Favicon, Markenfarben, Typografie, Standard-Theme), destilliert daraus eine **Brand DNA** und legt ein **Manifest** mit empfohlener Strategie, Bildanzahl und Templates zur **Freigabe** vor. Erst danach gestaltet er asset-first aus deiner echten Marke — im robusten **Universal-Standard 1200×630 (1.91:1)** — und passt sich der KI-Laufzeit an: fertiges Bild, wo möglich, sonst SVG, HTML/CSS, Next.js `opengraph-image.tsx`/Satori-Code, eine präzise Spezifikation oder ein Bild-Prompt. Jede Karte durchläuft eine **QA-Schleife** (Lesbarkeit bei 1200/600/400/300 px, Kontrast, Safe Area, Marken-Fit, Faktentreue) und bekommt die passenden Meta-Tags plus Einbindung für deinen Stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …). Dazu ein **Review-Modus** (bestehende Vorschauen prüfen, ohne neue Bilder), ein **Maintenance-Modus** (neue Seiten ohne Bild, verwaiste Bilder, geänderte Logos, kaputte URLs, Cache) und ein speicherbares **Social Preview Profile** für dauerhaft konsistente Vorschauen. Ehrlich statt schön: keine erfundenen Zahlen, Sterne oder Claims — lieber weniger Text als falscher Text.
Beispiele
Live-Seite analysiert → Dark-Theme #0b0e14, echtes ColorForge-Logo, Tool-Screenshots. Daraus eine universelle 1200×630-Card im Brand-Look gebaut (echtes Logo + Screenshot, wortgetreue Copy) — plus fertige og:/twitter:-Tags.
Live-Design gemessen → Dark-Fantasy #0E1220, Gold + Cormorant Garamond, D20-Signatur. Altes og:image war quadratisch (nur Logo) → durch eine echte 1200×630-Card im Seiten-Stil ersetzt, inkl. korrigierter Meta-Tags.
Was es nicht macht
- Generiert nichts, bevor die Strategie freigegeben ist
- Erfindet keine Zahlen, Bewertungen, Sterne oder Claims, die die Seite nicht hergibt
- Kein generischer KI-Look, wenn die Website eine eigene Bildsprache hat
- Kein allgemeiner Marken-Designer, kein SEO-Allrounder, kein kontextfreier Bildgenerator
- Umgeht keine Login-/Hotlink-Sperren fremder Seiten; garantiert keine bestimmte Plattform-Darstellung (prüft mit den offiziellen Debuggern)
Kompatibilität & Technik
- Geprüft (intern)
- 4 Szenarien
- Empfohlene Laufzeit
- Claude Opus oder Sonnet; mit Web-/Shell-Zugriff für die Live-Analyse der echten Seite
- Modi
- Prüfen (Audit) · Erstellen · Optimieren · Reparieren (Cache/Tags) · Nur Konzept · Nur Code · Nur Referenzbilder · Wartung
- Eingaben
- Website-URL · vorhandenes HTML / Meta-Tags · Marken-Assets / Logo · Screenshot / Referenz
- Ausgabeformat
- Social-Preview-Manifest + Vorschau-Bilder (Bild/SVG/HTML/Code) + Meta-Tags + QA-Report
- Unterkategorie
- Open Graph & Social Previews
- Lizenz
- Proprietär
Sicherheitsprofil
Läuft komplett bei dir mit deiner eigenen KI — keine externe Runtime, keine laufenden Kosten.
Nur Anweisungen, Vorlagen und Referenzen — keine ausführbaren Skripte.
Greift im Normalbetrieb auf externe Quellen / das Netz zu (z. B. Live-Seiten, Such-/Daten-APIs).
Lieferumfang
- social-preview-architect-1.0.1/11 Dateien
- .claude-plugin/marketplace.json
plugins/social-preview-architect/skills/social-preview-architect/11 Dateien
- SKILL.md
- manifest.json
assets/4 Dateien
- og-card-screenshot.html
- og-card-standard.html
examples/2 Dateien
- colorforge-og.jpg
- promptsandpaper-og.jpg
references/5 Dateien
- social-preview-architect-brand-dna.md
- social-preview-architect-checklist.md
- social-preview-architect-design-qa.md
- social-preview-architect-implementation.md
- social-preview-architect-platforms.md
- .agents/skills/social-preview-architect/→ universell — gleicher Inhalt (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
- LICENSE.txt
Installation
Auch als Chat-Prompt nutzbar
Kein KI-Tool? Füg ihn in Claude, ChatGPT oder Gemini ein und nutze die Methode sofort.
Dieser Skill bringt keine Skripte mit — der Prompt trägt daher seine volle Methode.
Funktioniert am besten, wenn dein Chat Web-Zugriff hat.
Die Installation ist die volle Version — sie greift automatisch, führt ihre Skripte aus und lädt Referenzen bei Bedarf. Als Chat-Prompt fährst du die Methode selbst.
Zum Kopieren des paste-fertigen Prompts freischalten — danach in „Meine Skills".
Bewertungen
Noch keine Bewertungen – sei der/die Erste.
Hinweis
Am besten mit URL (oder dem `<head>`/HTML) der echten Seite und den Marken-Assets. Ob ein fertiges Bild oder SVG/HTML/Code herauskommt, hängt von der KI-Laufzeit ab — der Skill wählt automatisch das beste verfügbare Format und liefert immer die Meta-Tags. Plattform-Details (Bildgrößen, Truncation, Caching) sind ein datierter Stand und werden bei Web-Zugriff gegen die offiziellen Docs geprüft; eine bestimmte Plattform-Darstellung wird nicht garantiert.
Änderungen
- v1.0.107.07.2026Zwei echte Referenz-Beispiele ergänzt (ColorForge, PromptsAndPaper) — die mit dem Skill live erzeugten OG-Cards werden jetzt direkt bei den Beispielen gezeigt und liegen als Referenzbilder im Paket (assets/examples/). Eingaben im Command-Stil.
- v1.0.007.07.2026Erstveröffentlichung: Strategie-vor-Pixeln-Workflow (Manifest + Freigabe), Asset-first-Gestaltung aus der echten Marke, Universal-Standard 1200×630 (1.91:1), Capability-Detection (fertiges Bild / SVG / HTML / Next.js opengraph-image.tsx / Satori / Spezifikation + Prompt), Lesbarkeits-QA von 1200 bis 300 px, Plattform-Matrix (Discord/Slack/LinkedIn/WhatsApp/X u. a.) + offizielle Debugger, Meta-Tag- & Framework-Einbindung, Review-/Maintenance-Modus und Social Preview Profile. References für Plattformen, Brand DNA, Design/QA und Implementierung; fillbare OG-Templates in assets/.
Häufige Fragen
Was macht Social Preview Architect?
Social Preview Architect ist ein KI-Skill für Open-Graph- und Social-Media-Vorschauen, der die Bilder und Meta-Tags plant, gestaltet, prüft und pflegt, mit denen deine Website beim Teilen auf Discord, Slack, LinkedIn, WhatsApp, X & Co. erscheint. Er generiert nie blind: Erst analysiert er die echte Seite (Logo, Farben, Theme, vorhandene og:-Tags), dann legt er eine Vorschau-Strategie zur Freigabe vor.
Wie erstelle ich Open-Graph-Bilder für meine Website?
Social Preview Architect analysiert zuerst deine echte Seite (Logo, Farben, Theme, vorhandene og:-Tags), legt eine Vorschau-Strategie mit Bildanzahl und Templates zur Freigabe vor und erzeugt dann die Karten im Universal-Standard 1200×630 — als fertiges Bild, SVG, HTML oder Framework-Code, je nach deiner KI-Laufzeit — inklusive der passenden Meta-Tags.
Warum sieht mein Link beim Teilen leer oder kaputt aus?
Meist fehlt ein og:image oder es ist nicht erreichbar, es gibt mehrere bzw. relative Bild-URLs, oder die Plattform zeigt eine veraltete Cache-Version. Social Preview Architect prüft genau das, nennt die Ursache und liefert den konkreten Fix samt Cache-Refresh über die offiziellen Debugger (Facebook Sharing Debugger, LinkedIn Post Inspector).
Wofür ist Social Preview Architect gut — und wofür nicht?
Social Preview Architect ist für Social Previews bzw. Link-Vorschauen zuständig — analysieren, planen, gestalten, optimieren und pflegen der Teilen-Bilder und Meta-Tags über alle Plattformen. Er ist kein allgemeiner Marken-Designer und kein SEO-Allrounder — für ein komplettes UI führt er zu Frontend Design, für KI-Sichtbarkeit/GEO zu Web AI Vitals.
Welche Plattformen und Bildgrößen deckt der Skill ab?
Social Preview Architect plant standardmäßig eine universelle Karte in 1200×630 (1.91:1), die auf Discord, Slack, LinkedIn, WhatsApp, Facebook, X, Telegram, Teams, Reddit, Threads, Mastodon und iMessage robust funktioniert, und empfiehlt plattformspezifische Varianten nur, wenn sie wirklich helfen.
Generiert der Skill sofort Bilder?
Nein — Social Preview Architect generiert bewusst nicht blind. Er erstellt erst eine Social-Preview-Strategie (was er gefunden hat, wie viele Bilder, welche Templates, welches Theme) und wartet auf deine Freigabe. Erst danach entstehen die Vorschauen, jeweils mit anschließender Lesbarkeits- und Marken-Prüfung.
Mit welchen KI-Tools funktioniert Social Preview Architect?
Claude · ChatGPT/Codex · Cursor · Copilot · Gemini CLI · Windsurf · Cline
Wie setze ich Social Preview Architect ein?
Social Preview Architect ist eine SKILL.md im offenen agentskills.io-Standard: per Befehl installieren (npx) oder herunterladen und ins KI-Tool laden — Claude (Projects), ChatGPT (Custom GPT), Cursor, Copilot, Gemini CLI u. a. Kein Code nötig.