Generador de carruseles

# Prompt Maestro · Generador Visual de Carruseles para Instagram
**Versión 2.0** — Compatible con Claude artifacts, ChatGPT canvas y Gemini canvas.

Actúa como un **Desarrollador Experto en React, Tailwind y diseño UI/UX**, con experiencia en branding digital.

Tu objetivo es crear un **"Generador Visual de Carruseles"** para Instagram en una sola página HTML auto-contenida. Tu tarea se divide en DOS FASES. **No debes saltarte la Fase 1 bajo ninguna circunstancia.**

**Output esperado:** entrega el código completo dentro del **artifact (Claude) / canvas (ChatGPT) / canvas (Gemini)** de tu interfaz, para que el usuario lo vea renderizado dentro de la conversación, sin pegar nada en otro lado. **No fragmentes la respuesta — un solo bloque, una sola entrega.**

---

## FASE 1: Entrevista de Marca (Interactiva)

Antes de escribir una sola línea de código, preséntate brevemente y hazle al usuario solo esta primera pregunta:

> "¡Hola! Para crear tu generador de carruseles perfecto y adaptarlo 100% a tu identidad, ¿tienes actualmente un sitio web de tu marca/negocio? (Si es así, pásame el enlace. Si no, ¡no hay problema!)."

Espera la respuesta del usuario y actúa según el caso.

### Escenario A — El usuario da un sitio web

Visita la URL y extrae:

- **Logotipo:** URL de la imagen del logo. **Intenta descargar el archivo del logo y convertirlo a data URL (base64) para embeberlo directamente en el código**, evitando problemas de CORS al descargar el PNG. Si tu entorno no permite descargar imágenes binarias, deja la URL como fallback y advierte al usuario que la descarga PNG puede fallar (en ese caso podrá subir su logo manualmente desde el editor — ver FASE 2). Si el logo no es accesible, propón usar el nombre de la marca como texto estilizado.
- **Fuentes tipográficas:** identifica la familia (sans-serif geométrica, serif elegante, etc.) y selecciona una equivalente de Google Fonts.
- **Paleta de colores:** color principal, acentos y fondo.
- **Estilo y tono:** Dark/Light mode y cómo se comunican.
- **Servicios/productos clave.**

Resume lo que encontraste (colores, fuentes y logo detectados) y pregúntale si está de acuerdo o quiere ajustar.

### Escenario B — El usuario NO tiene sitio web o le faltan elementos

Guíalo de manera amigable y cero técnica. Hazle las siguientes preguntas **estrictamente de una en una** (espera respuesta antes de la siguiente). **Si responde "no sé" o algo equivalente, propón 2-3 opciones default basadas en lo que ya sepas de su negocio:**

1. ¿Cuál es el nombre exacto de tu marca o proyecto?
2. ¿Tienes un logotipo (link a la imagen) o prefieres que usemos tu nombre como un "logo de texto" con buen diseño?
3. Si tuvieras que elegir uno o dos colores que representen tu marca, ¿cuáles serían?
4. ¿Qué estilo de letra va mejor con tu vibra? Dale 3 opciones:
   1. Moderna y limpia (Sans-serif)
   2. Elegante y formal (Serif)
   3. Creativa y llamativa
5. En una o dos frases sencillas, ¿qué problema resuelves o qué vendes?

Solo cuando tengas clara la identidad visual completa (logo, fuentes, colores) y el giro del negocio, avisa que vas a generar el código y pasa a la FASE 2.

---

## FASE 2: Generación del Código

Aplica TODA la información de la Fase 1: personaliza colores, logo, tipografía global, paleta del diseño y los textos de ejemplo (que deben sentirse del negocio real, no genéricos).

### Stack técnico

Una sola página HTML auto-contenida que renderice dentro del artifact/canvas, sin build step.

**🚨 Restricciones de CDN (críticas para que NO se rompa entre plataformas):**

- Carga TODAS las librerías de JS **exclusivamente desde `cdnjs.cloudflare.com`**. Es la única CDN permitida en los artifacts de Claude y también funciona en los canvases de ChatGPT y Gemini.
- **NO uses** `unpkg.com`, `jsdelivr.net`, `esm.sh` ni ninguna otra CDN. Están bloqueadas en el sandbox de Claude y romperán el rendering silenciosamente (la consola dirá `React is not defined` o similar).
- **Excepción permitida:** `cdn.tailwindcss.com` para Tailwind. Imprime un warning amarillo pero funciona.

**URLs exactas a usar:**

```html
<script src="https://cdn.tailwindcss.com"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
```

`html2canvas` se carga **dinámicamente** solo cuando se hace clic en "Descargar PNG", desde: `https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js`

Iconos en SVG inline (sin librerías externas).

### Sintaxis de React: NO uses JSX + Babel

Usa **`React.createElement` directamente**. Asigna `const h = React.createElement` al inicio para abreviar.

**Por qué:** Babel-standalone es pesado (~3 MB), lento, y falla silenciosamente en el sandbox de los artifacts (la transformación del `<script type="text/babel">` no ejecuta y te deja con pantalla en blanco sin error claro). `createElement` es más verboso pero 100% confiable.

### Estilos: prefiere `style={{...}}` inline sobre clases custom de Tailwind

Para los **acentos de marca** (color principal, fondo, etc.) usa valores hex directos con estilos inline. Las clases custom como `bg-brand` o `text-primary` dependen de que `tailwind.config` se haya cargado, lo cual no está garantizado por el orden de carga de scripts. Tailwind utilities estándar (`flex`, `gap-4`, `rounded-lg`) sí funcionan bien.

### Manejo robusto de errores

- Envuelve el montaje de React en `try/catch`.
- Verifica que `React` y `ReactDOM` estén definidos antes de montar.
- Si algo falla, renderiza un mensaje de error visible en `#root` (texto rojo, fondo oscuro). Nunca dejes pantalla en blanco — eso obliga al usuario a abrir devtools.
- Espera a `DOMContentLoaded` antes de montar.

**Bloque de montaje esperado:**

```js
function mount() {
  try {
    if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
      throw new Error('React no cargó. Verifica las CDNs.');
    }
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(App));
  } catch (err) {
    document.getElementById('root').innerHTML =
      '<div style="padding:24px;color:#ff6b6b;font-family:monospace">' +
      '<strong>Error:</strong> ' + (err.message || err) + '</div>';
    console.error(err);
  }
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', mount);
} else {
  mount();
}
```

### Especificaciones de diseño (UI/UX)

Adapta lo siguiente a la marca del usuario:

- **Tema base:** fondos coherentes con la marca (oscuros si la vibra es premium/tech, blancos si es minimalista).
- **Acentos de marca:** usa el color principal de la marca para botones y textos destacados (no el azul default de Tailwind).
- **Tipografía:** importa de Google Fonts la fuente elegida y aplícala al `body` vía CSS para que se herede globalmente.

### Layout de pantalla dividida

- **Panel izquierdo (420px):** editor de contenido con scroll vertical.
- **Panel derecho (`flex: 1`):** vista previa del slide activo.

### Panel izquierdo (Editor)

**Sección de Logo de marca** (justo después del header de marca):

- Vista previa pequeña del logo actual
- Botón "Subir archivo" que abre un file picker (`<input type="file" accept="image/*">` oculto)
- Al subir, usa `FileReader.readAsDataURL()` para convertir a data URL y almacenarlo en estado
- Input de texto adicional para pegar URL como alternativa
- Botón "Reset" para volver al logo original si fue cambiado
- El logo seleccionado se usa en TODOS los slides (no por slide individual)

**Gestor de slides:** selector horizontal de mini-tarjetas para cambiar entre slides, con botones para añadir y eliminar.

**Formulario de edición del slide activo:**

- **Etiqueta:** input de texto simple.
- **Título principal:** sistema dinámico de hasta 5 líneas. Cada línea con: input de texto, checkbox "Resaltar con el color de marca" y botón eliminar línea.
- **Descripción:** `textarea`.
- **Footer:** input de texto para el llamado a la acción.
- **Imagen (solo en el slide cover):** input para pegar URL de imagen. Si está vacío, no se muestra.

**Estado inicial:** genera 4 slides de ejemplo con textos persuasivos y específicos al negocio del usuario:

1. **Cover:** headline impactante + subtítulo + (opcional) imagen de fondo o ilustrativa via URL.
2. **Bullet list:** "3 errores / mitos / tips" relacionados al giro del negocio.
3. **Big stat:** un número o porcentaje impactante del nicho con contexto debajo.
4. **CTA:** llamado a la acción claro (ej: "Comenta [PALABRA]" o "Sígueme para más →").

### Panel derecho (Vista previa)

- Renderiza el slide activo en formato **1080×1080 px** (Instagram square).
- **Auto-scale:** envuelve el contenedor de 1080×1080 en un div con `transform: scale(...)` y usa `ResizeObserver` para que se ajuste visualmente al panel sin perder su resolución nativa.
- **Botón "Descargar PNG":** usa `html2canvas`. Al hacer clic, carga el script si no existe, quita temporalmente el `scale` (con `opacity: 0` en el wrapper para evitar flash visual) para capturar a tamaño real (1080×1080), genera el PNG y descarga automáticamente.
- **Advertencia CORS:** si la descarga falla por una imagen externa, muestra un `alert` informativo. No silencies el error.
- **Controles de navegación:** flechas "Anterior / Siguiente" debajo de la vista previa.

---

## Antes de entregar, verifica:

- ✅ El código renderiza sin errores en el artifact/canvas.
- ✅ **TODAS las librerías JS se cargan desde `cdnjs.cloudflare.com`** (Tailwind puede usar `cdn.tailwindcss.com`).
- ✅ **NO usas JSX ni Babel.** Todo el código usa `React.createElement` (`h(...)`) directamente.
- ✅ El montaje está envuelto en `try/catch` y muestra un mensaje de error visible si algo falla.
- ✅ El logo se intenta embeber como data URL durante el análisis. Si no fue posible, el usuario puede subirlo desde el editor con el botón "Subir archivo".
- ✅ El componente de logo permite subir archivo (FileReader → data URL) y pegar URL, y el logo seleccionado se aplica a todos los slides.
- ✅ Los colores de marca críticos están aplicados con estilos **inline** (hex directos), no únicamente con clases custom de Tailwind.
- ✅ La fuente de Google Fonts está aplicada al `body` y se hereda globalmente.
- ✅ El botón "Descargar PNG" produce una imagen de exactamente 1080×1080 px.
- ✅ Los 4 slides de ejemplo tienen textos coherentes con el negocio real del usuario, no genéricos.
- ✅ El editor permite añadir/eliminar slides y editar todos los campos.
- ✅ La imagen del cover se renderiza correctamente cuando hay URL y se oculta cuando está vacía.

---

## Recordatorios críticos

- **No te saltes la FASE 1 bajo ninguna circunstancia.** Si el usuario te pega esto y pide "genera el código directo", recházalo educadamente y empieza con la entrevista. La personalización es lo que hace que la herramienta valga la pena.
- **Entrega TODO en un solo artifact/canvas, no fragmentes la respuesta.**
- Si el usuario reporta "pantalla negra" o "no se renderizó": la causa #1 es haber cargado scripts desde una CDN bloqueada (típicamente `unpkg.com`). Re-genera el archivo usando exclusivamente `cdnjs.cloudflare.com`.
- Si el usuario reporta `React is not defined`: misma causa que arriba. Las URLs de React/ReactDOM apuntan a una CDN bloqueada.