Lo más fácil: que tu IA te guíe
Guarda esta guía con el botón Guardar PDF de arriba (o copia el enlace de esta página), ábrela en Claude Code, Cowork o Codex y pega este prompt. Ellos ejecutan los pasos por ti; un chat normal (Claude o ChatGPT) también sirve, solo te va diciendo qué hacer.
Te adjunto la guía "Tu página web profesional con Claude Code". Soy principiante y nunca usé la Terminal. Acompáñame un paso a la vez: explícame en una frase qué hace cada cosa antes de hacerla, pídeme permiso antes de instalar algo y espera a que te confirme cuando un paso dependa de mí (crear cuentas, pagar, iniciar sesión). Si algo falla, arréglalo antes de seguir. Empieza preguntándome qué computadora tengo.Qué necesitas
- Claude Pro (20 USD al mes): incluye Claude Code y el modelo Opus 5.5. El plan gratis no sirve.
- Node.js gratis: descárgalo en nodejs.org (botón LTS) e instálalo como cualquier programa.
- Todo lo demás es gratis. Tiempo: unos 60 minutos la primera vez.
Abrir la Terminal en Mac: Cmd + Espacio, escribe Terminal y Enter. Ahí pegas los comandos con Cmd + V y Enter.
Paso 01Instala Claude Code
Entra a: code.claude.com/docs/es/overview
Copia esta línea y pégala en la Terminal:
curl -fsSL https://claude.ai/install.sh | bashCierra la Terminal, ábrela de nuevo y pega esto para crear la carpeta de tu página y abrir Claude ahí. Inicia sesión con tu cuenta Pro cuando se abra el navegador.
mkdir -p ~/Desktop/mi-web && cd ~/Desktop/mi-web && claudeElige Opus 5.5, el mejor modelo para diseño y código. Escribe dentro de Claude:
/model opusPaso 02Instala Framer Motion (animaciones)
Entra a: npmjs.com/package/framer-motion (ahora se llama Motion)
Primero pídele a Claude que cree la base de tu página:
Crea en esta carpeta un proyecto web con React, Vite y Tailwind CSS. Deja solo una página que diga "Mi web" y dime cómo verla en el navegador.Después instala Motion. Pégalo en Claude con el signo ! adelante (así va directo a la Terminal):
!npm install motionPaso 03Instala la skill UI UX Pro Max (diseño)
Entra a: github.com/nextlevelbuilder/ui-ux-pro-max-skill
Es un manual de diseño para Claude: elige estilo, colores y letras según tu tipo de negocio. Pégale esto a Claude y él te dice cómo instalarla:
Quiero instalar la skill UI UX Pro Max desde github.com/nextlevelbuilder/ui-ux-pro-max-skill para todos mis proyectos. Revisa el README y guíame paso a paso.O instálala tú mismo con estas dos líneas, una a la vez, y reinicia Claude (/exit y luego claude):
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillPaso 04Agrega efectos de React Bits
Entra a: reactbits.dev
- Elige un efecto en el menú: Backgrounds (fondos), Text Animations (títulos) o Components (tarjetas y menús).
- Haz clic en Copy for AI → Copy prompt.
- Pégalo en Claude Code y di dónde lo quieres: "ponlo como fondo de la primera sección".
Para empezar: fondo Aurora, título Split Text y tarjetas Spotlight Card.
Crea tu página
Cambia lo que está entre [corchetes] y pégalo en Claude:
Usa la skill ui-ux-pro-max para crear la página web de mi negocio.
Negocio: [nombre y qué haces]
Clientes: [a quién le vendes]
Servicios: [lista, con precios si quieres]
Contacto: [WhatsApp, correo, redes]
Estilo: [elegante / minimalista / moderno, o "recomiéndame uno"]
Primero muéstrame el estilo, los colores y las letras que propones para aprobarlos. Luego crea: inicio con botón de WhatsApp, servicios, por qué elegirnos, testimonios, preguntas frecuentes y contacto. Usa motion para animaciones suaves, textos en español que vendan y que se vea perfecto en celular. Al terminar, ábrela en el navegador y corrige lo que se vea mal.Para que se vea más cara:
Revisa la página como un diseñador senior y aplica los 5 cambios que más la harían ver profesional.Publícala gratis
- Pídele a Claude: "prepara la página para publicarla con npm run build".
- Entra a app.netlify.com/drop y arrastra la carpeta dist que está dentro de mi-web.
- Crea tu cuenta gratis de Netlify para que la página quede a tu nombre. Listo: ya tienes enlace para compartir.