Saltar al contenido principal

1. Introducción a DivZone AI

Bienvenido a DivZone AI, tu espacio de trabajo con IA para crear experiencias web estáticas. Esta guía te ayudará a comprender qué es DivZone, cómo funciona y por qué es una herramienta poderosa para desarrollar e iterar proyectos web rápidamente.

1.1 ¿Qué es DivZone AI?​

DivZone AI es un espacio de trabajo asistido por IA que te permite generar, previsualizar y perfeccionar experiencias web estáticas (sitios web creados con HTML, CSS y JavaScript) mediante una conversación natural con un asistente de IA.

Imagínalo como tener a un desarrollador web senior a tu lado que puede convertir tus ideas en código funcional al instante. Describes lo que quieres y DivZone genera los archivos por ti.

Lo que SÍ puedes crear​

  • Páginas de destino y sitios de marketing
  • Prototipos de componentes de interfaz de usuario
  • Paneles de datos con datos JSON
  • Sitios de documentación
  • Demostraciones interactivas y pruebas de concepto
  • Cualquier experiencia web estática que puedas imaginar

Lo que DivZone AI NO es​

  • No es una plataforma de alojamiento completa — DivZone se centra en la creación, la previsualización y la exportación. El código final se implementa en tu propio alojamiento (Vercel, Netlify, buckets estáticos, etc.).

  • No es un entorno de ejecución de backend — La vista previa solo ejecuta archivos estáticos. No se ejecuta Node.js, Java ni código del lado del servidor dentro de la vista previa.

  • No es un pipeline de compilación de React/Next.js — Si bien puedes escribir patrones similares a los de React, la plataforma genera archivos HTML/CSS/JS estáticos. Los frameworks pesados que requieren empaquetadores (React, Vue, aplicaciones Svelte, Next.js) quedan fuera del alcance.

1.2 Filosofía del producto​

DivZone AI se basa en tres principios fundamentales:

Iteración rápida​

Todo el flujo de trabajo está diseñado para la velocidad. Escribes una instrucción, la IA genera el código y ves el resultado al instante en la vista previa en tiempo real. Sin esperas para compilaciones ni configuraciones complejas. Este ciclo de retroalimentación rápida te permite experimentar libremente y perfeccionar tus ideas rápidamente.

tip

No intentes que todo sea perfecto en una sola indicación. Empieza con una idea general, observa qué produce la IA y luego itera con indicaciones posteriores. Cada iteración se basa en la anterior.

Vista previa en entorno aislado​

Cada generación se ejecuta en una vista previa segura y aislada dentro de tu navegador. Esto significa:

  • Puedes experimentar con seguridad sin afectar a nada más.
  • La vista previa está en un entorno aislado (sin acceso a tus archivos locales).
  • Las API externas funcionan sujetas a las políticas CORS del navegador.
  • Puedes ver tus cambios en tiempo real a medida que la IA los genera.
tip

Usa la vista previa en vivo para probar tu proyecto mientras se compila. La vista previa se actualiza automáticamente cuando se modifican los archivos.

Exportaciones portátiles​

Todo lo que crees en DivZone es tuyo. Puedes:

  • Descargar archivos individuales
  • Descargar el proyecto completo como un archivo ZIP
  • Copiar el código directamente al portapapeles
  • Compartir un enlace público a la vista previa

Los archivos exportados son HTML, CSS y JavaScript estándar; sin formatos propietarios ni dependencia de un proveedor. Puedes abrirlos en cualquier editor de código, subirlos a cualquier plataforma de alojamiento o compartirlos con quien quieras.

tip

Cuando estés satisfecho con tu proyecto, descarga el archivo ZIP e impleméntalo en tu hosting preferido (Netlify, Vercel, GitHub Pages, etc.) sin necesidad de modificaciones.

El proceso​

  1. Escribes una sugerencia en el chat describiendo lo que quieres crear.
  2. La sugerencia se envía a la API de DivZone, que la dirige al modelo de IA correspondiente.
  3. La IA genera código y lo envía como archivos (HTML, CSS, JS, JSON).
  4. El código aparece en el panel del editor con una vista previa en tiempo real.
  5. Puedes refinarlo editando el código directamente o solicitando cambios a la IA.
  6. Cuando estés listo, exportas tu proyecto como archivos individuales o un archivo ZIP.

El entorno de ejecución de la vista previa​

La vista previa en tiempo real ejecuta solo recursos estáticos. Cuando ves tu proyecto en la vista previa:

  • Los archivos HTML renderizan la estructura.
  • Los archivos CSS dan estilo al contenido.
  • Los archivos JavaScript añaden interactividad.
  • Los archivos JSON proporcionan datos.

La vista previa se ejecuta en un iframe, lo que significa que está aislada del resto de la interfaz de DivZone. Esto te mantiene seguro mientras experimentas.

tip

Si tu proyecto utiliza API externas, recuerda que las políticas CORS del navegador se aplican en la vista previa. Es posible que algunas API no funcionen en el iframe aislado, pero funcionarán correctamente cuando se alojen en tu propio dominio.

1.3 Puntos clave​

  • DivZone AI genera experiencias web estáticas (HTML/CSS/JS) a partir de indicaciones en lenguaje natural.
  • La plataforma prioriza la iteración rápida: indicar, previsualizar, refinar, repetir.
  • Todas las exportaciones son archivos estándar y portátiles; sin dependencia de un proveedor.
  • La vista previa está aislada y es segura.
  • Puedes usar varios modelos de IA según tus necesidades.

¿Listo para empezar? Empieza a crear tu primera app con IA o ve a la siguiente sección: Primeros pasos