Principiante 45 min en total 6 pasos

Cómo hacer una página web con Claude

Crea una web completa en HTML, CSS y JavaScript usando Claude paso a paso, sin experiencia previa.

Requisitos

Cuenta en claude.ai (plan gratuito sirve)
Un navegador web moderno (Chrome, Firefox o Edge)
Un editor de texto como VS Code o el Bloc de notas
Ganas de aprender, ¡no necesitas saber programar!

Lo que vas a aprender

Escribir prompts efectivos para que Claude genere código web
Crear una página con HTML, CSS y JavaScript en un solo archivo
Ver tu web funcionando en el navegador local
Iterar y mejorar el diseño pidiendo cambios a Claude
Publicar tu web gratis con GitHub Pages o Netlify

PASO 1 · ~5 min

Definir qué web quieres crear

Antes de pedirle nada a Claude, ten claro qué página necesitas. Cuanto más específico seas, mejor será el resultado. Para este tutorial crearemos una página personal (portfolio) sencilla, pero el proceso sirve para cualquier tipo de web: una landing de producto, un blog o la web de un negocio local. Piensa en cuatro cosas: el propósito (¿presentarte?, ¿vender algo?), las secciones (inicio, sobre mí, proyectos, contacto), el estilo visual (moderno, minimalista, colorido) y el contenido real (tu nombre, tu descripción, tus enlaces). Anota todo esto en una lista. Claude trabaja mucho mejor cuando le das contexto concreto en lugar de pedir 'hazme una web bonita'. En España y LATAM muchos freelancers usan este método para montar su carta de presentación online en una tarde.

ConsejoReúne ya tus textos e imágenes reales. Sustituir contenido de ejemplo después lleva más tiempo que darlo desde el inicio.

Error comúnNo pidas 'una web como la de Apple'. Claude no puede clonar sitios; describe las características que te gustan en su lugar.

PASO 2 · ~8 min

Escribir el prompt inicial en Claude

Abre claude.ai e inicia una conversación nueva. Vamos a pedirle una página completa en un único archivo HTML (con CSS y JavaScript incluidos) para que sea fácil de probar. Un prompt bien estructurado incluye el objetivo, las secciones, el estilo y una restricción técnica clara. Copia el prompt de abajo y personalízalo con tus datos. La clave es pedir 'un solo archivo HTML autocontenido': así podrás guardarlo y abrirlo en el navegador sin configurar nada. También pedimos diseño responsive (que se vea bien en móvil) porque más del 70% del tráfico en LATAM viene de teléfonos. Claude te devolverá un bloque de código extenso. No te asustes por la cantidad: en el siguiente paso lo copiaremos entero.

code

Actúa como desarrollador web frontend. Crea una página web personal (portfolio) en UN SOLO archivo HTML autocontenido, con CSS y JavaScript incluidos dentro del mismo archivo (sin dependencias externas).

Datos:
- Nombre: María López
- Rol: Diseñadora gráfica freelance
- Secciones: Inicio con foto, Sobre mí, Proyectos (3 tarjetas), Contacto con email
- Estilo: moderno, minimalista, colores azul y blanco, tipografía limpia
- Requisitos: diseño responsive (móvil y escritorio), un menú de navegación superior y una animación suave al hacer scroll.

Devuelve solo el código completo listo para copiar.

ConsejoPega tu prompt en español; Claude responde perfectamente y los comentarios del código también saldrán en español.

Error comúnSi pides librerías como React o Bootstrap desde CDN, necesitarás conexión a internet para probar. Para empezar, pide todo 'sin dependencias externas'.

PASO 3 · ~5 min

Guardar el código como archivo HTML

Claude te habrá generado un bloque de código que empieza por '<!DOCTYPE html>'. Haz clic en el botón de copiar que aparece en la esquina del bloque de código para copiarlo entero. Ahora abre tu editor de texto (VS Code o el Bloc de notas). Crea un archivo nuevo, pega el código y guárdalo con el nombre 'index.html'. Muy importante: la extensión debe ser '.html', no '.txt'. En el Bloc de notas de Windows, al guardar elige 'Tipo: Todos los archivos' y escribe 'index.html' con las comillas, o se guardará como 'index.html.txt'. Guarda el archivo en una carpeta que recuerdes, por ejemplo 'mi-web' en el Escritorio. Este archivo es tu página web completa: contiene la estructura, los estilos y la interactividad, todo en uno.

bash

# Estructura recomendada de tu carpeta
mi-web/
  └── index.html

# Si quieres crear la carpeta desde la terminal (Mac/Linux):
mkdir ~/Desktop/mi-web
cd ~/Desktop/mi-web
touch index.html

ConsejoNombra siempre 'index.html' a tu página principal: es el nombre que los servidores web buscan por defecto al publicar.

Error comúnEn el Bloc de notas, si el archivo queda como 'index.html.txt' el navegador mostrará código en lugar de la web. Verifica la extensión real.

PASO 4 · ~5 min

Abrir y probar tu web en el navegador

Ahora viene lo satisfactorio: ver tu web funcionando. Ve a la carpeta donde guardaste 'index.html' y haz doble clic sobre el archivo. Se abrirá en tu navegador por defecto mostrando tu página, sin necesidad de servidor ni instalación. Revisa que todo se vea bien: el menú, las secciones, los colores y las animaciones. Prueba también la vista móvil pulsando F12 en el navegador para abrir las herramientas de desarrollador y activando el icono de dispositivo móvil (o simplemente reduce el ancho de la ventana). Si algo no aparece o se ve roto, no pasa nada: en el siguiente paso le pediremos cambios a Claude. Anota todo lo que quieras mejorar: 'el botón de contacto es muy pequeño', 'quiero que la foto sea redonda', 'los colores son muy fuertes'. Estas notas serán la base de tu siguiente prompt.

ConsejoPulsa F12 y usa el modo dispositivo (Ctrl+Shift+M en Chrome) para simular cómo se ve tu web en un iPhone o Android.

Error comúnSi ves el código en texto plano en lugar de la web, el archivo no tiene extensión .html correcta. Vuelve al paso anterior.

PASO 5 · ~10 min

Iterar y mejorar el diseño con Claude

Casi nunca la primera versión es perfecta, y eso está bien. La gran ventaja de Claude es que puedes pedir cambios en lenguaje natural dentro de la misma conversación, y él recuerda el código que ya generó. Sé específico con cada petición. En lugar de 'hazlo más bonito', di exactamente qué cambiar. Puedes pedir varios cambios en un solo mensaje. Después de cada respuesta, vuelve a copiar el código actualizado, pégalo reemplazando todo el contenido de tu 'index.html', guarda y recarga el navegador (Ctrl+R o F5). Repite este ciclo —pedir, copiar, guardar, recargar— hasta que quede a tu gusto. Es normal hacer 3 o 4 rondas. Si un cambio rompe algo, simplemente dile a Claude: 'el último cambio hizo que el menú desapareciera, arréglalo manteniendo lo demás igual'.

code

Sobre el código anterior, haz estos cambios:

1. Haz la foto de perfil circular y con un borde azul de 3px.
2. Aumenta el tamaño del botón de contacto y ponlo con esquinas redondeadas.
3. Cambia el azul por un tono más suave (#4A90D9).
4. Añade el año actual automáticamente en el pie de página con JavaScript.

Devuelve el archivo HTML completo actualizado, no solo los fragmentos.

ConsejoPide siempre 'el archivo completo actualizado'. Si Claude solo devuelve fragmentos, integrarlos manualmente es propenso a errores para principiantes.

Error comúnSi la conversación se hace muy larga, Claude puede perder detalles. Cuando el código esté estable, empieza una conversación nueva pegando tu HTML actual como punto de partida.

PASO 6 · ~7 min

Publicar tu web gratis en internet

Tu web ya funciona en local, pero para compartirla con el mundo necesitas publicarla. La opción más sencilla y gratuita para principiantes es Netlify Drop: no requiere cuenta ni instalar nada. Ve a app.netlify.com/drop, arrastra la carpeta 'mi-web' (que contiene tu 'index.html') a la zona indicada y en segundos tendrás una URL pública tipo 'https://nombre-aleatorio.netlify.app'. Ya puedes compartir ese enlace por WhatsApp, LinkedIn o donde quieras. Otra alternativa popular es GitHub Pages, ideal si quieres un enlace más profesional y control de versiones. Requiere crear una cuenta gratuita en GitHub. Para un portfolio personal, Netlify Drop es más que suficiente para empezar. Si más adelante quieres un dominio propio (como mariapez.com), puedes comprarlo en proveedores como Namecheap o Dinahosting (popular en España) y conectarlo desde Netlify.

bash

# Opción GitHub Pages desde terminal (opcional, más avanzado):
cd ~/Desktop/mi-web
git init
git add index.html
git commit -m "Mi primera web con Claude"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/mi-web.git
git push -u origin main
# Luego activa Pages en Settings > Pages > Branch: main

ConsejoNetlify Drop es instantáneo y sin registro. Perfecto para enseñar tu web a un cliente en 30 segundos.

Error comúnNo subas datos sensibles (contraseñas, claves de API) en el HTML: todo el código de una web es público y visible por cualquiera.

Resultado

Has creado una página web personal completa y funcional —con HTML, CSS y JavaScript— usando Claude para generar y refinar el código, sin necesidad de saber programar. La probaste en tu navegador, la mejoraste iterando con prompts específicos y finalmente la publicaste en internet con una URL que puedes compartir. Ahora dominas el ciclo esencial de desarrollo web asistido por IA: describir, generar, probar y publicar.

PRÓXIMOS PASOS

→Cómo añadir un formulario de contacto funcional con Claude →Cómo conectar la API de Claude a tu web con JavaScript

¿Quieres dominar Claude a fondo?

Los cursos de certificación en español de Partners Academy te llevan de principiante a builder profesional con Claude y su API.

Ver programas de Partners Academy →