Social Preview Architect

Ce que fait ce skill

• Analyse la vraie page : balises og:/twitter: existantes, logo, favicon, couleurs de marque, typographie, thème par défaut
• Présente un manifest avec stratégie, nombre d'images et modèles à valider avant toute création (jamais à l'aveugle)
• Conçoit les cartes d'aperçu asset-first à partir de votre vraie marque, au standard universel 1200×630 (1.91:1)
• Livre selon votre runtime IA : image finie, SVG, HTML/CSS, code Next.js/Satori, spécification ou prompt d'image
• Vérifie chaque carte : lisibilité (300–1200 px), contraste, zone de sécurité, cohérence de marque, exactitude
• Écrit les balises meta + l'intégration pour votre stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …)
• Propose des modes revue, maintenance et réparation (cache/incohérence de balises) + un Social Preview Profile

Description

Social Preview Architect est un skill pour les aperçus sociaux (aperçus de lien) — il garantit que chaque page publique de votre site s'affiche correctement, fidèle à la marque, lisible et convaincante sur toutes les plateformes dès qu'un lien est partagé. Idée directrice : **un aperçu social fait partie du système de design du site, pas une image publicitaire isolée.** Il ne saute donc pas directement aux images — il analyse d'abord la vraie page (balises og:/twitter: existantes, logo, favicon, couleurs de marque, typographie, thème par défaut), distille une **Brand DNA**, puis présente un **manifest** avec une stratégie recommandée, un nombre d'images et des modèles à **valider**. Ensuite seulement, il conçoit asset-first à partir de votre vraie marque — au **standard universel 1200×630 (1.91:1)** — et s'adapte au runtime IA : une image finie s'il peut en produire une, sinon SVG, HTML/CSS, code `opengraph-image.tsx`/Satori de Next.js, une spécification précise ou un prompt d'image. Chaque carte passe par une **boucle QA** (lisibilité à 1200/600/400/300 px, contraste, zone de sécurité, cohérence de marque, exactitude factuelle) et reçoit les balises meta correspondantes plus l'intégration pour votre stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …). S'ajoutent un **mode revue** (auditer les aperçus existants, sans nouvelles images), un **mode maintenance** (nouvelles pages sans image, images orphelines, logos modifiés, URL cassées, cache) et un **Social Preview Profile** enregistrable pour une cohérence durable. Honnête plutôt que joli : aucun chiffre, étoile ou promesse inventés — moins de texte vaut mieux qu'un texte faux.

Exemples

Exemple réel — ColorForge

/social-preview-architect https://color-forge.de

Vous 17 juillet 2026

Social Preview Architect

Site analysé en direct → thème sombre #0b0e14, vrai logo ColorForge, captures de l'outil. Une carte universelle 1200×630 au look de marque (vrai logo + capture, copie fidèle) — plus les balises og:/twitter: prêtes.

Exemple réel — PromptsAndPaper

/social-preview-architect https://promptsandpaper.com

Vous 17 juillet 2026

Social Preview Architect

Design mesuré en direct → fantasy sombre #0E1220, or + Cormorant Garamond, signature D20. L'ancienne og:image était carrée (logo seul) → remplacée par une vraie carte 1200×630 au style du site, avec des balises meta corrigées.

Images OG pour un petit site

Peux-tu créer des images Open Graph pour mon site pour que les liens soient beaux quand je les partage ? C'est une petite page de lancement en thème sombre pour un outil CLI.

Vous 17 juillet 2026

Social Preview Architect

J'ai d'abord examiné la vraie page (je ne conçois pas de mémoire). Voici le plan avant de générer quoi que ce soit :

SOCIAL PREVIEW MANIFEST

• Site : votre-domaine.example · Base de données : page d'accueil en direct
• Pages publiques trouvées : 4 (Accueil, Docs, Changelog, À propos)
• Balises existantes : og:title/og:url présentes, og:image manquante, pas de carte Twitter → les liens s'affichent en carte vide/grise
• Thème : Sombre (défaut du site #0B0F14) → aperçus en sombre
• Logo : SVG en ligne, monochrome, net en petit ✅
• Brand DNA : fond #0B0F14 · accent #3DDC97 · texte #E6EDF3 · titres mono · signature : fine ligne vert terminal

Stratégie recommandée — Minimale+ (petit site) : 1 carte Accueil · 1 carte de repli (réutilisée pour Docs/Changelog/À propos) · 2 images au total. Universel 1200×630, aucune variante par plateforme nécessaire.

Questions ouvertes

1. Logo discret en haut à gauche (recommandé) ou centré/grand ?

2. Repli partagé sur les 3 pages internes — ou une carte Docs dédiée ?

Confirme et je produis les deux (PNG fini si ce runtime peut rendre, sinon SVG/HTML prêt à capturer) + les balises <head> Astro exactes, puis je vérifie chacune à 400 px.

Calibrage : réparer, pas redessiner

Sur LinkedIn, mon lien de blog affiche l'ancienne mauvaise image, mais la nouvelle sur Slack. Corrige ça.

Vous 17 juillet 2026

Social Preview Architect

Ce schéma est presque toujours du cache + une incohérence de balises, pas une image manquante — c'est donc une réparation, pas une refonte. Ce que je vérifie (pas de nouveau visuel sauf si tu le veux) :

• Cache du scraper obsolète : LinkedIn met fortement en cache. Re-scraper avec le LinkedIn Post Inspector ; pour Facebook/WhatsApp, le Sharing Debugger → Scrape Again. Que Slack montre la nouvelle image indique que tes balises en ligne sont probablement déjà correctes.
• Incohérence/doublons de balises : plusieurs og:image, une URL relative (non absolue) ou un og:url pointant ailleurs font que les plateformes choisissent différemment. Je confirme qu'il y a exactement une seule og:image https absolue avec og:image:width/height.
• Purge du cache : si le fichier a été remplacé à la même URL, ajouter un chemin versionné (…/og/post.png?v=2) pour que chaque plateforme recharge.

Envoie l'URL du post (ou son <head>) et je te dis lequel de ces cas c'est, et le correctif exact. Je n'invente ni chiffres ni nouveau design sauf si tu le demandes.

‹ 1 / 4 ›

Ce qu’il ne fait pas

• Ne génère rien avant que la stratégie soit validée
• N'invente ni chiffres, ni notes, ni étoiles, ni promesses que la page ne soutient pas
• Pas de look IA générique quand le site a déjà son propre langage visuel
• Pas un designer de marque généraliste, ni un couteau suisse SEO, ni un générateur d'images hors contexte
• Ne contourne pas les protections de connexion/hotlink de sites tiers ; ne garantit pas un rendu de plateforme précis (vérifie avec les débogueurs officiels)

Compatibilité & technique

Testé (interne)

4 scénarios

Runtime recommandé

Claude Opus ou Sonnet ; avec accès web/shell pour l'analyse en direct de la vraie page

Modes

Audit · Créer · Optimiser · Réparer (cache/balises) · Concept uniquement · Code uniquement · Images de référence uniquement · Maintenance

Entrées

URL du site · HTML / balises meta existants · assets de marque / logo · capture d'écran / référence

Format de sortie

Manifest d'aperçu social + images d'aperçu (image/SVG/HTML/code) + balises meta + rapport QA

Sous-catégorie

Open Graph & aperçus sociaux

Licence

Proprietär

Profil de sécurité

Contenu livré

• social-preview-architect-1.0.1/11 fichiers
  • .claude-plugin/marketplace.json
  • plugins/social-preview-architect/skills/social-preview-architect/11 fichiers

    • SKILL.md
    • manifest.json
    • assets/4 fichiers

      • og-card-screenshot.html
      • og-card-standard.html
      • examples/2 fichiers

        • colorforge-og.jpg
        • promptsandpaper-og.jpg
    • references/5 fichiers

      • 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/→ universel — même contenu (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
  • LICENSE.txt

Installation

Aussi comme prompt de chat

Remarque

Idéalement avec l'URL (ou le `<head>`/HTML) de la vraie page et vos assets de marque. Que la sortie soit une image finie ou du SVG/HTML/code dépend du runtime IA — le skill choisit automatiquement le meilleur format disponible et livre toujours les balises meta. Les spécificités de plateforme (tailles d'image, troncature, cache) sont un état daté et, avec un accès web, sont revérifiées face aux docs officielles ; un rendu de plateforme précis n'est pas garanti.

Journal des modifications

• v1.0.107.07.2026Deux exemples de référence réels ajoutés (ColorForge, PromptsAndPaper) — les cartes OG générées en direct avec le skill apparaissent désormais dans les exemples et sont livrées comme images de référence dans le paquet (assets/examples/). Entrées en style commande.
• v1.0.007.07.2026Première version : flux stratégie-avant-pixels (manifest + validation), conception asset-first à partir de la vraie marque, standard universel 1200×630 (1.91:1), détection des capacités (image finie / SVG / HTML / opengraph-image.tsx Next.js / Satori / spécification + prompt), QA de lisibilité de 1200 à 300 px, matrice des plateformes (Discord/Slack/LinkedIn/WhatsApp/X et plus) + débogueurs officiels, intégration des balises meta & frameworks, modes revue/maintenance et un Social Preview Profile.

Questions fréquentes