Crea una web de cualquier complejidad en una tarde con Claude Code

Hace poco, lanzar una página sencilla significaba coordinar a varias personas. Primero explicabas la idea a un diseñador, esperabas una propuesta, reunías correcciones y después pasabas el proyecto a un desarrollador. Dos semanas era un buen plazo. Un mes de mensajes, archivos y pequeños malentendidos era bastante normal.

Con Claude Code puedes concentrar ese ciclo en una tarde. Describes tu producto, respondes a unas preguntas, revisas la primera versión en el navegador y pides cambios con palabras normales. Claude crea y edita los archivos dentro de una carpeta de tu ordenador. No necesitas escribir código ni montar la página bloque por bloque en un constructor.

Si estás en España, puedes instalar Claude y entrar directamente. No necesitas comprar un servidor, configurar una VPN ni cambiar tu ubicación para empezar. El servidor aparece mucho más tarde, cuando la web ya está terminada y quieres publicarla para que otras personas puedan abrirla.

En esta guía recorremos todo el proceso: instalar Claude, abrir Claude Code, preparar un briefing, construir la primera versión, corregirla, comprobarla en móvil y, solo al final, contratar un alojamiento europeo y conectar el dominio.

Paso 01Qué vas a conseguir

Imagina que necesitas una landing para una consultoría, una formación, un evento o un servicio local. Creas una carpeta vacía, la abres en Claude Code y escribes:

Quiero crear una página de una sola pantalla larga para mi consultoría. Antes de construirla, hazme preguntas sobre el servicio, el cliente, los casos reales y el estilo visual. Prepara un briefing, enséñamelo y espera mi aprobación.

Claude te entrevista. Puedes responder con frases breves, pegar materiales o usar el dictado del ordenador. Después convierte las respuestas en una estructura clara: propuesta, público, problema, solución, pruebas, oferta, preguntas frecuentes y llamada a la acción.

Cuando apruebas el briefing, Claude crea una web real en la carpeta. La abres en el navegador y ves titulares, botones, tarjetas, imágenes, testimonios y una versión adaptable al móvil. Si el primer bloque no convence, no empiezas de cero. Dices: «El titular es demasiado genérico. Dame cinco opciones más concretas para un autónomo que depende del boca a boca. No cambies todavía el archivo». Eliges una y Claude la coloca.

Así avanzas durante cinco, diez o veinte iteraciones. Todo permanece en tu ordenador y nadie ve el proyecto hasta que decides publicarlo.

Paso 02Cómo funciona el sistema en España

La ruta tiene cuatro piezas y su orden importa.

1. La aplicación de Claude funciona en tu ordenador.
2. Claude Code trabaja dentro de la carpeta que tú autorizas.
3. El navegador muestra una vista previa local y privada.
4. El alojamiento o VPS europeo se contrata cuando la versión final está lista para publicarse.

Durante la creación no necesitas un servidor. La palabra «local» significa que los archivos están en tu Mac o PC. Puedes abrirlos, hacer una copia y seguir trabajando aunque todavía no tengas dominio.

Esta separación evita pagar infraestructura antes de saber qué vas a publicar. También reduce el miedo: probar colores, reescribir una sección o romper una versión no afecta a una página pública. Primero construyes y apruebas. Después subes.

Paso 03Qué necesitas antes de empezar

Necesitas un ordenador con macOS o Windows, conexión a internet, una cuenta de Claude y una carpeta para el proyecto. Para trabajos frecuentes conviene un plan de pago porque las sesiones largas consumen más uso, pero puedes comprobar primero qué funciones ofrece el plan disponible en tu cuenta.

Prepara también los materiales que ya tengas: descripción del servicio, precios, fotografías, logotipo, testimonios, preguntas de clientes y enlaces de referencia. No hace falta que estén perfectos. Claude puede ayudarte a ordenar el contenido, pero no debe inventar datos, clientes ni resultados.

No compres todavía un VPS. Tampoco necesitas saber qué es Nginx, DNS o SSH. Cuando llegue el momento de publicar, Claude puede preparar los archivos y darte instrucciones concretas para tu proveedor.

Paso 04Instala Claude y abre Claude Code

Entra en claude.ai, descarga la aplicación oficial para tu sistema e inicia sesión. Desde España puedes hacer el registro y el pago de forma habitual, sin una conexión intermedia.

Dentro de la aplicación abre la sección Code. Si Windows solicita Git, instala el componente indicado y reinicia Claude. Git permite registrar cambios y volver a una versión anterior, pero no necesitas aprender sus comandos para empezar.

Crea una carpeta con un nombre reconocible, por ejemplo web-consultoria-madrid. No uses Descargas ni una carpeta llena de documentos personales. Claude tendrá permiso para trabajar dentro del directorio elegido, así que cada proyecto importante debería tener su propia carpeta.

Inicia una sesión nueva y selecciona esa carpeta. A partir de ese momento Claude puede crear HTML, estilos, scripts e imágenes del proyecto. Antes de aceptar una acción, lee lo que propone. La aplicación muestra los permisos y los cambios relevantes.

Paso 05Empieza por un briefing de verdad

El error más común es pedir «hazme una web moderna» y esperar que la IA adivine el negocio. Claude no conoce a tus clientes, no sabe qué prueba genera confianza y no comparte tu definición de «moderna». Si faltan datos, rellenará los huecos con frases correctas pero intercambiables.

Empieza con este mensaje:

Quiero crear una landing page para vender mi servicio.

Antes de tocar ningún archivo, hazme una entrevista.
Pregunta una cosa cada vez y espera mi respuesta.

Necesitas descubrir:
- qué vendo y qué incluye;
- quién es el cliente ideal;
- qué situación le lleva a buscar ayuda;
- qué resultado concreto obtiene;
- qué alternativas ya ha probado;
- qué objeciones frenan la compra;
- en qué se diferencia mi método;
- qué casos, testimonios y cifras puedo demostrar;
- cuál es el precio y si existen opciones;
- qué garantías y límites debo explicar;
- qué acción quiero que haga la persona;
- adónde debe llevar cada botón;
- qué webs me gustan y cuáles no;
- qué colores, estilos e imágenes debo evitar.

Al terminar, prepara un briefing completo, señala los huecos
y haz las últimas preguntas. No construyas la web hasta que
yo escriba: «Briefing aprobado».

Responde como hablarías con una persona. Si una pregunta no aplica, dilo. Adjunta documentos o pega el texto de tus notas. Cuando aparezca una afirmación importante, distingue entre un hecho comprobado y una idea que todavía hay que validar.

Esta fase suele descubrir que el problema no era el diseño. Quizá el servicio intenta hablar con tres públicos a la vez, el resultado es abstracto o los testimonios no explican qué cambió. Resolverlo antes de diseñar ahorra muchas correcciones.

Paso 06Pide la primera versión

Cuando el briefing represente bien el proyecto, utiliza una instrucción como esta:

Briefing aprobado. Construye la primera versión en esta carpeta.

Requisitos:
1. Crea una landing con HTML, CSS y JavaScript.
2. Define primero la estructura y los textos.
3. Adapta el diseño a ordenador, tableta y móvil.
4. No inventes testimonios, precios, cifras ni garantías.
5. Si falta un dato, deja un marcador muy visible.
6. Haz que todos los botones tengan un destino real.
7. Usa HTML semántico, contraste legible y navegación con teclado.
8. Optimiza las imágenes y evita dependencias innecesarias.
9. Comprueba que la página abre sin errores.
10. Al terminar, abre una vista previa y resume qué has creado,
qué funciona y qué debo revisar personalmente.

Para una landing, HTML, CSS y JavaScript suelen ser suficientes. Un framework puede ser útil en una aplicación, pero añade complejidad a una página que solo necesita explicar una oferta y recoger una solicitud. Pide la solución más sencilla que cumpla la tarea.

Claude puede crear un único index.html o separar los estilos y scripts. No necesitas editar esos archivos a mano. Sí conviene pedir un archivo breve con instrucciones para abrir, publicar y actualizar el proyecto.

Paso 07Revisa primero el mensaje, después el diseño

Abre la dirección local que te indique Claude. En ocasiones será un archivo; en otras, una dirección que empieza por localhost. Esa página solo existe en tu ordenador.

Haz una primera revisión de cinco segundos. ¿Se entiende qué ofreces? ¿Queda claro para quién es? ¿La promesa es concreta? ¿La siguiente acción está visible? Si la respuesta es no, todavía no importa si la sombra de una tarjeta es bonita.

Después lee de arriba abajo como cliente. Marca las frases que podrían pertenecer a cualquier competidor. Comprueba que el orden responde a las preguntas reales: qué es, por qué me sirve, por qué debería confiar, qué incluye, cuánto cuesta y qué hago ahora.

Solo entonces revisa la parte visual: tamaño del texto, espacios, colores, jerarquía, fotografías y coherencia. Una web eficaz no necesita veinte efectos. Necesita que la persona no se pierda.

Paso 08Da correcciones que Claude pueda ejecutar

«Hazlo más premium» obliga a adivinar. Una buena corrección contiene lugar, problema, resultado y límites.

En el primer bloque, el titular ocupa cuatro líneas y la promesa queda escondida. Redúcelo a dos líneas, conserva la idea de conseguir solicitudes sin depender de recomendaciones y deja el resto de la página sin cambios.

Cuando todavía estás pensando, pide opciones sin autorizar cambios:

Propón siete titulares. Para cada uno explica en una frase qué motivación activa. No edites la web hasta que elija uno.

Trabaja por secciones. Primero portada, después problema, método, prueba, oferta, precio y FAQ. Tras cada modificación grande, vuelve a recorrer toda la página: una sección puede funcionar aislada y romper el ritmo general.

Pide que Claude haga una copia o un commit antes de una transformación amplia. Entonces podrás decir «vuelve a la versión anterior» si el experimento no funciona.

Paso 09Usa referencias sin copiar

Reúne entre tres y cinco webs que te gusten. Elige proyectos con una tarea parecida: una consulta se compara mejor con servicios profesionales que con una tienda de moda. Puedes enviar enlaces o capturas.

Analiza estas referencias por separado:
- composición de la portada;
- tipografía y tamaños;
- paleta y contraste;
- anchura, márgenes y espacios;
- forma de botones y tarjetas;
- tratamiento de fotografías;
- ritmo entre secciones.

Después crea un pequeño sistema visual para mi web.
No copies textos, logotipos ni composiciones completas.
Extrae principios compatibles con mi producto.
Enséñame el sistema antes de modificar los archivos.

Una referencia no es una orden para clonar. Sirve para convertir gustos vagos en decisiones observables. «Me gusta porque usa una columna estrecha, títulos grandes y fotografías cálidas» es mucho más útil que «hazlo parecido».

Paso 10Añade fotos y materiales reales

Crea dentro del proyecto una carpeta llamada images y coloca allí las fotografías aprobadas. Usa nombres claros: paul-retrato.webp, caso-restaurante.webp, logo.svg. Evita archivos como IMG_4827-final-final2.jpg.

Pide a Claude que comprima imágenes sin deformarlas, añada texto alternativo y reserve el espacio correcto para evitar saltos durante la carga. Para la portada, indica qué parte de la foto debe permanecer visible en móvil.

No publiques una cara generada como si fuera un cliente real. Tampoco inventes reseñas. Si aún no tienes prueba social, sustituye esa sección por proceso, entregables, experiencia verificable o una demostración del trabajo.

Paso 11Comprueba la versión móvil y la accesibilidad

Más de una persona abrirá la web desde el teléfono. Pide una auditoría explícita:

Revisa la web en 390, 768, 1024 y 1440 píxeles.
Busca texto cortado, desbordamiento horizontal, botones pequeños,
menús que no abren, imágenes deformadas y espacios excesivos.
Comprueba contraste, foco de teclado, etiquetas de formularios,
textos alternativos y jerarquía de encabezados.
Corrige los problemas y enumera cada cambio.

Después pruébala tú. Abre menú, botones, formulario, enlaces, acordeones y selector de idioma si existe. Gira el teléfono. Aumenta el tamaño del texto. La auditoría automática ayuda, pero la prueba humana descubre detalles de uso real.

Paso 12Evita que la IA invente información

Claude escribe con seguridad incluso cuando un dato no estaba en el briefing. Dale una regla permanente: toda cifra, testimonio, colaboración, plazo o garantía debe tener una fuente dentro del proyecto.

Pide una tabla con tres columnas: afirmación, fuente y estado. Lo que no tenga fuente se elimina, se suaviza o queda marcado para revisión. Haz lo mismo con enlaces, precios, condiciones y datos de contacto.

Si la web trata salud, derecho, inversión u otra materia sensible, el texto debe revisarlo un profesional competente. La IA puede organizar información, pero no sustituye esa validación.

Paso 13Formularios, analítica y privacidad

Una landing suele necesitar un formulario o una reserva. Decide dónde llegarán las solicitudes antes de diseñar el botón. Puede abrir WhatsApp, un calendario o un formulario conectado a tu herramienta habitual.

No pidas veinte campos. Para un primer contacto suelen bastar nombre, medio de contacto y una pregunta que ayude a calificar la solicitud. Comprueba el mensaje de éxito y el comportamiento cuando hay un error.

Si recoges datos personales o instalas analítica y cookies, añade el aviso legal, la política de privacidad y el mecanismo de consentimiento que corresponda a tu actividad. No copies textos legales de otra empresa: pide a un profesional que los adapte a tu caso.

Paso 14Cuándo comprar el servidor

Este es el momento de contratar alojamiento: la versión local está aprobada, los textos son definitivos, las imágenes están optimizadas y los botones funcionan. Antes no hace falta.

Para una página estática puedes usar un hosting administrado o un VPS europeo sencillo. Si eliges VPS, una configuración básica suele bastar para una landing: Ubuntu LTS, uno o dos núcleos, alrededor de 2 GB de memoria y copias de seguridad. Elige un centro de datos en España o en la Unión Europea si tu público está aquí.

El servidor de publicación no sirve para entrar en Claude. Su trabajo es guardar los archivos y responder cuando alguien visita tu dominio. Son dos etapas distintas: Claude construye en tu ordenador; el servidor entrega la copia final al público.

Al contratar, guarda en un gestor de contraseñas la IP, el usuario y la clave. Activa copias de seguridad y actualizaciones de seguridad. No pegues credenciales en una captura pública ni las guardes dentro de la carpeta que vas a subir.

Paso 15Publica la web y conecta el dominio

Compra el dominio cuando el nombre esté decidido. En el panel del dominio tendrás que crear registros DNS que apunten al alojamiento. La propagación no siempre es inmediata.

Puedes pedir a Claude un plan adaptado a tu proveedor:

La web está aprobada y quiero publicarla.
Mi proveedor es [nombre] y mi dominio es [dominio].
Prepara una lista segura y reversible de pasos.
Incluye copia de seguridad, subida de archivos, configuración web,
DNS, certificado HTTPS y comprobación final.
No borres ni sobrescribas nada sin mostrarme antes el destino exacto.

Si usas un VPS, lo habitual es colocar los archivos en una carpeta web, configurar el servidor para el dominio y emitir un certificado HTTPS. Si usas hosting administrado, probablemente subirás una carpeta desde un panel o conectarás un repositorio. Sigue la documentación del proveedor y pide ayuda si una instrucción implica borrar datos.

Después de publicar, abre la dirección con https://, prueba también la variante con y sin www, revisa el móvil y envía el formulario real. Comprueba la imagen al compartir el enlace y crea una página 404 sencilla.

Paso 16Lista de control antes del lanzamiento

• El primer bloque explica oferta, público y siguiente paso.
• No hay marcadores, textos de ejemplo ni enlaces vacíos.
• Precios, cifras, nombres y testimonios están verificados.
• Todas las imágenes tienen permiso de uso y tamaño razonable.
• Menú, botones, formulario y mensajes de error funcionan.
• La página se puede usar con teclado y el contraste es legible.
• Móvil, tableta y escritorio están revisados.
• El dominio abre con HTTPS y redirige a una versión principal.
• Existe una copia de la última versión local.
• Privacidad, cookies y datos de contacto están revisados.

Paso 17Cómo organizar una tarde de trabajo

Una tarde funciona mejor si no intentas diseñar mientras todavía decides qué vendes. Reserva el primer bloque para información. Durante unos cuarenta minutos responde a la entrevista, adjunta materiales y corrige el briefing. El resultado de esta fase no es una web, sino una decisión clara sobre el mensaje.

En el segundo bloque deja que Claude prepare la estructura y la primera versión. No interrumpas cada pequeño cambio. Espera a que exista una página completa, abre la vista previa y toma notas fuera del chat. Separa las notas en tres grupos: errores de contenido, problemas de jerarquía y preferencias visuales.

Dedica el tercer bloque a las correcciones importantes. Empieza por el primer grupo, porque una frase falsa o confusa pesa más que un color imperfecto. Continúa con la jerarquía: orden de secciones, títulos, llamadas a la acción. Termina con la capa visual.

La última parte es para pruebas. Mira móvil y escritorio, pulsa cada elemento y lee la página en voz alta. Todavía no publiques si faltan imágenes definitivas, una URL de botón o una condición comercial. Una tarde puede producir una web lista para revisión; no tiene que justificar un lanzamiento precipitado.

Si te quedas sin tiempo, cierra la sesión con un mensaje de continuidad:

Resume el estado actual del proyecto en un archivo PROYECTO.md.
Incluye objetivo, decisiones aprobadas, archivos principales,
pendientes, datos que no debemos inventar y el siguiente paso exacto.
No modifiques el diseño.

Ese archivo evita reconstruir el contexto en la próxima sesión y también ayuda si otra persona revisa el proyecto.

Paso 18Qué hacer cuando algo falla

Si la vista previa no abre, no pegues un mensaje genérico de «no funciona». Copia el error completo o adjunta una captura. Explica qué acción lo produjo y qué esperabas ver. Claude puede revisar procesos, rutas y archivos con mucha más precisión si recibe ese contexto.

Cuando una imagen no aparece, comprueba primero que está dentro de la carpeta del proyecto y que el nombre coincide, incluidas mayúsculas y extensión. Un archivo puede funcionar en tu Mac y fallar en un servidor Linux porque el servidor distingue entre Foto.webp y foto.webp.

Si después de una corrección desaparece una sección, pide un resumen de los últimos cambios y una comparación con la versión anterior. No autorices una reconstrucción completa hasta saber qué se perdió. Normalmente basta con recuperar un bloque o corregir una etiqueta.

Cuando el diseño se vuelve lento, solicita una auditoría de rendimiento antes de añadir más herramientas. Las causas habituales son imágenes enormes, vídeos que cargan al inicio, muchas tipografías o librerías incluidas para un único efecto. Pide medir primero y simplificar después.

Si el problema solo aparece en producción, reúne cuatro datos: URL exacta, dispositivo, navegador y momento aproximado. Comprueba la consola, la pestaña de red y los registros del servidor si tienes acceso. Trabaja sobre una copia local y publica una corrección pequeña. No experimentes directamente sobre la única versión pública.

Paso 19Cómo mantener el proyecto comprensible

Aunque Claude escriba el código, la carpeta debe poder entenderse. Pídele nombres descriptivos, una estructura pequeña y un documento README.md con instrucciones. El documento debería explicar cómo abrir la web, dónde cambiar textos, dónde colocar imágenes y cómo generar la versión de publicación.

Guarda decisiones de contenido en un archivo separado. Por ejemplo: tono de voz, términos prohibidos, forma correcta de escribir la marca, público principal y llamada a la acción. Así una sesión futura no cambia «solicita una llamada» por «compra ahora» sin motivo.

No acumules cinco copias llamadas final, final-buena y final-ahora-si. Usa Git o copias fechadas. Antes de publicar, identifica una versión concreta y anota qué contiene. Si más tarde aparece un fallo, sabrás exactamente qué estaba en línea.

También conviene separar contenido privado de contenido público. Contratos, listas de clientes, notas de entrevistas y claves no pertenecen al directorio que se despliega. Si Claude necesita consultarlos, facilita solo el fragmento imprescindible y pide que no lo copie a la web.

Paso 20Ideas de webs que puedes construir con este método

La forma más fácil de empezar es una página con un único objetivo: presentar una consulta, captar solicitudes para un servicio, anunciar un taller o validar una nueva oferta. El alcance pequeño permite dedicar atención al mensaje y lanzar sin una arquitectura complicada.

Después puedes crear un porfolio con casos, una biblioteca de recursos, la página de un evento, una carta digital para un negocio local o una microsite para una campaña. En todos estos casos se repite el mismo ciclo: briefing, primera versión local, correcciones, pruebas y publicación.

Un blog, una zona privada o una tienda requieren decisiones adicionales. Hay que pensar cómo se editará el contenido, dónde vivirán los datos, quién gestiona usuarios, qué ocurre con pagos y cómo se recupera el sistema. Claude puede ayudar a construirlos, pero no los trates como una landing más larga.

Empieza con la unidad más pequeña que entregue valor. Si una página y un formulario permiten validar la demanda, no construyas todavía una plataforma con cuentas. Cuando el proceso comercial esté probado, amplía el proyecto con información real de uso.

Paso 21Qué pedir después del lanzamiento

Una web no termina el día que se publica. Empieza la etapa de observar. Reúne preguntas de clientes, mide qué botones se usan y detecta dónde abandonan. Cambia una cosa cada vez para saber qué produjo el resultado.

Claude puede añadir nuevas páginas, traducir contenido, crear una sección de casos o mejorar rendimiento. Antes de cada cambio, descarga o conserva una copia de la versión pública. Trabaja primero en local, revisa y publica solo los archivos aprobados.

No conviertas la página en un laboratorio permanente. Si cumple su función, prioriza ofertas, tráfico y conversaciones con clientes. El diseño es una herramienta, no el negocio.

Paso 22Errores frecuentes

Comprar infraestructura antes de construir

En España no necesitas servidor para abrir Claude. Construye primero en local y paga alojamiento cuando exista una versión lista.

Pedir una web con una sola frase

Sin briefing, Claude rellena huecos con generalidades. Dedica tiempo a oferta, público y pruebas.

Cambiar toda la página a la vez

Las correcciones grandes hacen difícil saber qué mejoró. Divide el trabajo por bloques y conserva versiones.

Confiar en una sola vista

Una portada bonita en el portátil puede romperse en un iPhone. Revisa varios anchos y dispositivos reales.

Publicar datos inventados

Un texto convincente no convierte una cifra falsa en verdadera. Exige fuentes y elimina lo que no puedas demostrar.

Subir contraseñas al proyecto

Credenciales, claves de API y datos privados no deben vivir en archivos públicos. Usa variables de entorno y un gestor de contraseñas.

Paso 24Resumen

La secuencia correcta en España es sencilla. Instala Claude directamente, crea una carpeta, abre Claude Code y empieza por una entrevista. Aprueba el briefing, construye una primera versión local y mejora cada sección con correcciones concretas. Verifica hechos, móvil, accesibilidad, formularios y privacidad.

Solo cuando todo esté aprobado contrata alojamiento, conecta el dominio, activa HTTPS y sube la copia final. Así no pagas un servidor para empezar ni mezclas la creación con la publicación.

La ventaja real no es producir código más rápido. Es acortar la distancia entre una idea y algo que puedes mirar, probar y corregir. Tú conservas el criterio y Claude se ocupa del trabajo técnico repetitivo.