Hace unos años, montar una web decente sin depender de un desarrollador significaba elegir entre dos malas opciones: un builder visual limitado (Wix, Squarespace) o WordPress. Hoy hay una tercera vía real: usar un asistente de IA como Claude para escribir el código, Next.js como framework y Vercel como hosting. No es magia ni "cero código" — pero el listón de conocimiento técnico necesario ha bajado más en dos años que en la década anterior.
Esta guía es el proceso completo, de cero a publicado, con los prompts que realmente funcionan y las trampas en las que es fácil caer.
Por qué esta combinación y no otra
Claude como capa de generación y edición de código. No es solo autocompletar: puede razonar sobre la estructura completa de un proyecto, seguir instrucciones complejas ("añade una página de contacto con validación de formulario y conéctala al layout existente") y mantener consistencia entre archivos.
Next.js como framework porque resuelve de fábrica lo que en HTML/CSS/JS puro tendrías que montar a mano: enrutado entre páginas, generación estática, optimización de imágenes, SEO técnico básico. Es también el framework que Claude mejor conoce y sobre el que genera código más fiable, porque es uno de los más documentados y usados del ecosistema React.
Vercel como hosting porque es el creador de Next.js y el despliegue está diseñado para no tener fricción: conectas un repositorio de GitHub y cada git push genera una versión publicada automáticamente, con CDN global y certificado SSL incluidos, en el plan gratuito.
Las tres piezas encajan porque comparten filosofía: mínima configuración, máxima velocidad de iteración.
Lo que necesitas antes de empezar
- Una cuenta de GitHub (gratuita).
- Una cuenta de Vercel (gratuita, se puede vincular directamente con GitHub).
- Acceso a Claude — vía claude.ai, o mejor aún, Claude Code si vas a iterar mucho sobre el mismo proyecto en tu propio ordenador.
- Node.js instalado en tu equipo (necesario para ejecutar Next.js en local).
No necesitas saber programar de antemano, pero sí necesitas estar dispuesto a leer el código que Claude genera. La diferencia entre alguien que consigue una web sólida y alguien que se queda atascado no es el conocimiento previo: es la disposición a entender, aunque sea a grandes rasgos, qué está haciendo cada archivo.
Paso 1: define la web antes de escribir ni una línea
El error más común es abrir el chat con Claude y pedir "hazme una web para mi negocio". Cuanto más vago el prompt, más genérico el resultado y más vueltas tendrás que dar después.
Antes de escribir nada, ten claro:
- Qué páginas necesitas (inicio, servicios, sobre mí, contacto, blog...).
- Qué acción quieres que haga el visitante en cada página (rellenar un formulario, reservar una llamada, leer un artículo).
- Referencias visuales. Dos o tres webs cuyo estilo te guste, aunque sea a nivel de estructura y no de diseño exacto.
- Contenido real, aunque sea en borrador. Es mucho más eficiente darle a Claude los textos reales desde el principio que generar contenido de relleno y sustituirlo después.
Con eso montado, el primer prompt útil se parece a esto:
"Quiero crear una web con Next.js (App Router) y Tailwind CSS para [tipo de negocio]. Necesito estas páginas: [lista]. El objetivo principal es que el visitante [acción]. El estilo debe ser [adjetivos: minimalista, cercano, técnico...]. Empieza por la estructura del proyecto: qué carpetas y archivos vamos a necesitar, sin escribir código todavía."
Pedir la estructura antes que el código es clave. Te permite pillar decisiones raras (una carpeta de más, un nombre de componente que no tiene sentido) antes de que Claude construya veinte archivos sobre esa base.
Paso 2: monta el proyecto base
Si usas Claude Code, puedes pedirle directamente que inicialice el proyecto en tu máquina:
"Inicializa un proyecto Next.js con App Router, TypeScript y Tailwind CSS. Usa el nombre [nombre-proyecto]. Después crea la estructura de carpetas que acordamos antes."
Claude ejecutará el equivalente a npx create-next-app con las opciones correctas y empezará a crear los archivos. Si trabajas desde claude.ai sin acceso directo a tu terminal, tendrás que ejecutar tú los comandos que te indique y pegar el resultado si algo falla — más lento, pero funciona igual.
En este punto ya deberías tener un proyecto que arranca en local con:
npm run dev
Y se ve en localhost:3000. Si no arranca, pega el error completo en el chat. Los mensajes de error de Next.js suelen ser lo bastante descriptivos como para que Claude identifique la causa en el primer intento.
Paso 3: construye página por página, no todo de golpe
Pedir "crea toda la web" de una vez suele salir mal: demasiados archivos generados a la vez, sin que tú puedas revisar cada pieza antes de seguir. El flujo que mejor funciona es iterativo:
- Pide una página.
- Revísala en local.
- Pide ajustes concretos.
- Solo cuando estés satisfecho, pasa a la siguiente.
Ejemplo de prompt para una página concreta:
"Crea la página de inicio en
app/page.tsx. Necesito: un hero con titular, subtítulo y botón de llamada a la acción; una sección de tres beneficios con icono, título y descripción corta; una sección de testimonios (deja el contenido de ejemplo, lo sustituyo yo); y un footer con enlaces a las otras páginas. Usa Tailwind para el estilo, con una paleta de [colores]. Que sea responsive."
Cuanto más específico el prompt, menos rondas de ajuste necesitarás después. Y aun así, habrá ajustes — es parte normal del proceso, no una señal de que algo va mal.
Paso 4: pide explicaciones, no solo código
Una ventaja real de trabajar con Claude frente a copiar código de un tutorial es que puedes preguntar "por qué" en cualquier momento:
"¿Por qué has puesto este componente como Server Component y no como Client Component? ¿Cuándo debería usar uno u otro?"
Entender aunque sea la lógica básica de App Router (qué se ejecuta en servidor, qué en cliente, cuándo se necesita "use client") te va a ahorrar horas más adelante, cuando quieras añadir interactividad — un formulario, un menú desplegable, un contador — y el componente no se comporte como esperas.
Paso 5: contenido y SEO desde el principio, no al final
Es tentador dejar el contenido real y el SEO para el último paso. No lo hagas. Pide desde el principio:
"Añade metadatos SEO (title, description, Open Graph) a cada página usando el sistema de metadata de Next.js. Genera también un sitemap.xml dinámico que recorra todas las páginas del sitio."
Next.js tiene soporte nativo para metadatos y sitemap sin necesidad de plugins externos — es una de las ventajas silenciosas de este stack frente a WordPress, donde esto dependía de un plugin de terceros con su propia lógica.
Paso 6: publica en Vercel
Con el proyecto en un repositorio de GitHub:
- Entra en Vercel y selecciona "Import Project".
- Conecta el repositorio.
- Vercel detecta automáticamente que es un proyecto Next.js y configura el build sin que tengas que tocar nada.
- Dale a "Deploy".
En un par de minutos tienes una URL pública (tu-proyecto.vercel.app). Desde ahí, puedes conectar tu propio dominio en la configuración del proyecto, en la pestaña "Domains".
A partir de este momento, cada git push a la rama principal genera un despliegue nuevo automáticamente. Y cada rama distinta genera una URL de preview propia — útil para enseñar cambios antes de que sean definitivos, sin tocar la web en producción.
Errores habituales al construir una web con Claude
Pedir demasiado en un solo prompt. Ya lo he mencionado, pero merece repetirse: los mejores resultados salen de iterar en piezas pequeñas y revisables, no de un prompt gigante que intenta generar la web entera de golpe.
No revisar el código generado. Claude comete errores, como cualquier desarrollador. La diferencia es que si no entiendes ni una línea de lo que se ha generado, no vas a detectar el error hasta que rompa algo visible — y a veces ni siquiera entonces.
Ignorar el rendimiento hasta el final. Pide medir Core Web Vitals desde que tienes las primeras dos o tres páginas, no cuando el sitio ya está completo y arreglar un problema de rendimiento implica tocar media docena de componentes.
No pedir accesibilidad. Por defecto, Claude no siempre añade atributos de accesibilidad (alt en imágenes, aria-labels, contraste de color suficiente) si no se lo pides explícitamente. Un prompt como "revisa esta página y corrige cualquier problema de accesibilidad" al final de cada sección evita arrastrar el problema a todo el sitio.
Depender de un solo prompt para el contenido final. El contenido de marketing (titulares, textos de venta, descripciones de producto) sale mejor cuando lo escribes tú o lo revisas a fondo después de que Claude genere un borrador. Claude es una herramienta excelente para estructura y código; para la voz de marca, el criterio humano sigue marcando la diferencia.
¿Vale la pena frente a un builder tradicional?
Depende de lo que necesites. Si quieres algo funcional en una tarde sin tocar código en absoluto, un builder visual sigue siendo más rápido. Pero si te importa el rendimiento, quieres control total sobre el SEO y el GEO, o piensas seguir añadiendo funcionalidades con el tiempo (un blog, un área de cliente, integraciones con APIs), el stack Claude + Next.js + Vercel te da algo que ningún builder visual ofrece: código propio, sin dependencia de una plataforma cerrada, y con coste de hosting real de cero euros al mes en la mayoría de proyectos personales o de negocio pequeño.
La curva de entrada ya no es programar desde cero. Es aprender a dirigir bien a un asistente que sabe programar mejor y más rápido que la mayoría de nosotros, y a revisar con criterio lo que te devuelve.