Saltar al contenido principal

4. El Generador de IA (Producto Principal)

Esta guía explica la experiencia principal de generación de IA: cómo funciona el generador, su ciclo de vida y cómo interactuar con él de forma eficaz.

4.1 El Espacio de Trabajo del Generador​

El espacio de trabajo del generador es la interfaz principal donde se crean y perfeccionan los proyectos. Consta de varios paneles integrados:

┌─────────────────────────────────────────────────────────┐
│  Header: Project Title, Model Selector, Actions Menu    │
├──────────┬──────────────────────────┬───────────────────┤
│          │                          │                   │
│ History  │   Code Editor            │   Live Preview    │
│ Sidebar  │   (Tab bar + Editor)     │   (iframe)        │
│          │                          │                   │
│          ├──────────────────────────┤                   │
│          │   Chat Input             │                   │
│          │   (Prompt + Controls)    │                   │
└──────────┴──────────────────────────┴───────────────────┘

Componentes clave​

  • Entrada de chat — Aquí escribes las indicaciones para generar o modificar proyectos.
  • Editor de código — Muestra y permite editar los archivos generados.
  • Vista previa en vivo — Muestra tu proyecto renderizado en tiempo real.
  • Barra lateral de historial — Acceso a tus proyectos anteriores.
  • Árbol de archivos — Muestra todos los archivos del proyecto actual.

4.2 Ciclo de vida de la generación​

Cada generación pasa por una serie de estados:

1. Inactivo​

El generador está listo y esperando la entrada. Puedes escribir una indicación, seleccionar un modelo y configurar las opciones.

2. Cargando​

Has enviado una indicación. La IA se está inicializando y preparando para generar. Verás el mensaje de estado "Pensando...".

3. Transmisión​

La IA está generando código y transmitiéndolo en tiempo real. Verás:

  • Los archivos aparecen uno a uno en el árbol de archivos.

  • El código aparece en el editor a medida que se recibe cada archivo.

  • La vista previa se actualiza a medida que se añaden o modifican archivos.

  • Indicador de progreso que muestra el progreso de la generación.

4. Completado​

Se han generado todos los archivos. El proyecto está listo para:

  • Revisar — Examinar el código generado.

  • Editar — Realizar cambios manuales.

  • Refinar — Solicitar modificaciones a la IA.

  • Exportar — Descargar o compartir.

5. Error​

Algo salió mal durante la generación. Los errores comunes incluyen:

  • Modelo no disponible — El modelo seleccionado no está disponible temporalmente.

  • Créditos insuficientes — No tienes suficientes créditos para modelos premium.

  • Solicitud demasiado larga — Tu solicitud supera la longitud máxima.

  • Límite de solicitudes — Demasiadas solicitudes en poco tiempo.

  • Servicio no disponible — El servicio de IA no está disponible temporalmente.

tip

La mayoría de los errores se pueden solucionar reintentando. Si se produce un error, espera un momento e inténtalo de nuevo.

4.3 Transmisión vs. Sin transmisión​

DivZone admite dos modos de entrega de generación:

Transmisión (Predeterminado)​

La IA envía los resultados a medida que se generan. Ventajas:

  • Mayor velocidad percibida: Los resultados se ven inmediatamente.
  • Actualizaciones progresivas: Los archivos aparecen uno a uno.
  • Vista previa en tiempo real: Las actualizaciones de la vista previa se actualizan a medida que llegan los archivos.
  • Retroalimentación temprana: Puede ver la dirección y ajustar.

Sin transmisión​

La IA envía el resultado completo de una sola vez. Ventajas:

  • Gestión más sencilla: Todo llega en una sola respuesta.

  • Estado consistente: Sin actualizaciones parciales.

  • Mejor para proyectos sencillos: Menor sobrecarga.

tip

La transmisión en directo está habilitada por defecto y se recomienda para la mayoría de los casos de uso. La opción sin transmisión es útil para la generación de archivos únicos y sencillos.

4.4 Interfaz de chat​

El chat es la principal forma de interactuar con la IA.

Funciones de entrada​

  • Entrada de texto: escribe tu mensaje (admite varias líneas).

  • Selector de modelo: elige el modelo de IA que deseas usar.

  • Botón "Enviar": envía tu mensaje.

  • Botón "Cancelar": detiene una generación en curso.

Historial de mensajes​

El chat guarda un historial de tus mensajes y las respuestas de la IA durante la sesión actual. Puedes:

  • Desplazarte por los intercambios anteriores.

  • Reenviar un mensaje anterior.

  • Editar y reenviar un mensaje anterior.

4.5 Selección de modelo​

Puedes elegir el modelo de IA que deseas usar para la generación. Cada modelo tiene diferentes ventajas:

  • Gemini | Gratuito | Prototipos rápidos, páginas sencillas

  • DeepSeek Flash | Gratuito | Generaciones rápidas, diseños básicos

  • DeepSeek Pro | Premium | Proyectos avanzados con DeepSeek

  • GPT | Premium | Proyectos complejos con calidad de producción

  • Claude Sonnet | Premium | Proyectos bien estructurados con múltiples archivos

  • Claude Opus | Premium | Aplicaciones complejas con muchas funciones

tip

Empieza con un modelo gratuito (Gemini o DeepSeek Flash) para experimentar. Cambia a modelos premium cuando necesites mayor calidad o proyectos más complejos.

4.6 El editor de código​

El editor de código le permite ver y modificar los archivos generados.

Características​

  • Resaltado de sintaxis — Código de colores para HTML, CSS, JS y JSON
  • Barra de pestañas — Cambie entre los archivos abiertos
  • Árbol de archivos — Explore todos los archivos del proyecto
  • Edición en línea — Haga clic y edite cualquier archivo
  • Botón de formato — Formatee el código automáticamente
  • Botón de descarga — Descargue archivos individuales

Gestión de pestañas​

  • Pestañas abiertas — Archivos que ha abierto en el editor
  • Pestaña activa — El archivo que se muestra actualmente
  • Cerrar pestaña — Haga clic en la X de una pestaña
  • Indicador de modificación — Un punto en la pestaña indica los cambios no guardados
tip

Haz doble clic en un archivo en el árbol de archivos para abrirlo en una nueva pestaña. Puedes tener varios archivos abiertos a la vez.

4.7 Vista previa en vivo​

La vista previa en vivo muestra tu proyecto renderizado en un iframe.

Funcionalidades​

  • Actualizaciones en tiempo real: La vista previa se actualiza a medida que cambian los archivos.
  • Pruebas de adaptabilidad: Cambia el tamaño de la vista previa para probar diferentes tamaños de pantalla.
  • Entorno aislado: Aislado de la aplicación principal por motivos de seguridad.
  • Actualización automática: Se actualiza automáticamente cuando se modifican los archivos.

Limitaciones​

  • Restricciones CORS: Las llamadas a la API externa están sujetas a las políticas CORS del navegador.
  • Sin formularios: Es posible que el envío de formularios no funcione en el iframe aislado.
  • Sin ventanas emergentes: Las ventanas emergentes están bloqueadas.
  • Sin modales:alert(),confirm(),prompt()están bloqueados
tip

Usa la vista previa para probar la apariencia y la funcionalidad de tu proyecto. Para una prueba completa, descarga el proyecto y ábrelo en tu navegador.

4.8 Modo de clarificación​

Antes de generar código, la IA puede entrar en modo de clarificación cuando la solicitud es ambigua o necesita más información.

Cómo funciona​

  1. Envías una solicitud.
  2. La IA responde con preguntas de clarificación en lugar de generar código directamente.
  3. Respondes las preguntas en el chat.
  4. La IA genera el proyecto con el contexto completo.

Evento SSE clarify​

Cuando la IA entra en modo clarificación, el backend envía un evento clarify con:

{
  chatHistory: ChatMessage[],  // historial actualizado con las preguntas
  slug: string | null,
  remainingCredits?: number,
  creditsConsumed?: number,
}
tip

El modo clarificación no consume créditos adicionales. Solo se cobra cuando se genera código.

4.9 Promoción de tier (Tier Promotion)​

Si el modelo seleccionado no puede completar la generación (por ejemplo, por exceder el límite de tokens), el sistema puede promover automáticamente a un modelo más potente.

Cómo funciona​

  1. Envías una solicitud con un modelo determinado.
  2. El modelo alcanza su límite de contexto.
  3. El backend envía un evento tier-promotion con el modelo de origen y destino.
  4. El frontend reinicia el streaming con el nuevo modelo.
  5. La generación continúa sin interrupciones visibles.

Evento SSE tier-promotion​

{
  reason: "max_tokens",
  from: string,  // modelo original
  to: string,    // modelo más potente
}
tip

La promoción de tier es automática y transparente. Si ocurre, verás el modelo actualizado en la interfaz.

4.10 Mejora de la solicitud (Enhance Prompt)​

La función Mejorar convierte una solicitud breve en un informe técnico detallado antes de su generación:

  1. Escribe una solicitud breve: "Página de inicio de cafetería"
  2. Haz clic en Mejorar
  3. La IA la convertirá en un informe detallado (usando /ai/enhance-prompt)
  4. Revisa y edita la solicitud mejorada
  5. Haz clic en Generar para iniciar la generación
tip

La mejora de prompt también acepta un brandPresetId para contextualizar el estilo de la marca en la mejora.

4.11 Brand Presets en la generación​

Puedes aplicar un Brand Preset (kit de marca) a tus generaciones para que la IA use los colores, tipografía y estilo de tu marca.

Cómo funciona​

  1. Selecciona un Brand Preset en el selector de la entrada de chat.
  2. El brandPresetId se envía junto con el prompt al backend.
  3. La IA usa el contexto de marca para generar código con los estilos de tu marca.

Puntos clave​

  • Espacio de trabajo del generador: Entorno integrado para crear y perfeccionar proyectos.
  • Ciclo de vida de la generación: Inactivo → Cargando → Streaming → Processing → Completado / Error
  • Streaming SSE: Generación de archivos y actualizaciones de vista previa en tiempo real con batching de chunks.
  • Modo clarificación: La IA puede hacer preguntas antes de generar (evento clarify).
  • Promoción de tier: Reintento automático con modelo más potente si se excede el contexto.
  • Múltiples modelos de IA: Gratuito y Premium, obtenidos dinámicamente del backend.
  • Editor de código: Visualiza, edita y da formato a los archivos generados.
  • Vista previa en vivo: Renderizado en tiempo real en un iframe aislado.
  • Mejorar solicitud: Expande ideas breves en informes detallados.
  • Brand Presets: Aplica el estilo de tu marca a las generaciones.

¿Listo para aprender sobre los niveles de modelos de IA? Dirígete a la siguiente sección: AI Model Tiers