Social Preview Architect

Qué hace este skill

• Analiza la página real: etiquetas og:/twitter: existentes, logo, favicon, colores de marca, tipografía, tema por defecto
• Presenta un manifest con estrategia, número de imágenes y plantillas para aprobar antes de crear nada (nunca a ciegas)
• Diseña las tarjetas de vista previa asset-first a partir de tu marca real, en el estándar universal 1200×630 (1.91:1)
• Entrega según tu runtime de IA: imagen terminada, SVG, HTML/CSS, código Next.js/Satori, especificación o prompt de imagen
• Comprueba cada tarjeta: legibilidad (300–1200 px), contraste, área segura, coherencia de marca y exactitud
• Escribe las etiquetas meta + la integración para tu stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …)
• Ofrece modos revisión, mantenimiento y reparación (caché/discrepancia de etiquetas) + un Social Preview Profile

Descripción

Social Preview Architect es un skill para vistas previas sociales (vistas previas de enlace) — garantiza que cada página pública de tu sitio se muestre correcta, fiel a la marca, legible y convincente en todas las plataformas en cuanto se comparte su enlace. Idea rectora: **una vista previa social es parte del sistema de diseño del sitio, no un gráfico publicitario suelto.** Por eso no salta directo a las imágenes — primero analiza la página real (etiquetas og:/twitter: existentes, logo, favicon, colores de marca, tipografía, tema por defecto), destila una **Brand DNA** y presenta un **manifest** con una estrategia recomendada, un número de imágenes y plantillas para tu **aprobación**. Solo entonces diseña asset-first a partir de tu marca real — en el **estándar universal 1200×630 (1.91:1)** — y se adapta al runtime de IA: una imagen terminada si puede renderizarla, si no SVG, HTML/CSS, código `opengraph-image.tsx`/Satori de Next.js, una especificación precisa o un prompt de imagen. Cada tarjeta pasa por un **bucle de QA** (legibilidad a 1200/600/400/300 px, contraste, área segura, coherencia de marca, exactitud factual) y recibe las etiquetas meta correspondientes más la integración para tu stack (Next.js, Astro, Nuxt, SvelteKit, WordPress, Hugo …). Se suman un **modo revisión** (auditar vistas previas existentes, sin imágenes nuevas), un **modo mantenimiento** (páginas nuevas sin imagen, imágenes huérfanas, logos cambiados, URL rotas, caché) y un **Social Preview Profile** guardable para una coherencia duradera. Honesto antes que bonito: sin cifras, estrellas ni promesas inventadas — menos texto es mejor que un texto falso.

Ejemplos

Ejemplo real — ColorForge

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

Tú 17 de julio de 2026

Social Preview Architect

Sitio analizado en vivo → tema oscuro #0b0e14, logo real de ColorForge, capturas de la herramienta. Una tarjeta universal 1200×630 con el look de marca (logo real + captura, copia literal) — más las etiquetas og:/twitter: listas.

Ejemplo real — PromptsAndPaper

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

Tú 17 de julio de 2026

Social Preview Architect

Diseño medido en vivo → fantasía oscura #0E1220, oro + Cormorant Garamond, firma D20. La antigua og:image era cuadrada (solo logo) → sustituida por una tarjeta real 1200×630 con el estilo del sitio, más etiquetas meta corregidas.

Imágenes OG para un sitio pequeño

¿Puedes crear imágenes Open Graph para mi sitio para que los enlaces se vean bien al compartirlos? Es una pequeña página de lanzamiento en tema oscuro para una herramienta CLI.

Tú 17 de julio de 2026

Social Preview Architect

Primero examiné la página real (no diseño de memoria). Este es el plan antes de generar nada:

SOCIAL PREVIEW MANIFEST

• Sitio: tu-dominio.example · Base de datos: página de inicio en vivo
• Páginas públicas encontradas: 4 (Inicio, Docs, Changelog, Acerca de)
• Etiquetas existentes: og:title/og:url presentes, og:image ausente, sin tarjeta de Twitter → los enlaces se muestran como tarjeta vacía/gris
• Tema: Oscuro (predeterminado del sitio #0B0F14) → vistas previas en oscuro
• Logo: SVG en línea, monocromo, nítido en tamaño pequeño ✅
• Brand DNA: fondo #0B0F14 · acento #3DDC97 · texto #E6EDF3 · titulares mono · firma: fina línea verde de terminal

Estrategia recomendada — Mínima+ (sitio pequeño): 1 tarjeta de Inicio · 1 tarjeta de reserva (reutilizada para Docs/Changelog/Acerca de) · 2 imágenes en total. Universal 1200×630, sin variantes por plataforma.

Preguntas abiertas

1. ¿Logo discreto arriba a la izquierda (recomendado) o centrado/grande?

2. ¿Reserva compartida en las 3 páginas internas — o una tarjeta de Docs propia?

Confirma y produzco ambas (PNG terminado si este runtime puede renderizar, si no SVG/HTML listo para capturar) + las etiquetas <head> exactas de Astro, y luego reviso cada una a 400 px.

Calibración: reparar, no rediseñar

En LinkedIn mi enlace de blog muestra la imagen antigua incorrecta, pero la nueva en Slack. Arréglalo.

Tú 17 de julio de 2026

Social Preview Architect

Ese patrón casi siempre es caché + una discrepancia de etiquetas, no una imagen faltante — así que es una reparación, no un rediseño. Lo que compruebo (sin arte nuevo salvo que lo quieras):

• Caché del scraper obsoleta: LinkedIn cachea con fuerza. Vuelve a escanear con el LinkedIn Post Inspector; para Facebook/WhatsApp, el Sharing Debugger → Scrape Again. Que Slack muestre la nueva indica que tus etiquetas en vivo probablemente ya son correctas.
• Discrepancia/duplicados de etiquetas: varias og:image, una URL relativa (no absoluta) o un og:url que apunta a otro sitio hacen que las plataformas elijan distinto. Confirmo que haya exactamente una og:image https absoluta con og:image:width/height.
• Purga de caché: si el archivo se reemplazó en la misma URL, usa una ruta versionada (…/og/post.png?v=2) para que cada plataforma recargue.

Envía la URL del post (o su <head>) y te digo cuál de estos casos es, y el arreglo exacto. No invento cifras ni un diseño nuevo salvo que lo pidas.

‹ 1 / 4 ›

Qué no hace

• No genera nada antes de que la estrategia esté aprobada
• No inventa cifras, valoraciones, estrellas ni promesas que la página no respalde
• Nada de look de IA genérico cuando el sitio ya tiene su propio lenguaje visual
• No es un diseñador de marca generalista, ni un todoterreno de SEO, ni un generador de imágenes sin contexto
• No sortea protecciones de login/hotlink de sitios de terceros; no garantiza un render de plataforma concreto (verifica con los depuradores oficiales)

Compatibilidad y técnica

Probado (interno)

4 escenarios

Runtime recomendado

Claude Opus o Sonnet; con acceso web/shell para el análisis en vivo de la página real

Modos

Auditoría · Crear · Optimizar · Reparar (caché/etiquetas) · Solo concepto · Solo código · Solo imágenes de referencia · Mantenimiento

Entradas

URL del sitio · HTML / etiquetas meta existentes · assets de marca / logo · captura de pantalla / referencia

Formato de salida

Manifest de vista previa social + imágenes de vista previa (imagen/SVG/HTML/código) + etiquetas meta + informe de QA

Subcategoría

Open Graph y vistas previas sociales

Licencia

Proprietär

Perfil de seguridad

Qué incluye

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

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

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

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

      • 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/→ universal — mismo contenido (Codex, Cursor, Copilot, Gemini, Windsurf, Cline)
  • LICENSE.txt

Instalación

También como prompt de chat

Nota

Lo ideal es con la URL (o el `<head>`/HTML) de la página real y tus assets de marca. Que la salida sea una imagen terminada o SVG/HTML/código depende del runtime de IA — el skill elige automáticamente el mejor formato disponible y siempre entrega las etiquetas meta. Los detalles de plataforma (tamaños de imagen, truncamiento, caché) son un estado fechado y, con acceso web, se revisan de nuevo frente a la documentación oficial; no se garantiza un render de plataforma concreto.

Historial de cambios

• v1.0.107.07.2026Dos ejemplos de referencia reales añadidos (ColorForge, PromptsAndPaper) — las tarjetas OG generadas en vivo con el skill ahora aparecen en los ejemplos y se entregan como imágenes de referencia en el paquete (assets/examples/). Entradas en estilo de comando.
• v1.0.007.07.2026Primera versión: flujo estrategia-antes-que-píxeles (manifest + aprobación), diseño asset-first a partir de la marca real, estándar universal 1200×630 (1.91:1), detección de capacidades (imagen terminada / SVG / HTML / opengraph-image.tsx de Next.js / Satori / especificación + prompt), QA de legibilidad de 1200 a 300 px, matriz de plataformas (Discord/Slack/LinkedIn/WhatsApp/X y más) + depuradores oficiales, integración de etiquetas meta y frameworks, modos revisión/mantenimiento y un Social Preview Profile.

Preguntas frecuentes