01 Qué es y en qué se diferencia de una plantilla
Un carrusel es una publicación de varias imágenes que el usuario desliza. Suele ser el formato que más se guarda y comparte, pero montarlo a mano en un editor de plantillas lleva tiempo y acaba pareciéndose a lo que publica todo el mundo.
Open Carrusel cambia el enfoque: Claude escribe cada diapositiva como HTML y CSS a partir de tu descripción y de la configuración de tu marca, y un navegador sin interfaz (Puppeteer) la convierte en PNG al tamaño exacto. Lo que ves en la vista previa es exactamente lo que exportas. Es una aplicación web que corre en localhost: no hay cuentas, ni suscripción, ni base de datos en la nube.
Editor de tres paneles
Chat a la izquierda, vista previa en el centro y tira de diapositivas abajo para reordenar arrastrando.
Marca persistente
Nombre, cinco colores, tipografías de Google Fonts, logo y palabras clave de estilo. Claude las lee antes de cada generación.
Edición por diapositiva
Pides cambios en una sola slide sin tocar el resto y puedes deshacer gracias al historial de versiones de cada una.
Exportación lista
1:1 (1080×1080), 4:5 (1080×1350) o 9:16 (1080×1920), en un ZIP de PNG. Incluye guía de zonas seguras y generador de texto y hashtags.
02 Instalación
-
1
Comprueba los requisitos
node --version debe devolver 20 o más (Next.js 16 lo exige) y claude debe estar instalado y con sesión iniciada.
-
2
Clona el repositorio y abre Claude Code dentro
Todos los comandos del proyecto viven en su carpeta .claude/commands.
-
3
Ejecuta /start
Instala dependencias, crea los datos iniciales, arranca el servidor y abre el navegador. La primera vez tarda uno o dos minutos porque descarga unos 300 MB de Chromium para exportar.
-
4
Configura tu marca
Al primer arranque, o desde el icono del engranaje en la barra superior.
git clone https://github.com/Hainrixz/open-carrusel.git
cd open-carrusel
claude
# ya dentro de Claude Code:
/startnpm run setup # dependencias y datos iniciales
npm run dev # servidor en http://localhost:3000| Comando | Qué hace |
|---|---|
| /start [puerto] | Instala, prepara datos, arranca y abre el navegador. Repetirlo con todo sano tarda segundos. |
| /stop [puerto] | Detiene el servidor (por defecto el 3000). |
| /reset | Borra carruseles, plantillas, marca y subidas locales y vuelve a los valores iniciales. Pide confirmación. |
| /doctor | Diagnóstico: versión de Node, CLI de Claude, dependencias, datos y puerto libre. |
03 Flujo de trabajo recomendado
-
1
Define la marca con cuidado
Las palabras clave de estilo («editorial, mucho aire, tonos cálidos») pesan tanto como los colores. Escríbelas como se las explicarías a un diseñador.
-
2
Sube referencias
Arrastra capturas de carruseles que te gusten a la sección de imágenes de referencia del chat. Claude las estudia para acercarse al estilo.
-
3
Pide el carrusel completo
Tema, número de diapositivas, público, tono y formato. Mejor aún si das la estructura: gancho, desarrollo y llamada a la acción.
-
4
Corrige diapositiva a diapositiva
Cambios concretos y de uno en uno: «en la 3, titular más corto y el icono arriba».
-
5
Revisa zonas seguras y exporta
Activa la guía de zonas seguras para que nada importante quede tapado por la interfaz de Instagram y exporta.
-
6
Guarda como plantilla
Con el icono de marcador. El siguiente carrusel saldrá con la misma estructura y estilo.
Crea un carrusel de 7 diapositivas en formato 4:5 para [público, p. ej. «dueños de pequeños comercios»] sobre [tema, p. ej. «5 errores al pedir presupuesto de una web»].
Estructura: 1 portada con gancho de máximo 8 palabras, 5 diapositivas con un error cada una (titular + 2 líneas de explicación + icono sencillo) y 1 cierre con llamada a guardar el post.
Tono cercano y directo, en español de España. Respeta mi marca y deja márgenes amplios. No uses más de 25 palabras por diapositiva.No toques las demás diapositivas. En la diapositiva [número]: reduce el titular a la mitad, sube el contraste del texto secundario y usa el color de acento solo en una palabra clave. Después escríbeme el texto para la publicación (máximo 3 líneas) y 8 hashtags relevantes en español.04 Cómo funciona por dentro
La aplicación está hecha con Next.js 16, React 19 y TypeScript. Cuando escribes en el chat, el servidor lanza la CLI de Claude como subproceso, con permiso para usar Bash y WebFetch, y le pasa tu marca y el estado del carrusel. Claude escribe la diapositiva y la envía a la API local de la app con curl. Las diapositivas se muestran en un iframe aislado que no permite ejecutar scripts, y la misma función de envoltorio alimenta vista previa y exportación.
Todo se guarda en archivos JSON dentro de /data y las imágenes en /public/uploads, ambas carpetas fuera de Git. La única conexión externa es la de Claude Code con Anthropic.
05 Problemas frecuentes
- ✓«Node v18 detected»: actualiza Node a la versión 20 o superior.
- ✓«Claude CLI not found»: si claude está en una ruta poco habitual, indícala en CLAUDE_CLI_PATH dentro de .env.local (en Windows, búscala con where claude).
- ✓Puerto 3000 ocupado: /stop para liberarlo o /start 3001 para usar otro.
- ✓La exportación falla o se cuelga: borra node_modules y reinstala para que vuelva a descargar Chromium; en Linux puede faltar alguna librería del sistema.
- ✓Claude ignora tus colores: abre la configuración de marca y comprueba que están guardados; se inyectan en cada petición.
- ✓Ante cualquier duda, ejecuta /doctor: te dice cuál de estos casos aplica.
Preguntas frecuentes
Sí, el código es abierto con licencia MIT. Solo pagas el uso de Claude que ya tengas contratado, porque el agente funciona con tu instalación de Claude Code.
Puedes arrancar el editor y exportar diapositivas estáticas, pero sin Claude Code no hay chat ni generación con IA.
No. Exporta un ZIP con los PNG al tamaño correcto y tú los subes, lo que te permite revisar todo antes de publicar.
Los tres formatos que exporta encajan también en LinkedIn (documentos e imágenes), Facebook y las historias de cualquier red vertical. Ajusta el tono del prompt al canal.
No. Marca, logos, referencias y carruseles se guardan en tu ordenador. Lo único que sale es la conversación con Claude a través de Claude Code.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.