Saltar al contenido principal

2. Primeros pasos

Esta guía te acompaña en tu primera experiencia con DivZone AI, desde el acceso a la plataforma hasta la generación de tu primer proyecto.

2.1 Acceso a la plataforma​

DivZone AI es una aplicación web; no requiere instalación. Simplemente abre tu navegador y accede a ai.div.zone/chat para empezar a generar tu primera página web con inteligencia artificial.

Requisitos​

  • Un navegador web moderno (Chrome, Firefox, Edge, Safari)
  • Conexión a internet
  • JavaScript habilitado
tip

Para una mejor experiencia, usa Chrome o Firefox. La vista previa en vivo y el editor de código funcionan mejor en estos navegadores.

2.2 Tu primera generación​

Vamos a crear tu primer proyecto. Sigue estos pasos:

Paso 1: Abre el chat​

Cuando accedas a DivZone, verás una interfaz de chat con un campo de texto en la parte inferior. Aquí es donde describes lo que quieres crear.

Paso 2: Escribe una solicitud​

Escribe una solicitud sencilla como:

Crea una página de destino para una cafetería.

Paso 3: Enviar​

Presiona Entrar o haz clic en el botón Enviar para enviar tu solicitud.

Paso 4: Observa la generación​

La IA comenzará a generar tu proyecto. Verás:

  1. Mensajes de estado: «Procesando…», «Escribiendo archivos…»

  2. Archivos apareciendo en el panel de código

  3. Vista previa en vivo que se actualiza en tiempo real

Paso 5: Explora tu proyecto​

Una vez finalizada la generación, tendrás:

  • Un árbol de archivos en el panel izquierdo que muestra todos los archivos generados
  • Un editor de código que muestra el contenido del archivo seleccionado
  • Una vista previa en vivo que muestra tu proyecto renderizado en un iframe
tip

La primera generación podría tardar un poco más mientras la IA se inicializa. Las generaciones posteriores serán más rápidas.

2.3 Comprensión de la interfaz​

La interfaz de DivZone se divide en varias áreas clave:

Encabezado​

  • Logotipo — Haz clic para ir a la página de inicio
  • Menú de usuario — Perfil, créditos, cerrar sesión

Barra lateral de historial​

  • Muestra tus proyectos recientes

  • Fija proyectos importantes para un acceso rápido

  • Busca en tu historial de proyectos

  • Archiva proyectos antiguos para mantener todo organizado

Editor de código​

  • Muestra el contenido del archivo seleccionado
  • Resaltado de sintaxis para HTML, CSS, JS y JSON
  • Edita archivos directamente en el editor
  • Barra de pestañas para cambiar entre archivos abiertos

Vista previa en vivo​

  • Muestra tu proyecto renderizado en tiempo real
  • Se actualiza automáticamente cuando los archivos cambian
  • Aislado en un iframe para mayor seguridad

Entrada de chat​

  • Indicaciones de escritura para generar o modificar proyectos
  • Selecciona el modelo de IA en el menú desplegable.
  • Botón Enviar para enviar tu indicación.

2.4 Tutorial del primer proyecto​

Veamos un flujo de trabajo completo:

1. Generar un proyecto​

Indicación: "Crea una página de portafolio personal con una sección principal, información sobre mí, habilidades y un formulario de contacto".

La IA generará:

  • index.html— Estructura de la página principal
  • styles.css— Estilismo
  • script.js— Interactividad (manejo de formularios, desplazamiento suave)

2. Explorar los archivos​

Haz clic en cada archivo del árbol de archivos para ver su contenido en el editor de código. La vista previa se actualizará para mostrar el impacto del archivo seleccionado.

3. Realizar una pequeña edición​

Haz clic directamente en el editor de código y realiza un pequeño cambio, como actualizar el título principal. La vista previa se actualiza automáticamente.

4. Solicitar un cambio​

Escribe una sugerencia de refinamiento: "Cambiar la combinación de colores a modo oscuro con detalles azules".

La IA actualizará los archivos relevantes conservando tus ediciones manuales.

5. Descargar tu proyecto​

Haz clic en el botón Descargar para obtener un archivo ZIP con todo tu proyecto.

2.5 Consejos para buenas sugerencias​

La calidad de tu generación depende en gran medida de la sugerencia. Aquí tienes algunos consejos:

Sé específico​

❌ "Make a website"
✅ "Create a landing page for a bakery with a hero section, menu grid, and contact form"

Describe el estilo​

❌ "Create a portfolio"
✅ "Create a modern, minimalist portfolio page with a dark theme, smooth animations, and a grid layout for projects"

Estructura de la mención​

❌ "Create a blog page"
✅ "Create a blog page with a header, featured posts section, article grid with cards, sidebar with categories, and footer"

Incluir preferencias técnicas​

❌ "Create a dashboard"
✅ "Create a dashboard layout with a sidebar navigation, top header bar, main content area with cards, and use Tailwind CSS for styling"
tip

No es necesario que todo salga perfecto en la primera pregunta. Empieza con una idea básica, observa qué produce la IA y perfecciona con las siguientes preguntas.

2.6 ¿Qué sigue?​

Ahora que has creado tu primer proyecto, puedes:

  • Perfeccionarlo con las siguientes preguntas
  • Editar archivos directamente en el editor de código
  • Exportar tu proyecto como un archivo ZIP
  • Compartir un enlace de vista previa pública
  • Obtener más información sobre funciones específicas en las siguientes secciones

¿Listo para profundizar? Ve a la siguiente sección: Authentication & Accounts