¿Qué hace Carouso?

Propósito

Produce publicaciones de carrusel en dos fases. La Fase 1 fija un sistema de diseño con el usuario: tokens de marca más una biblioteca de patrones de diseño. La Fase 2 compone cada carrusel a partir de esos patrones: elige patrones por diapositiva, redacta el texto, coloca las imágenes y renderiza a través de controles de calidad.

Bloquea los tokens. Libera la composición. Eso es lo que mantiene cada carrusel alineado con la marca sin que parezca una plantilla.

Usar una plantilla (ruta predeterminada)

Hay seis plantillas listas en templates/. Cada una tiene un estilo definido (colores, fuentes, tokens claro y oscuro) más un esqueleto de diapositivas, por lo que no se necesita ninguna configuración previa. La galería de vista previa está en README.md.

Disparadores: "template 3", "template no 3", "pakai template 3", "use template 2 for ..." o un nombre de plantilla ("morning cup"). Busca el número o nombre en templates/NN-slug/template.json.

Archivos por plantilla: tokens.css (la apariencia), template.json (nombre, fuentes, tamaño, secuencia de diapositivas con patrones y modos), sample.html (el carrusel de muestra terminado para copiar).

Resuelve la plantilla. Lee templates/NN-slug/template.json. Si la persona no ha dado un número y no existe un sistema personalizado, enumera cada plantilla (número, nombre, estilo) desde los archivos template.json y pregunta cuál quiere. Un número desconocido recibe la misma lista.
Recopila el briefing. Pregunta una sola vez, en un solo mensaje, lo que falte: tema y enfoque (obligatorio), nombre de la marca y usuario (los placeholders de la plantilla se usan si no los proporcionan), número de diapositivas (por defecto es la longitud de la secuencia, permitido de 5 a 10), imágenes con un mapa de colocación (opcional, ver paso 6). El idioma del carrusel sigue el idioma del briefing. Traduce también todas las cadenas fijas en el marcado: "Myth", "Fact", "Save this" y los pies NN / TT permanecen, las palabras cambian.
Planifica a partir de la secuencia. Parte de la sequence de la plantilla. Mantén la portada primero, el cierre al final y el modo de cada diapositiva según lo listado. Para un número diferente de diapositivas, elimina o repite diapositivas intermedias en el orden de la secuencia, manteniendo los modos alternados y sin dos diapositivas adyacentes en el mismo patrón. Cambia un patrón intermedio cuando el contenido se adapte mejor a otro (números a stat-band o big-number, pasos a process-steps, una línea a quote), manteniendo el modo de esa diapositiva. Usa cover-split solo cuando se proporcione una imagen de portada verificada. Una imagen colocada va en la diapositiva como un slot .photo (ver más abajo), o en una diapositiva image-hero cuando la foto es el punto principal. Escribe el plan como una lista (número de diapositiva, patrón, modo, contenido de una línea) antes de construir.
Escribe el texto bajo los estándares de redacción a continuación. Reemplaza cada línea de muestra. No debe quedar nada del tema de muestra.
Construye el HTML. Crea carousels/<slug>/index.html copiando el sample.html de la plantilla elegida. Cambia solo el enlace tokens.css a ../../templates/NN-slug/tokens.css. Los enlaces fonts.css y system.css ya resuelven desde esa profundidad. Mantén o elimina bloques <section> según el plan, copia bloques de patrón de design-system/patterns.html para las diapositivas añadidas, aplica la clase mode-dark según el plan, completa la marca, el usuario y los contadores NN / TT.
Las imágenes pasan el control estricto en el paso 4 de la Fase 2 a continuación. Coloca copias locales en carousels/<slug>/images/ y registra la procedencia en carousels/<slug>/provenance.log.
Renderiza con el tamaño y las fuentes de la plantilla de template.json:

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<fonts from template.json, comma separated>"

Arregla el HTML hasta que todos los controles pasen. Nunca omitas un control. 8. Revisión visual final como en el paso 7 de la Fase 2, luego entrega slide_01.jpg a slide_NN.jpg. Las plantillas no necesitan last-used.json, porque los modos provienen de la plantilla.

Las fuentes están incluidas en fonts/, por lo que no es necesario instalar nada excepto Playwright.

Una persona que quiera su propio estilo en lugar de las seis plantillas utiliza la ruta personalizada a continuación.

Sistema de diseño personalizado (ruta opcional)

Usa esta ruta solo cuando la persona pida su propio estilo, o envíe una captura de pantalla o HTML de referencia, en lugar de elegir una plantilla. Cuando no se haya elegido ninguna plantilla y no exista un sistema de diseño bloqueado, ofrece primero las plantillas, y ejecuta la incorporación a continuación solo si quieren una personalizada. Cuando se ejecute esta ruta, no empieces a diseñar. Abre primero el diálogo de incorporación. Haz una pregunta a la vez, en este orden, cada una con las opciones listadas. Acepta una respuesta personalizada en cualquier momento. Siete preguntas, luego diseño. Si el usuario envía una captura de pantalla o HTML de referencia en lugar de responder, salta el diálogo y ve a la Fase 1, opción B.

Estilo. "¿Qué estilo debería tener el carrusel?" Opciones: Divertido y amigable / Limpio y minimalista / Audaz y llamativo / Cálido y elegante / Oscuro y premium.
Colores. "Elige un estado de ánimo cromático." Opciones: Tierra cálida (marrones, crema, naranja) / Natural fresco (verdes, crema) / Océano calmado (azules, blanco) / Contraste audaz (negro, blanco, un acento fuerte) / Pastel suave.
Fuentes. "Elige un estilo tipográfico. No hace falta que nombres las fuentes." Opciones: Redondeada y divertida / Serifa elegante / Negrita y moderna / Limpia y simple. Mapea internamente, nunca muestres los nombres de las fuentes: redondeada-diverta a Baloo 2 + Quicksand; serifa-elegante a Playfair Display + Plus Jakarta Sans; negrita-moderna a Albert Sans + Plus Jakarta Sans; limpia-simple a Plus Jakarta Sans + Quicksand. Las cinco familias están incluidas en fonts/: enlaza fonts/fonts.css desde el HTML del carrusel.
Marca. "¿Nombre de la marca y usuario para la marca de agua?" Texto libre, un mensaje. Ejemplo: "Morning Cup / @morningcup".
Tema. "¿De qué suelen tratar los carruseles?" Texto libre, una línea. Esto define el tono del texto y el contenido de muestra.
Idioma. "¿Español o Inglés?" Dos opciones. Esto define todas las cadenas fijas: titulares, CTA, pie de página.
Nombre del sistema. "¿Cómo deberíamos llamar a este sistema de diseño?" Texto libre, un mensaje. Sugiere un valor por defecto basado en la marca y el estilo, por ejemplo "morningcup-playful". El nombre importa porque el usuario puede tener varios sistemas y elegir uno por carrusel.

Después de la séptima respuesta, resume las opciones bloqueadas en un mensaje corto, luego pasa a la Fase 1.

Fase 1: bloquear el sistema de diseño

Dos formas de entrar. Elige una.

A. Generar a partir de las respuestas de incorporación. Establece los tokens :root en design-system/system.css con los valores de la marca (colores, fuentes, radio). Renderiza tres patrones de muestra con esos tokens (una portada, un cuerpo, un cierre) y muéstralos al usuario. Itera hasta que sean aprobados.

B. Adaptar a partir de una referencia. El usuario envía una captura de pantalla o un archivo HTML de un carrusel que le guste. Estúdialo: roles de color, escala tipográfica, ritmo de espaciado, elementos recurrentes. Codifica lo que aprendes como tokens :root, luego renderiza los patrones de muestra. Itera hasta que sean aprobados.

Control de aprobación. El sistema entra en producción solo después de que el usuario apruebe las muestras renderizadas. Guárdalo bajo su nombre de sistema (por ejemplo design-systems/morningcup-playful/, que contenga system.css, patterns.html y last-used.json). Para construir otro sistema más tarde, vuelve a ejecutar el diálogo de incorporación desde la pregunta 1.

Fase 2: componer un carrusel

1. Recopilar el briefing

Aclara esto antes de empezar. Pregunta sobre cualquier cosa que falte. No adivines.

Tema y enfoque, como una frase de gancho.
Sistema de diseño: qué sistema bloqueado usar. Por defecto, el último aprobado. Pregunta cuando existan varios. (En la ruta de la plantilla, la plantilla es el sistema de diseño).
Número de diapositivas (por defecto 6-10) y tamaño (por defecto 1080x1440, que es lo que renderiza system.css; una altura diferente necesita una anulación de altura .slide correspondiente).
Imágenes. Para cada imagen: la fuente (ruta de archivo subido, URL directa o URL del artículo), la diapositiva de destino y el rol (principal, dividido o en línea). Sin un mapa de colocación explícito, no uses imágenes.

2. Planificar la composición

Lee el last-used.json del sistema y el catálogo de patrones en design-system/PATTERNS.md. Asigna un patrón por diapositiva:

Abre con un patrón de portada, cierra con un patrón de cierre.
Ninguna diapositiva adyacente comparte un patrón.
Nunca repitas el patrón de portada del carrusel anterior para la misma marca.
Adapta el patrón al contenido: números a stat-band o big-number, secuencias a process-steps, una sola línea a quote. No fuerces el contenido en un patrón que no le conviene.
Alterna los dos modos en las diapositivas: asigna mode-dark a una diapositiva o déjala clara para que no haya dos diapositivas adyacentes que compartan el mismo modo. Empieza con el modo opuesto de la primera diapositiva del carrusel anterior (lee last-used.json). Un carrusel puede abrir en claro, el siguiente en oscuro. Deja que el contenido guíe qué diapositivas van en oscuro: los pares de contraste (mito vs hecho, problema vs solución) son diapositivas oscuras naturales.

Escribe el plan como una lista simple (número de diapositiva, nombre del patrón, modo, contenido de una línea) antes de construir nada.

3. Escribir el texto

Una idea por diapositiva. Los titulares se mantienen por debajo de 8 palabras. El cuerpo se mantiene por debajo de 25 palabras por diapositiva. Sigue los estándares de redacción a continuación.

4. Ingresar y verificar imágenes (control estricto)

Descarga o copia cada imagen en la carpeta local images/. Nunca enlaces imágenes externas durante el renderizado.
Revisa cada imagen antes de usarla. Recházala cuando el contenido no coincida con el tema de la diapositiva, cuando tenga una marca de agua o un logotipo extraño, cuando esté borrosa o cuando su lado más corto sea inferior a 900px para uso grande.
Registra la procedencia (URL de origen o nombre de archivo subido) en provenance.log.
Nunca uses imágenes generadas por IA. Este skill no genera imágenes, sin excepción.

Slot de foto. Para añadir una imagen a cualquier patrón de cuerpo, coloca <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure> como el último hijo de .content de esa diapositiva. Se ajusta al ancho del contenido en una relación 16:10 y toma el radio y los colores de la plantilla. Usa class="photo wide" (5:2) o class="photo band" (3:1) en diapositivas densas como myth-fact o big-number, style="--focus:50% 40%" para establecer el punto de recorte, y un <figcaption> para un pie de foto sobre un filtro. Para dos fotos usa <div class="photos"> con dos <figure class="photo"> (cuadradas, una al lado de la otra, mismo espacio que two-cards), o class="photos short" (4:3) en diapositivas densas. Para una diapositiva de tipo hero, coloca la foto de borde a borde en la parte superior: añade photo-top a las clases de la <section>, style="--bleed-h:600px" en ella, y <figure class="photo-bleed"><img ...></figure> como el primer hijo. La barra superior se vuelve blanca sobre un filtro y el contenido comienza debajo de la foto. Usa aproximadamente --bleed-h:440px en diapositivas densas (myth-fact, big-number). Elige una foto con un borde superior tranquilo, ya que la barra superior se asienta sobre él. Verifica que la diapositiva aún pase el control de desbordamiento y mantenga al menos 40px de aire por encima y por debajo del contenido.

5. Construir el HTML

Comienza desde el system.css bloqueado (copia el contenido del <style> o enlaza el archivo) y copia los bloques <section> elegidos de patterns.html. Rellena los espacios de texto e imagen. Referencia las imágenes por rutas locales relativas al HTML. No inventes nuevos diseños por carrusel. Cuando el briefing necesite una estructura que ningún patrón cubra, eso es una discusión de la Fase 1, no una improvisación de la Fase 2.

6. Renderizar con el control de calidad

Ejecuta scripts/render_carousel.py:

python3 scripts/render_carousel.py --html <file.html> --out <dir-output> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

(Ajusta el ancho, alto, diapositivas y fuentes según el briefing y los tokens del sistema). El script sale con código 1 cuando el recuento de .slide difiere de la solicitud, cuando el contenido se desborda de su zona, cuando el cuadro delimitador de una diapositiva difiere del tamaño solicitado, cuando el texto es más pequeño de 20px, o cuando una fuente verificada no se pudo cargar. Arregla el HTML y vuelve a renderizar hasta que pase. Nunca omitas el control manualmente.

7. Revisión visual final y registro

Abre la diapositiva 1, una diapositiva intermedia y la última diapositiva. Confirma que la fuente de visualización se haya renderizado, que ningún texto esté recortado, que no haya elementos superpuestos, que las imágenes no estén distorsionadas con los sujetos intactos, y que la marca, el usuario y la CTA se mantengan consistentes. Luego actualiza el last-used.json del sistema con el patrón de portada de este carrusel, la secuencia completa de patrones y el modo de cada diapositiva (por ejemplo {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}).

Pensamiento de diseño

Aplica este razonamiento en cada paso. Es lo que evita que el resultado parezca contenido genérico de IA.

Antes de escribir el texto

Nombra la idea única de la diapositiva en una oración. Si no puedes, la diapositiva aún no existe.
Escribe el titular primero, luego redúcelo a menos de 8 palabras sin perder significado.
Prefiere sustantivos concretos y verbos fuertes sobre adjetivos. Nombra la hora, la temperatura, la cantidad.
Lee cada línea en voz alta. Si pudiera pertenecer a cualquier marca, reescríbela para esta.

Antes de colocar elementos

Decide el orden de lectura primero: qué se ve primero, segundo, tercero. El tamaño y el peso deben imponerlo.
Cada elemento necesita una razón para su posición. Alinéalo a la cuadrícula, o rómpela deliberadamente (solo en portadas).
Trata el espacio en blanco como un elemento de diseño. Cuando una diapositiva se sienta apretada, recorta contenido. Nunca reduzcas el tipo de letra por debajo del mínimo.

Estándares de redacción (anti-contenido genérico)

Oraciones declarativas cortas. Una idea por oración.
Sin guiones largos. Sin construcciones "no solo X, sino Y". Sin tríadas forzadas.
Sin abridores de relleno y sin vocabulario de IA: "adentrarse", "desbloquear", "elevar", "tapiz", "cambio de juego", "en el mundo acelerado de hoy".
Voz activa. Palabras sencillas: "usa", no "utiliza".
Los ganchos usan uno de tres patrones: un vacío de curiosidad, un número específico o un discurso directo.
El subtítulo hace una promesa, no un resumen. Dice lo que el lector obtiene al deslizar.
Sin emojis decorativos en los encabezados. Sin titulares en mayúscula inicial.

Fundamentos de diseño

Jerarquía: el titular es el elemento más grande y audaz. Una palabra o frase de color acento por titular, nada más.
Contraste: el texto sobre fotos se coloca sobre un filtro o una tarjeta semisólida. Nunca directamente sobre una foto con mucho detalle.
Alineación: un margen interior consistente en todas partes. Alineado a la izquierda por defecto; las portadas centran deliberadamente.
Tipografía: máximo dos familias de fuentes. Cada fuente debe cargarse; el control de renderizado rechazará el trabajo si falta alguna fuente o no se carga.

Controles de calidad

Control de desbordamiento: cada bloque .content debe encajar dentro de su .slide padre sin desbordamiento visible. El script render_carousel.py marca el desbordamiento como un error. Si una diapositiva falla, reduce el texto del cuerpo o simplifica la estructura en lugar de reducir la fuente base.
Control de imágenes: relación de aspecto correcta, sin marcas de agua, sin elementos generativos. El script no verifica esto automáticamente; confía en la revisión manual durante el paso 4 y el paso 7.
Control de fuentes: el script render_carousel.py requiere --check-fonts con una lista de nombres de familias de fuentes. Falla si no se carga una fuente.
Control de coherencia: marca, usuario y CTA deben ser idénticos en todas las diapositivas. Las diapositivas de portada y cierre deben compartir el usuario y la marca. Verifica antes de la entrega.

Carouso

¿Qué es Carouso?

Preguntar en tu IA favorita

Vista previa

Documentación