aprende ia.
Presentación 3 · Clase en vivo

Tu sitio web de marca personal con IA

Esta clase es exclusiva para estudiantes del curso. Escribe el correo con el que compraste y tu clave de acceso.

Esa clave no es. Revisa tu correo de bienvenida e inténtalo de nuevo.

¿No tienes la clave? Está en tu correo de bienvenida. ¿Aún no eres estudiante? Escríbele a Lala: @ia_con_lala

‹ Volver al hub

Índice de la Presentación 3

3
Presentación 3 · Jueves 23 de julio

Tu sitio web de marca personal con IA.

Hoy, sin saber programar y sin pagarle a nadie, vas a crear tu página de marca personal y la vas a dejar publicada en internet, gratis y para siempre.

De 0 a 100 con IA · Módulo Crea con IA
La ruta de hoy

Así vamos a trabajar hoy.

1Marca personal y las 3 palabras de internet30 min
2Diseña y crea tu sitio con Claude70 min
Descanso10 min
3Publícalo gratis con GitHub y Vercel50 min
4Práctica y cierre20 min

Tranqui, no necesitas saber nada de antemano. Vamos pasito a pasito y sales de aquí con tu sitio en línea.

01
Bloque 1 · 30 minutos

¿Qué es un sitio de marca personal?.

Es la página donde vives tú: quién eres, qué haces y cómo contactarte. Tu carta de presentación abierta 24 horas. Cuando alguien te googlea, esto es lo que quieres que encuentre.

Las 3 palabras clave

Solo tres cosas y ya entiendes internet.

1 La página

Es lo que la gente ve: tu foto, tu nombre, tus textos y tus botones. Como la vitrina de tu negocio, pero en la pantalla.

2 El dominio

Es tu dirección en internet, como tunombre.com. Es lo que la gente escribe para llegar a tu página, igual que la dirección de tu casa.

3 Publicar (u hosting)

Es poner tu página en internet para que todo el mundo la pueda ver. Hosting es el lugar donde vive tu web, prendida las 24 horas.

Lo que no puede faltar

Las 5 piezas de un sitio de marca personal.

👋
1 · Tu presentación Tu nombre, tu foto real y UNA frase que diga qué haces y a quién ayudas. Es lo primero que se ve.
📖
2 · Tu historia Un "Sobre mí" corto: de dónde vienes y por qué haces lo que haces. La gente conecta con personas, no con logos.
💼
3 · Lo que ofreces Tus servicios, tu contenido o tus productos, explicados en cristiano. Máximo 3 cosas.
4 · Tu prueba Testimonios, números o logros que demuestren que sabes de lo tuyo. Esto genera confianza.
📲
5 · Tu botón de contacto UN llamado claro: escríbeme al WhatsApp, sígueme, agenda conmigo. Sin esto, la visita se va y ya.

La clave es la sencillez: pocas secciones bien hechas venden más que una página llena de cosas.

Un ejemplo de verdad

Así puede quedar el tuyo.

Te hicimos un sitio de muestra para que veas la meta: una nutricionista con sus 5 piezas, botón de WhatsApp y todo. Ábrelo en tu celular y fíjate en lo sencillo y limpio que se ve.

El círculo con las iniciales es justo donde va tu foto. En un rato te enseño a ponerla.

Lo que cambió

Lo que antes valía una fortuna, hoy es rapidísimo.

Antes

Tenías que contratar a alguien que supiera programar. Esperabas semanas o meses, pagabas mucha plata y, si querías cambiar algo, volvías a pagar.

Ahora

Le describes tu sitio a la IA con tus propias palabras y lo tienes listo en minutos. Si algo no te gusta, se lo dices y lo cambia al instante. Y publicarlo es gratis.

Por eso hoy tú misma o tú mismo vas a hacerlo, sin depender de nadie.

02
Bloque 2 · 70 minutos

Primero diseña, luego construye.

Con Claude vas a hacer dos cosas, en este orden: primero en Claude Design defines cómo se ve tu sitio (el look, los colores, dónde va todo), y luego en Claude normal afinas los textos y descargas tu archivo listo para publicar.

El recorrido completo

Cuatro paradas, cada una con su papel.

🎨
1 · Claude Design Diseñas cómo se ve. Le describes tu marca y te arma el look en vivo: colores, layout, secciones. Aquí lo dejas bonito.
🤖
2 · Claude Afinas los textos con calma, pides cambios finos y descargas tu archivo index.html.
🗂️
3 · GitHub La caja fuerte donde vive el archivo de tu página (tu repo). Gratis, seguro y tuyo para siempre.
🚀
4 · Vercel La vitrina: toma tu archivo de GitHub y lo muestra al mundo, prendido 24 horas, con tu link. Gratis también.

En cristiano: Claude Design lo diseña, Claude lo afina, GitHub lo guarda y Vercel lo muestra.

¿De dónde saco ideas?

Inspírate en sitios que ya existen.

¿No sabes qué estilo quieres? Mira sitios reales, encuentra uno que te enamore y copia su link. Se lo pegas a Claude Design y le dices: "hazme uno con este estilo, pero con mi información".

Ojo: inspírate, no copies idéntico. Toma la estructura y el estilo, no el contenido de nadie.

El secreto de hoy · Paso 1

En Claude Design, descríbete como si hablaras con un diseñador.

La IA no adivina. Entre más le cuentes quién eres, qué haces y cómo quieres verte, mejor te queda. Imagínate que le explicas tu marca a una persona que va a diseñarte el sitio. Así de sencillo.

No te preocupes por escribir "bonito": escribe como hablas. Ahora te doy el molde exacto para pegar en Claude Design.

Paso 1 · Prompt para Claude Design

Diseña tu sitio en Claude Design.

Entra a claude.com/product/design, copia esto y cambia lo que está entre [corchetes] por lo tuyo. Vas a ver tu sitio armarse en vivo.

Copia y pega en Claude Design
Diséñame un sitio web de marca personal, de una sola página. Soy [tu nombre], [a qué te dedicas] y ayudo a [quién]. Que tenga estas 5 secciones: mi nombre con una frase de presentación, un "Sobre mí" con mi historia, lo que ofrezco (son: [tus servicios]), testimonios o logros (son: [los tuyos]) y un botón grande de WhatsApp [tu número] con mis redes [tus @]. Donde vaya mi foto, deja un espacio marcado (yo la pongo después). Estilo: [cálido / elegante / moderno], colores [los tuyos]. Mobile-first (que se vea perfecto en celular).

Ajústalo ahí mismo hasta que te encante: cámbiale colores, mueve secciones, hazlo más sobrio o más colorido. Es tu momento de diseñadora.

Paso 2 · Prompt para Claude

Pásalo a Claude normal y afínalo.

Ya te gustó cómo se ve. Ahora, en Claude normal (claude.ai), pega el diseño y pídele que lo deje en un solo archivo, con los textos pulidos. Le pides cambios las veces que quieras.

Copia y pega en Claude
Toma este diseño y déjamelo todo en un solo archivo llamado index.html, listo para publicar. Donde va mi foto, usa una imagen llamada "foto.jpg". Ajústame los textos para que suenen naturales y claros. Y cámbiame [esto] / agrega una sección de [preguntas frecuentes / mi podcast].
El toque extra · Opcional

Dale vida con animaciones.

Los efectos (un botón que se mueve, un texto que aparece) hacen que tu sitio se sienta vivo. En estas páginas ves el efecto, copias su código y le dices a Claude: "agrégale este efecto", y lo pegas.

Es opcional: primero deja tu sitio claro y bonito; los efectos son la cereza del pastel.

Último paso del bloque

Descarga tu archivo: se llama index.html.

1 Abre tu página en Claude Es la vista previa que Claude te muestra al lado del chat.
2 Descárgala Arriba de la vista previa está el botón de descargar. Guarda el archivo en tu computador.
3 Verifica el nombre El archivo debe llamarse exactamente index.html. Si se llama distinto, cámbiale el nombre. Ese nombre es la puerta de entrada de tu sitio.

Ese archivito es tu sitio completo. Ahora vamos a darle una casa en internet.

Pausa · 10 minutos

Respira, estira, tómate un café.

Vas increíble: ya tienes tu sitio diseñado y descargado. Cuando volvamos, lo publicamos en internet para que quede en línea de verdad, gratis y para siempre.

03
Bloque 3 · 50 minutos

Publícalo gratis con GitHub y Vercel.

Ya tienes tu archivo. Ahora lo guardamos en GitHub (la caja fuerte) y lo mostramos con Vercel (la vitrina). Al final tendrás un link que puedes mandarle a quien quieras, hoy mismo.

El mapa completo

Claude la crea, GitHub la guarda, Vercel la muestra.

🤖 Claude

Aquí ya nació tu página: la diseñaste en Claude Design y la afinaste en Claude. Tienes tu archivo index.html.

🗂️ GitHub

Aquí vive tu archivo, en tu repo. Cada vez que quieras cambiar algo de tu sitio, reemplazas el archivo aquí.

🚀 Vercel

Aquí vive tu página en línea. Vercel mira tu GitHub y, cuando cambias algo, actualiza tu sitio solito.

Los dos son gratis para lo que hacemos hoy, y esta es la misma dupla que usan las empresas de tecnología de verdad.

Primero, la caja fuerte

GitHub, paso a paso.

1 Crea tu cuenta Entra a github.com y regístrate gratis con tu correo.
2 Crea tu repo Botón verde New. Nombre: mi-sitio, déjalo en "Public" y dale Create repository.
3 Sube tus archivos Clic en uploading an existing file y arrastra tu index.html y tu foto llamada foto.jpg.
4 Guarda Botón verde Commit changes. "Commit" solo significa guardar.
5 Listo Tu sitio ya vive en tu caja fuerte. Deberías ver los dos archivos en la lista.

Ojo con los nombres: index.html y foto.jpg, tal cual, en minúsculas y sin espacios.

Ahora, la vitrina

Vercel, paso a paso.

1 Crea tu cuenta Entra a vercel.com y regístrate con Continue with GitHub. Así quedan conectadas.
2 Nuevo proyecto Botón Add New… → Project.
3 Importa tu repo Busca mi-sitio en la lista y dale Import.
4 Publica No cambies nada y dale Deploy. Espera un minutico mientras hace su magia.
5 Tu link 🎉 Vercel te da tu dirección: mi-sitio.vercel.app. Ábrela en tu celular: esa eres tú, en internet.

Ese link es gratis y queda en línea para siempre. Ya lo puedes poner en tu bio de Instagram.

El toque personal

Cómo poner tus fotos.

1 Ten tu foto lista Elige una foto tuya buena y clara, desde tu celular o computador.
2 Renómbrala Cámbiale el nombre a foto.jpg, igualito al que usó Claude en tu index.html.
3 Súbela a GitHub En tu repo: Add file → Upload files, arrástrala junto a tu index.html y dale Commit changes.
4 Aparece sola Vercel actualiza tu sitio y tu foto ya se ve. ¿Tienes varias? Súbelas como foto1.jpg, foto2.jpg…

La clave: el nombre del archivo debe ser idéntico al que dice tu página. Una letra distinta y no aparece.

Para toda la vida

¿Cambiar algo después? Facilísimo.

1 Pídeselo a Claude Vuelve a tu chat y dile qué quieres cambiar. Descarga el nuevo index.html.
2 Reemplaza en GitHub En tu repo: Add file → Upload files, arrastra el archivo nuevo y dale Commit changes.
3 Vercel lo hace solo En un minuto tu sitio se actualiza solito. No tienes que tocar nada más.

Este circuito Claude → GitHub → Vercel es tuyo para siempre. Así se mantiene un sitio web de verdad.

Tu dirección propia

Empieza gratis y luego, si quieres, tu dominio.

Con tu link de Vercel ya puedes mostrarte al mundo desde hoy. Con eso basta para arrancar.

Cuando quieras verte más profesional, compras tu propio dominio (una dirección corta y tuya, como tunombre.com) y lo conectas a Vercel en minutos. Cuesta poca plata al año y hace que tu marca se vea seria.

Práctica · En vivo

Tu sitio en línea, ahora mismo.

Ahora lo hacemos juntos, en vivo, con tu marca real: pega el molde en Claude con tus datos, descarga tu index.html, súbelo a GitHub y publícalo con Vercel.

No busques la perfección: haz una versión y luego la mejoras. Si te trabas, escribe en el chat de la clase y te ayudo.

Manos a la obra ahora
Para antes de la próxima clase

Tu tarea.

1 Comparte tu link

Deja tu sitio publicado en Vercel y manda el link al grupo. Ver el tuyo en línea es la meta de hoy.

2 Hazle un cambio completo

Pídele un cambio a Claude y súbelo a GitHub tú misma o tú mismo. Hacer el circuito completo una vez sin ayuda es lo que te lo graba.

3 Elige tus fotos

Escoge tus mejores fotos propias para la próxima clase, que es de imágenes con IA. Nada de fotos de internet: las tuyas conectan más.

Para tener a la mano

Tus recursos de hoy.

🌐
Cierre · Presentación 3

Hoy pusiste tu marca en internet — tú misma o tú mismo.

Sin programar, sin pagar hosting y con un circuito que te sirve para toda la vida: Claude la crea, GitHub la guarda y Vercel la muestra. Eso que hiciste hoy, mucha gente lo paga carísimo. Ahora es tuyo. Nos vemos en la próxima.

Soy Lala. Explico el mundo de forma fácil.
1 / 1
Usa las flechas ← → del teclado para avanzar