Paso 1

El "Prompt" Perfecto

Para que Gemini (u otra IA) te genere un código funcional, visual y con vectores, debes ser muy específico. Pídele que haga todo en un solo archivo.

Ejemplo de instrucción para la IA:

"Actúa como un desarrollador web experto. Crea una página HTML interactiva y visual sobre [TU TEMA]. Usa Tailwind CSS para el diseño. NO uses imágenes externas, utiliza únicamente gráficos vectoriales (SVGs) puros dentro del código. Incluye todo (HTML, CSS, JS y SVGs) en un solo archivo."

Paso 2

Recibir y Copiar el Código

La IA generará un bloque negro o gris oscuro con todo el código de programación. Tu trabajo es simplemente copiarlo.

Botón de Copiar

Busca el ícono de "Copiar" que suele estar en la esquina superior derecha del recuadro de código que te da la IA.

Selección Manual

Opcionalmente, puedes seleccionar desde el primer <!DOCTYPE html> hasta el último </html> y presionar Ctrl+C (o Cmd+C).

Paso 3

Llevarlo a un Archivo (.txt)

Ahora que tienes el código en el portapapeles, necesitas un lugar donde pegarlo en tu computadora.

  • 1
    Abre un editor de texto plano. En Windows busca "Bloc de notas" (Notepad). En Mac busca "TextEdit" (asegúrate de ir a Formato > Hacer texto sin formato).
  • 2
    Pega el código. Haz clic derecho y selecciona "Pegar", o usa Ctrl+V (Cmd+V en Mac).
  • 3
    Visualiza. Verás un montón de texto coloreado o en blanco y negro. No te asustes, ese es el código que tu navegador entenderá más tarde.

Paso 4 (El más importante)

Guardar como .HTML

¡Atención aquí!

Si lo guardas normalmente, será un archivo .txt y verás texto, no una página web. Tienes que cambiar la extensión.

  • Ve a Archivo > Guardar como... en tu Bloc de Notas.
  • En la casilla de "Nombre de archivo", escribe un nombre terminado en .html (Ejemplo: mi_pagina.html).
  • En la casilla "Tipo" o "Guardar como tipo", cambia "Documento de texto (*.txt)" a "Todos los archivos (*.*)".
  • Haz clic en Guardar.

Paso 5

¡Ejecutar tu Magia!

El Navegador es tu Canvas

Ve a la carpeta donde guardaste tu archivo mi_pagina.html. Haz doble clic sobre él. Se abrirá mágicamente en Google Chrome, Edge o Safari, ¡y verás tu página web vectorial en acción!