Chatea con A.R.I.S.

Diseña tu primera página web con IA

Aprende a diseñar páginas modernas sin saber programación

Taller práctico — Instituto Internacional de Intraemprendimiento

Crea tu primera página web con Inteligencia Artificial (sin saber programar)

Tu primera web, construida paso a paso con IA + despliegue en Internet.

Taller presencial · Aula informática · Nivel principiante

¿Qué vamos a hacer hoy?

Vamos a crear una página web informativa real para tu negocio, proyecto o idea, utilizando herramientas de Inteligencia Artificial que hacen el trabajo difícil por ti.

No importa si nunca has usado estas plataformas. Vamos a comenzar desde cero:

  • Abrir Google AI Studio y crear tu cuenta (con Google).
  • Abrir el GPT del taller (para generar el súper prompt).
  • Crear tu web en AI Studio con ese prompt.
  • Publicar tu proyecto en GitHub (un repositorio).
  • Desplegar tu web en Vercel (para que quede online con enlace público).
  • Configurar variables si el proyecto las necesita (te guiaremos).

Herramientas que vamos a utilizar

Haz clic en cada recuadro para abrir la herramienta. Deja todas abiertas.

1. Google AI Studio

Crearemos la web con IA y generaremos el proyecto listo para publicar.

Abrir Google AI Studio

2. ChatGPT (GPT del taller)

Asistente que te hará preguntas y generará tu súper prompt final.

Abrir GPT — Súper Prompt

3. GitHub

Guardaremos el proyecto como repositorio para luego desplegarlo.

Abrir GitHub

4. Vercel

Publicaremos tu web en Internet con un enlace público.

Abrir Vercel

¿Qué es Google AI Studio? (Explicación fácil)

Google AI Studio es una plataforma de Google para crear experiencias con IA. En este taller lo usaremos para generar el proyecto de tu página web con instrucciones claras (nuestro súper prompt) y dejarlo listo para publicarlo.

¿Qué es “desplegar” una web? (Explicación fácil)

“Desplegar” significa poner tu web en Internet para que cualquiera pueda verla con un enlace. Usaremos GitHub para guardar el proyecto y Vercel para publicarlo.

Checklist antes de empezar

  • Tienes abierta tu cuenta en Google AI Studio (con tu Google).
  • Tienes abierto el GPT del taller.
  • Creaste tu cuenta en GitHub con el mismo correo/Google (recomendado).
  • Creaste tu cuenta en Vercel con el mismo correo/Google (recomendado).
  • Sabes el nombre de tu negocio o proyecto.
  • Tienes claro qué haces (aunque sea en una frase sencilla).

Paso 1 — Abre Google AI Studio y crea tu cuenta

  1. Ve a: https://aistudio.google.com/
  2. Inicia sesión con tu cuenta de Google.
  3. Si te pide confirmación/alta, completa el registro.
  4. Deja la pestaña abierta.

Paso 2 — Abre el GPT del taller (para crear tu súper prompt)

El GPT te hará preguntas simples. Responde con naturalidad y detalle.

Abrir GPT — Súper Prompt

Paso 3 — Genera tu “PROMPT FINAL”

El asistente te preguntará cosas sencillas como:

  • Nombre de tu negocio.
  • Qué ofreces y a quién.
  • Estilo visual y colores.
  • Secciones que quieres en tu web.

Al final te entregará un bloque tipo: 

PROMPT FINAL — LISTO PARA COPIAR Y PEGAR

Cópialo completo.

Paso 4 — Crea tu web en AI Studio (la parte mágica)

  1. Vuelve a Google AI Studio.
  2. Pega el PROMPT FINAL donde corresponda (según la dinámica del taller).
  3. Genera el proyecto y revisa que la estructura esté completa.
  4. Haz ajustes: textos, secciones, botones, imágenes (si aplica).

Consejo: si quieres que AI Studio te ayude a mejorar algo, puedes pedirle: 

Mejora el copy para que sea más persuasivo y claro.
Añade una sección de “Preguntas frecuentes” y una de “Contacto”.

Paso 5 — Crea tu cuenta en GitHub (si no la tienes)

  1. Abre: https://github.com/
  2. Regístrate (recomendado: con tu cuenta Google).
  3. Verifica el correo si te lo pide.

Paso 6 — Publica tu proyecto en un repositorio de GitHub

  1. Dentro de AI Studio, busca la opción de publicar / exportar a GitHub (o vincular repositorio).
  2. Conecta tu cuenta de GitHub cuando lo solicite.
  3. Crea un repositorio nuevo con el nombre del proyecto.
  4. Confirma y espera a que el repositorio se genere.

Paso 7 — Crea tu cuenta en Vercel y despliega tu web

  1. Abre: https://vercel.com/
  2. Regístrate (recomendado: con Google).
  3. En Vercel, elige “New Project” y selecciona tu repositorio de GitHub.
  4. Haz clic en Deploy.

En pocos minutos tendrás un enlace público de tu web.

Paso 8 — Variables de entorno (si Vercel las pide)

A veces Vercel necesita “variables” para que el proyecto funcione (por ejemplo, claves o configuraciones). Si aparece un aviso:

  1. Vuelve a AI Studio y pregúntale: “Dime qué variables de entorno usa este proyecto para desplegarlo en Vercel.”
  2. Copia la lista de variables.
  3. En Vercel, ve a la sección Environment Variables y pégalas una por una.
  4. Guarda y vuelve a desplegar.

Enlaces importantes

Extra (opcional): acceso a Lovable

Si quieres tener también Lovable listo (por si lo usamos como alternativa o demo), regístrate con este enlace: https://lovable.dev/invite/3N7V6BQ

Comandos que puedes pedirle a la IA

Si quieres mejorar tu web o hacer cambios rápidos, puedes escribirle instrucciones directas a la IA. Copia alguno de estos comandos y pégalo en AI Studio.

Mejorar los textos

Mejora el copy de esta página web para que sea más claro, persuasivo y profesional.

Agregar sección FAQ

Añade una sección de preguntas frecuentes (FAQ) con 5 preguntas comunes de los clientes.

Mejorar el diseño

Haz el diseño más moderno, minimalista y profesional.

Agregar sección Sobre Nosotros

Añade una sección "Sobre nosotros" que explique la historia del proyecto.

Mejorar los botones

Optimiza los botones de llamada a la acción para que aumenten las conversiones.

Optimización SEO

Optimiza esta página web para SEO incluyendo títulos, descripciones y palabras clave.

Agregar testimonios

Añade una sección de testimonios de clientes con 3 ejemplos.

Agregar formulario de contacto

Añade un formulario de contacto simple con nombre, email y mensaje.

Mejorar estructura de la web

Reorganiza la estructura de esta web para que tenga mejor experiencia de usuario.

Variables de entorno

Dime qué variables de entorno usa este proyecto para desplegarlo correctamente en Vercel.
Explore
Drag
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

para conocer más visita nuestra Política de cookies y Política de privacidad