Crear una web con Claude Code paso a paso

Introducción

Crear una página web ya no depende únicamente de abrir un editor, escribir código desde cero y resolver cada detalle manualmente. Herramientas como Claude Code permiten trabajar de otra forma: explicar qué quieres construir, dejar que la IA analice el proyecto, pedir una primera versión, revisar el resultado y mejorarlo mediante iteraciones.

Pero conviene aclarar algo desde el principio: Claude Code no convierte automáticamente una mala idea en una buena web. Tampoco sustituye por completo el criterio técnico, el diseño, la estrategia o la revisión humana. Su valor real está en que puede ayudarte a avanzar más rápido, ordenar mejor el trabajo, generar código, proponer estructuras, detectar problemas y convertir tus instrucciones en cambios concretos dentro del proyecto.

Claude Code es una herramienta de programación asistida por IA que funciona desde la terminal, entiende el contexto de tu base de código y puede ayudarte a crear funciones, corregir errores y automatizar tareas de desarrollo.

En esta guía aprenderás a usar Claude Code para crear una web desde cero o mejorar una existente, con un enfoque práctico y realista: la IA como copiloto técnico, no como magia instantánea.

*Infografía como crear una web con Claude Code*

Requisitos previos

Antes de empezar, necesitas tener una base mínima preparada.

Lo recomendable es contar con:

Un ordenador con terminal.
Node.js instalado, si vas a usar instalación vía npm.
Una cuenta compatible con Claude.
Un editor de código, como Visual Studio Code.
Conocimientos básicos de carpetas, archivos y comandos.
Una idea clara de la web que quieres crear.

La instalación recomendada actualmente por la documentación oficial de Claude Code incluye instaladores nativos para macOS, Linux, WSL y Windows. También se mantiene la opción de instalación mediante npm como paquete global, que requiere Node.js 18 o superior.

Ejemplo de instalación con npm:

npm install -g @anthropic-ai/claude-code

Después, puedes entrar en la carpeta de tu proyecto y ejecutar:

claude

1. Define primero qué debe conseguir tu web

El error más común al usar IA para crear una web es empezar con una petición demasiado vaga:

Hazme una web bonita.

Claude Code puede responder a eso, pero probablemente el resultado sea genérico. Una web no debería empezar por “que sea bonita”, sino por una pregunta más importante:

¿Qué tiene que conseguir esta página?

Por ejemplo:

Quiero crear una landing page para captar suscriptores de una newsletter sobre IA aplicada a productividad.

Necesito una página para presentar mis servicios como consultor freelance y conseguir llamadas de diagnóstico.

Quiero una web sencilla para mostrar mi portfolio, mis proyectos y una forma clara de contacto.

Ese objetivo inicial condiciona todo: estructura, diseño, textos, llamadas a la acción, secciones, formularios y prioridades.

Diagrama simple con tres bloques: objetivo, público y CTA. Fondo claro, iconos de diana, usuario y botón. Formato horizontal tipo blog

2. Prepara un brief útil antes de pedir código

Claude Code funciona mejor cuando le das contexto. Cuanto mejor sea tu brief, menos iteraciones necesitarás.

Una buena plantilla inicial podría ser:

Necesito crear una página web para [proyecto].

Objetivo principal:
[Qué debe conseguir la web]

Público objetivo:
[A quién va dirigida]

Tipo de web:
[Landing page, portfolio, web corporativa, página de producto, documentación, etc.]

Estilo visual:
[Minimalista, tecnológico, editorial, corporativo, creativo...]

Referencias:
[URLs o nombres de webs cuyo estilo te guste]

Secciones necesarias:
- Hero principal
- Beneficios
- Cómo funciona
- Casos de uso
- Testimonios
- Preguntas frecuentes
- CTA final

CTA principal:
[Suscribirse, reservar llamada, comprar, descargar, contactar...]

Restricciones técnicas:
[HTML/CSS/JS, React, Next.js, Astro, Tailwind, etc.]

Prioridades:
- Diseño responsive
- Buena legibilidad
- Carga rápida
- SEO básico
- Accesibilidad

Ejemplo real:

Necesito crear una landing page para una newsletter sobre inteligencia artificial aplicada a profesionales independientes.

Objetivo principal:
Conseguir suscripciones por email.

Público objetivo:
Freelancers, consultores y creadores de contenido que quieren usar IA para ahorrar tiempo y mejorar su trabajo.

Estilo visual:
Minimalista, moderno, claro y profesional. Fondo claro, mucho espacio en blanco, acentos en azul y gris oscuro.

Referencias:
Me gustan las webs de Linear, Notion y Superhuman por su claridad visual.

Secciones necesarias:
- Hero con titular claro
- Beneficio principal
- Tres razones para suscribirse
- Ejemplo de contenido que recibirá el usuario
- Formulario de suscripción
- Preguntas frecuentes
- CTA final

CTA principal:
Suscribirse gratis.

Restricciones técnicas:
Crear una versión inicial en HTML, CSS y JavaScript, sin frameworks.

Prioridades:
Responsive, rápida, accesible y fácil de editar.

Plantilla visual de brief para Claude Code con campos rellenables: proyecto, objetivo, público, estilo, funciones, CTA y restricciones — *Plantilla visual de brief para Claude Code*

3. Abre Claude Code en la carpeta correcta

Una vez tengas claro el objetivo, crea una carpeta para el proyecto:

mkdir mi-web-claude
cd mi-web-claude
claude

Desde ahí puedes pedirle a Claude Code que cree la estructura inicial.

Por ejemplo:

Quiero crear una landing page desde cero usando HTML, CSS y JavaScript.
Antes de escribir código, analiza el objetivo y propón una estructura de archivos y secciones.

Esto es importante: no tienes por qué pedir directamente “créame todo”. Es mejor empezar con una fase de análisis.

4. Usa el Modo Plan antes de modificar archivos

Uno de los puntos más potentes de Claude Code es el Modo Plan. Este modo permite que Claude investigue, analice y proponga cambios antes de tocar el código.

Según la documentación oficial, el Modo Plan hace que Claude investigue y proponga cambios sin modificar los archivos. Puede leer el proyecto, explorar con comandos y preparar un plan, pero no edita el código hasta que apruebas el enfoque.

Puedes activarlo dentro de una sesión con:

Shift + Tab

También puedes iniciar directamente Claude Code en modo plan:

claude --permission-mode plan

La documentación de flujos comunes también recomienda planificar antes de editar cuando quieras revisar cambios antes de que se escriban en disco.

Un buen prompt para empezar sería:

Actúa en modo planificación.

Quiero crear una landing page para captar suscriptores de una newsletter sobre IA.

Antes de escribir código:
1. Propón la estructura de la página.
2. Define las secciones necesarias.
3. Sugiere la estructura de archivos.
4. Explica qué decisiones de diseño tomarías.
5. Indica qué necesitarías confirmar antes de implementar.

Esto te permite revisar el planteamiento antes de que Claude empiece a generar archivos.

*Captura simulada del Modo Plan con tres columnas: estructura del proyecto, preguntas de Claude y plan de acción*

5. Pide una primera versión, pero no la versión final

Cuando el plan te encaje, puedes pedirle que implemente una primera versión.

Ejemplo:

El plan me parece correcto. Implementa una primera versión funcional de la landing page.

Requisitos:
- HTML, CSS y JavaScript separados.
- Diseño responsive.
- Hero con titular, subtítulo y CTA.
- Sección de beneficios.
- Formulario visual de suscripción.
- FAQ.
- CTA final.
- Código limpio y comentado solo donde sea necesario.

Aquí la clave está en entender que esta primera versión no tiene que ser perfecta. Tiene que ser una base sobre la que puedas trabajar.

Claude Code puede crear los archivos iniciales, estructurar el HTML, generar estilos y añadir comportamiento básico. Tu trabajo será revisar si el resultado comunica bien, si el diseño encaja y si la experiencia tiene sentido.

6. Revisa la web en local

Después de generar la primera versión, pídele a Claude que te indique cómo verla en local.

Por ejemplo:

Explícame cómo puedo previsualizar esta web en local.

Si es una web estática simple, puedes abrir el archivo index.html en el navegador. Si usas un framework, probablemente necesites instalar dependencias y ejecutar un servidor de desarrollo:

npm install
npm run dev

En esta fase revisa:

Si el titular se entiende en menos de 5 segundos.
Si el CTA es claro.
Si la web se ve bien en móvil.
Si hay demasiado texto.
Si el diseño transmite confianza.
Si las secciones siguen un orden lógico.
Si el formulario o botón principal destaca.
Si el contenido responde al objetivo inicial.

*Mockup de vista previa de una landing page en navegador y móvil, con checklist lateral de responsive, copy, CTA, accesibilidad y rendimiento*

7. Itera con instrucciones concretas

El verdadero valor no está en el primer resultado, sino en la iteración.

En lugar de decir:

No me gusta.

Di algo más concreto:

El hero se ve demasiado genérico. Haz que el titular sea más directo, orientado a freelancers que quieren ahorrar tiempo usando IA.

El diseño es demasiado plano. Mejora la jerarquía visual usando más espacio, tarjetas suaves y un CTA más visible.

Reduce el texto de la sección de beneficios. Quiero frases más cortas, más orientadas a conversión.

También puedes pedir mejoras técnicas:

Revisa el CSS y mejora la versión móvil. El formulario debe verse bien en pantallas pequeñas.

Optimiza la estructura HTML para que sea más semántica y accesible.

Añade etiquetas meta básicas para SEO.

Revisa si hay código duplicado y propón una refactorización sencilla.

*Diagrama circular de iteración con cuatro pasos: pedir cambios, Claude genera, pruebas la web, refinas el resultado*

8. Usa Claude Code para potenciar tus conocimientos

Claude Code no solo sirve para generar código. También puede ayudarte a aprender y tomar mejores decisiones.

Puedes pedirle:

Explícame la estructura de archivos que has creado y por qué.

Enséñame qué parte del CSS controla el diseño responsive.

Dime cómo podría convertir esta landing HTML en un proyecto con Astro o Next.js.

Revisa este componente y explícame cómo mejorarlo.

Propón tres alternativas para mejorar el rendimiento sin cambiar el diseño.

Este enfoque es especialmente útil si tienes pocos conocimientos técnicos. En lugar de limitarte a copiar y pegar, puedes usar Claude como una herramienta para entender qué está pasando.

Y si ya sabes programar, Claude Code puede ayudarte a acelerar tareas repetitivas, explorar refactorizaciones, preparar componentes, escribir pruebas, revisar errores y documentar decisiones.

9. Crea un archivo CLAUDE.md para mantener contexto

Cuando trabajas en un proyecto durante varias sesiones, repetir siempre las mismas instrucciones es incómodo. Una buena práctica es crear un archivo CLAUDE.md con reglas del proyecto.

Ejemplo:

# Reglas del proyecto

Este proyecto es una landing page para una newsletter sobre IA.

## Objetivo
Conseguir suscripciones por email.

## Estilo
- Minimalista
- Profesional
- Fondo claro
- Acentos azules
- Mucho espacio en blanco

## Código
- HTML, CSS y JavaScript separados
- Priorizar legibilidad
- Evitar dependencias innecesarias
- Mantener diseño responsive

## Copy
- Tono claro, directo y cercano
- Frases cortas
- Evitar lenguaje demasiado técnico

## Prioridades
- Conversión
- Accesibilidad
- Velocidad de carga
- SEO básico

Después puedes decirle:

Lee el archivo CLAUDE.md y asegúrate de seguir esas reglas en todos los cambios.

Esto ayuda a mantener consistencia en diseño, tono y estructura.

10. Publica la web cuando tengas una versión validada

Cuando ya tengas una versión estable, puedes pedir ayuda para desplegarla.

Por ejemplo:

Quiero publicar esta web. Explícame las opciones más sencillas para desplegarla gratis o con bajo coste.

Opciones habituales:

Vercel.
Netlify.
GitHub Pages.
Cloudflare Pages.
Hosting tradicional con FTP.

Para una web estática simple, Netlify o Vercel suelen ser opciones cómodas. Para proyectos con frameworks como Next.js, Vercel suele integrarse muy bien. Para HTML/CSS/JS básico, GitHub Pages también puede ser suficiente.

Pide a Claude Code instrucciones adaptadas a tu caso:

Prepara los pasos para desplegar este proyecto en Netlify.

Revisa si el proyecto está listo para subirlo a Vercel y dime qué archivos faltan.

Casos de uso prácticos

Claude Code puede ayudarte a crear distintos tipos de páginas web:

Landing page para captar emails

Ideal para newsletters, productos digitales, preventas o listas de espera.

Prompt recomendado:

Crea una landing page orientada a captar emails para una newsletter sobre IA.
Prioriza claridad, confianza y conversión.

Portfolio profesional

Útil para diseñadores, desarrolladores, consultores, redactores o freelancers.

Crea una web portfolio con una página de inicio, sección de proyectos, sobre mí y contacto.
El estilo debe ser limpio, profesional y fácil de mantener.

Web para un producto o SaaS

Adecuada para presentar funcionalidades, beneficios, precios y preguntas frecuentes.

Crea una landing para un SaaS de productividad.
Incluye hero, beneficios, cómo funciona, casos de uso, precios y FAQ.

Mejora de una web existente

Claude Code también puede analizar y mejorar un proyecto ya creado.

Analiza esta landing page existente y propón mejoras de estructura, copy, accesibilidad y rendimiento.
No modifiques archivos todavía: primero quiero un plan.

Errores comunes y soluciones

Error 1: pedir una web “bonita” sin objetivo

Problema: el resultado suele ser genérico.

Solución: define objetivo, público y CTA antes de pedir diseño.

El objetivo de esta página es conseguir reservas de una llamada de diagnóstico.

Error 2: dejar que Claude modifique demasiados archivos sin revisar

Problema: puedes perder control del proyecto.

Solución: usa Modo Plan antes de cambios grandes.

Antes de modificar archivos, propón un plan y lista qué archivos cambiarías.

Error 3: aceptar el primer resultado como definitivo

Problema: la primera versión rara vez es la mejor.

Solución: itera con feedback concreto.

Mejora el titular para que sea más específico y orientado a conversión.

Error 4: no probar en móvil

Problema: muchas webs se ven bien en escritorio y mal en móvil.

Solución: pide revisión responsive.

Revisa el diseño móvil y corrige problemas de espaciado, tamaño de texto y botones.

Error 5: no revisar el código generado

Problema: puedes publicar errores, duplicación o soluciones poco mantenibles.

Solución: pide explicación y revisión.

Revisa el código generado y dime si hay partes innecesarias, repetidas o mejorables.

Conclusión

Claude Code puede cambiar mucho la forma en la que creamos páginas web. No porque permita hacer una web perfecta en cinco minutos, sino porque reduce la fricción entre la idea, el código y la iteración.

La clave está en usarlo bien:

Primero defines el objetivo. Después escribes un brief claro. Luego activas el Modo Plan. Revisas la propuesta. Generas una primera versión. La pruebas. La mejoras. Y solo entonces la publicas.

La IA puede ayudarte aunque tengas pocos conocimientos técnicos, pero también puede potenciarte si ya sabes programar. En ambos casos, el mejor resultado aparece cuando combinas tres elementos: buen contexto, criterio humano y ciclos rápidos de mejora.

Claude Code no sustituye tu criterio. Lo amplifica.