Orshot-HQ/orshot-openclaw

Orshot Contenido para Redes Sociales: diseña la plantilla una vez, publica desde ella para siempre

El contenido para redes sociales de Orshot es una plantilla diseñada más texto fresco por publicación, no una nueva imagen AI cada vez. Este skill crea plantillas de estudio de Orshot que lucen profesionalmente diseñadas, no el aspecto genérico de "AI" con texto centrado, para publicaciones de Instagram, publicaciones de LinkedIn, TikTok y Reels, historias, anuncios, banners, miniaturas y carruseles. Es la capa de conocimiento sobre las herramientas de diseño del servidor MCP de Orshot (orshot_create_template_design, orshot_update_template_design, orshot_patch_template_elements, orshot_get_brand_kit).

Conectar primero

openclaw mcp add orshot --url https://mcp.orshot.com/mcp --transport streamable-http --auth oauth
openclaw mcp login orshot

Las herramientas de diseño devuelven miniaturas en línea y comprobaciones de diseño, por lo que son solo MCP. El plan gratuito (100 créditos al mes, sin tarjeta) cubre la creación de plantillas y vistas previas. Los detalles y el respaldo REST para el renderizado residen en el skill orshot.

Generar una plantilla para una plataforma

1. Elige el formato. Pasa el preajuste como size al crear y renderizar, o proporciona ancho y alto.

Plataforma	Preajuste	Píxeles
Publicación de Instagram (vertical, el valor predeterminado 2026)	instagram-post-portrait	1080x1350
Instagram cuadrado	instagram-post	1080x1080
Historia de Instagram, portada de Reels, TikTok, YouTube Short	instagram-story, tiktok-video, youtube-short	1080x1920
Publicación de LinkedIn	linkedin-post	1200x627
Carrusel de LinkedIn (PDF o páginas de imagen)	linkedin-carousel	páginas cuadradas o 4:5
Publicación de X, encabezado de X	twitter-post, twitter-header	1200x675, 1500x500
Publicación de Facebook, historia, portada	facebook-post, facebook-story, facebook-cover	1200x630, 1080x1920, 851x315
Pin de Pinterest	pinterest-pin	1000x1500
Miniatura de YouTube	youtube-thumbnail	1280x720

Lista completa: el recurso MCP orshot://formats.

2. Lee las especificaciones y la marca. orshot://template-design-spec (esquema de elementos, los problemas de animación), luego orshot_get_brand_kit cuando el diseño deba ajustarse a la marca.
3. Lee el paquete references/social-media.md para áreas seguras, arquetipos y una receta. Elige un arquetipo diferente al de la última plantilla de este tipo.
4. Crea con orshot_create_template_design, completa pages_data, cada elemento de texto con textMode: "fit" y minFontSize, campos dinámicos marcados como parameterizable: true con parameterId en snake_case (headline, subtitle, product_image), includeThumbnails: true.
5. Critica la miniatura y la comprobación de diseño, corrige con orshot_update_template_design o orshot_patch_template_elements. Nunca envíes la primera versión sin revisar.
6. Renderízala con texto real (orshot_render_template) y muestra al usuario el resultado. Un diseño, todos los tamaños: extraSizes: ["instagram-story", "linkedin-post", "1080x1080"].
7. Entrega. La publicación, programación y análisis están en el skill orshot-social-media-scheduler; los carruseles de seis diapositivas en orshot-carousel. Conserva la plantilla; cada publicación futura es un renderizado, no un rediseño.

Cuándo usar

Úsalo siempre que estés diseñando o refinando una plantilla visual: una publicación/historia/carrusel social, un creativo publicitario, un banner, una miniatura, un gráfico de lanzamiento. Para el esquema de elementos del estudio y los problemas de renderizado, consulta también el recurso MCP orshot://template-design-spec.

Límites

• Esto es una guía de diseño, NO reemplaza la especificación del esquema. Los valores de estilo son siempre cadenas con unidades; position/dimensions son objetos anidados. Ver Compatibilidad a continuación.
• Se combina con el skill orshot (mecánica de API/generación): úsalo para renderizar.

Principio operativo

El diseño sirve a la tarea. Decide la ÚNICA cosa que el espectador debe llevarse, luego haz que todo lo demás la apoye. Respeta la marca y la plataforma por encima de la belleza genérica. Prefiere las reglas deterministas a continuación sobre la iteración subjetiva.

Flujo de trabajo requerido (en orden)

1. Forma: reformula el objetivo, la audiencia y el mensaje clave único antes de colocar nada.
2. Hereda la marca (cuando sea de marca): SI el diseño debe coincidir con la marca/producto del usuario (la sugerencia lo implica, o pregunta por "nuestro" estilo), llama a orshot_get_brand_kit (filtra por etiqueta según el propósito) y mapea los colores/fuentes/logotipo de la marca en los roles de Sistemas. Si la sugerencia pide un aspecto genérico/independiente, usa los valores predeterminados del paquete, no fuerces la marca.
3. Elige el paquete vertical: lee el archivo correspondiente en references/ (ej. references/social-media.md) para formato, áreas seguras, arquetipos y una receta concreta. Elige un ARQUETIPO DIFERENTE de las plantillas recientes de este tipo.
4. Construye: establece un elemento focal, luego apóyalo. Mantén el diseño simple en la primera creación; refina en una actualización posterior.
5. Critica: crea/actualiza con includeThumbnails: true, LEE la miniatura y corrige problemas con orshot_update_template_design / orshot_patch_template_elements. Nunca envíes la primera versión sin revisar. (La herramienta de creación también devuelve un "🎨 Design check", resuelve sus ⚠).

Sistemas

• Jerarquía: un punto focal claro mediante tamaño, peso y posición. No todo centrado.
• Tipografía: exactamente 2 familias de fuentes (display + cuerpo). Jerarquía mediante escala/peso. lineHeight ajustado (1.0–1.15) y letterSpacing ligeramente negativo en tipos display grandes. La fuente de marca más pesada → display, la más ligera → cuerpo.
• Color, 60-30-10: 60% dominante, 30% secundario, 10% acento. Una paleta cohesiva supera a más colores. Contraste WCAG AA claro. Mapea los colores de la marca a roles por USO, no por la etiqueta "primario".
• Composición y espacio: márgenes generosos (≥ ~6% del lienzo por borde), alinear a una cuadrícula implícita, preferir descentrado sobre apilamiento centrado.
• Imágenes: a sangre o intencionalmente enmarcadas; objectFit:"cover" para fotos; agregar un degradado de máscara debajo del texto sobre fotos ocupadas.

Marca (contextual, no obligatorio)

Usa el kit de marca CUANDO el diseño deba ajustarse a la marca (la sugerencia hace referencia a la marca, producto o identidad del usuario): colores → roles 60-30-10, fuentes → display/cuerpo, logotipo → una pequeña marca en esquina/pie de página, imágenes → héroe/producto. Para un aspecto genérico/exploratorio/independiente, la paleta del paquete está bien, no fuerces los activos de marca.

Variedad

Nunca repitas un diseño para el mismo tipo de contenido. Varía el arquetipo, la ubicación focal y el énfasis de color entre diseños del mismo tipo.

Compatibilidad (hazlo bien o el renderizado falla silenciosamente)

• TODOS los valores de estilo son cadenas con unidades: "48px", "700", "12px": nunca números solos.
• position y dimensions son objetos anidados ({x,y}, {width,height}).
• Configura textMode:"fit" + minFontSize en CADA elemento de texto (mínimos: titular 48, subtítulo 28, cuerpo 24, entradilla 18, pie de foto 14). El valor predeterminado "overflow" no se reduce ni reajusta, el texto largo/parametrizado se sale de su cuadro.
• Saltos de línea: usa \n, NUNCA <br>; evita múltiples bloques <p> (se superponen). Para un titular de varias líneas con una palabra en color de acento, usa un elemento de texto por línea.
• Un <span> de resaltado de fondo (píldora de color) obliga a todo el elemento a una línea (white-space: nowrap) → desbordamiento en texto largo. Resalta solo 1–3 palabras; para titulares largos usa énfasis de color (sin fondo) o divide por línea.
• Los campos parametrizables necesitan parameterizable:true, un parameterId único en snake_case y un parameterType que coincida con el elemento (texto→"text", imagen→"imageUrl", forma→"fill", lienzo/contenedor→"backgroundColor").
• Las formas con relleno transparente + borde no se renderizan; el content SVG debe ser un data-URI.

Movimiento y audio (plantillas de video)

Hacer que el video parezca diseñado, no generado:

• Revela por secciones en ~4–5s. Los elementos que forman una unidad (icono+etiqueta, una fila de especificaciones, el pie de página) comparten el MISMO tipo de enter y showAt; escalona ~0.3–0.5s ENTRE secciones en orden de lectura. showAt/hideAt son hermanos de enter/exit: nunca anidados dentro de ellos.
• Cada foto a sangre recibe un ambiente kenBurns (zoom 1.08–1.15). Una foto fija mantenida 3 segundos se lee como un fotograma muerto; un push lento se lee como metraje. Alterna la dirección de panX entre páginas.
• El ambiente se mantiene sutil y LENTO: ciclos de 6–10s contra un enter de 0.5s. Si el espectador puede nombrar el movimiento, es demasiado fuerte, a menos que sea un acento deliberado (una insignia que se mueve). shake/slowRotate necesitan easing: "linear" o la costura del bucle se nota.
• Un pageTransition para todo el video, 0.3–0.5s. Una transición diferente por corte es la señal más clara de una edición generada automáticamente.
• Sonido predeterminado: pista de narración a volumen 1 + un ambiente generado contenido (sfx, volumen 0.08–0.18, bucle) + page.subtitle { source: "auto-audio" } con un preajuste de subtítulos (karaoke/bold) y strokeWidth 2–3 sobre metraje ocupado. Presupuesto de narración en ~2 palabras/segundo con 1s de margen. Llama a orshot_get_audio_authoring_options antes de crear audio generado; asigna tts.parameterId para que el texto hablado siga siendo un parámetro de renderizado.

Anti-patrones (las señales de "AI cutre", evitarlas)

• Todo centrado y apilado; sin punto focal.
• 3+ fuentes, o tamaños aleatorios sin jerarquía.
• Texto de bajo contraste sobre una foto ocupada sin máscara.
• Forzar activos de marca cuando la sugerencia no pidió un diseño de marca (o ignorar el kit cuando claramente lo pidió).
• Un titular diminuto sobre un párrafo de texto de cuerpo (una plantilla no es un documento).
• Reemitir el diseño anterior para el mismo tipo de contenido.

Paquetes verticales (divulgación progresiva)

Lee el que coincida con la tarea, cada uno agrega formato/áreas seguras, arquetipos y una receta:

• references/social-media.md: publicaciones, historias, carruseles.
• (más verticales, anuncios, bienes raíces, comercio electrónico, añadidos aquí con el tiempo).

Ejemplos

Ejemplo 1, "Crea una publicación de Instagram anunciando nuestra nueva función"

1. orshot_get_brand_kit (etiquetas: "social-media") → colores/fuentes/logotipo de la marca.
2. Lee references/social-media.md → predeterminado 4:5 vertical 1080×1350; elige el arquetipo type-hero (diferente de la última publicación).
3. orshot_create_template_design con la fuente display de la marca para un titular sobredimensionado, color dominante de la marca como fondo, color de acento en una palabra, logotipo + pie de página @handle, includeThumbnails:true.
4. Lee la miniatura + "🎨 Design check"; corrige contraste/espaciado según sea necesario.

Ejemplo 2, "Refina esta plantilla, se ve genérica"

1. orshot_get_studio_template para inspeccionar el diseño actual.
2. Diagnostica contra Anti-patrones (¿centrada? ¿3+ fuentes? ¿sin punto focal? ¿marca ignorada?).
3. orshot_patch_template_elements para establecer un titular focal, reducir a 2 fuentes, aplicar 60-30-10 de la marca, alinear a la izquierda/abajo. Vuelve a renderizar con includeThumbnails:true y verifica.

Solución de problemas

El titular se muestra en una línea / <br> ignorado. Usa \n, no <br>. Para una palabra coloreada en un titular de varias líneas, divide en un elemento de texto por línea.

Los colores/fuentes no parecen de marca. Saltaste el paso 2, llama a orshot_get_brand_kit y mapea el value devuelto (colores) y name (fuentes) al diseño.

"🎨 Design check" advierte sobre repetición. Este diseño coincide con una plantilla reciente del mismo tipo. Cambia de arquetipo y mueve el punto focal.