# Crea tu primera web con Claude Code en una tarde > De una carpeta vacía a una web publicada: el método paso a paso y los prompts exactos para crear tu primera web con Claude Code sin saber programar. - Tipo: Guía - Categoría: Programación - Autor: Álvaro Checa - Publicado: 22 de octubre de 2026 - Actualizado: 22 de octubre de 2026 - Página original: https://recursos.hubmedia.io/guias/primera-web-con-claude-code - Publicado por: Recursos Hub Media (https://recursos.hubmedia.io/) ## Lo que vas a construir Una web sencilla de una sola página para ti o tu negocio: presentación, servicios, galería y un botón de contacto. Lo bastante simple para terminarla en una tarde y lo bastante real para enseñarla. Solo necesitas Claude Code funcionando (si aún no lo tienes, mira primero la guía de instalación) y una idea clara de lo que quieres contar. ## El método en 6 pasos 1. **1. Escribe la idea en cinco líneas**: Antes de abrir Claude Code: para quién es la web, qué tiene que conseguir (que te escriban, que compren, que te sigan), las secciones que quieres, dos webs que te gusten y los colores de tu marca. 2. **2. Pide un plan, no código**: Crea una carpeta vacía, abre Claude Code dentro, activa el modo plan (Mayúsculas + Tab) y pega el primer prompt de abajo. Lee el plan y pide cambios hasta que te convenza. 3. **3. Construye por partes**: Aprueba el plan y deja que cree la primera versión. Después mejora una sección cada vez: es mucho más fácil corregir algo pequeño que rehacerlo todo. 4. **4. Mírala en tu navegador**: Pídele: «¿Cómo veo la web en mi navegador?». Normalmente basta con abrir el archivo index.html o con un comando que él mismo ejecuta. Revísala también con la ventana estrecha, como si fuera un móvil. 5. **5. Pule los detalles**: Textos, fotos, colores, tipografía. Describe lo que no te gusta como se lo dirías a un diseñador: «el título se ve pequeño en el móvil», «quiero más aire entre secciones». 6. **6. Publícala gratis**: Pídele que te guíe para publicarla en un servicio gratuito como GitHub Pages o Vercel. Te dirá qué cuentas crear y qué botones pulsar. En unos minutos tendrás una dirección para compartir. ## Los prompts del proceso ### Prompt: 1. El plan de la web (En modo plan, con la carpeta vacía) Versión para Claude Code (Probado en Claude Code): ```text Quiero crear una web de una sola página para [quién eres o tu negocio]. Su objetivo es que los visitantes [lo que quieres que hagan: me escriban / reserven / me sigan en Instagram]. Secciones: [lista de secciones]. Estilo: [moderno, minimalista, colorido…], con estos colores: [colores]. Me gustan webs como [ejemplos]. Tiene que verse perfecta en el móvil. No sé programar: usa la solución más sencilla posible (HTML y CSS si basta) y explícame el plan antes de crear nada. ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. ### Prompt: 2. Mejorar una sección (Una sección cada vez) Versión para Claude Code (Probado en Claude Code): ```text Mejora la sección [nombre de la sección]. Lo que no me convence: [qué ves mal]. Quiero que [cómo debería verse o funcionar]. No toques el resto de la web. ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. ### Prompt: 3. Revisión final antes de publicar (Cuando creas que está terminada) Versión para Claude Code (Probado en Claude Code): ```text Revisa la web como si fueras un experto antes de publicarla: que se vea bien en móvil y ordenador, que todos los enlaces y botones funcionen, que las imágenes tengan texto alternativo, que cargue rápido y que tenga título y descripción para Google. Dame una lista de lo que falla, de más a menos importante, y [arréglalo / espera a que te diga qué arreglar]. ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. ### Prompt: 4. Publicarla (Cuando esté lista) Versión para Claude Code (Probado en Claude Code): ```text Quiero publicar esta web gratis en [GitHub Pages / Vercel]. Guíame paso a paso: qué cuenta necesito, qué tengo que hacer yo y qué puedes hacer tú. Explícamelo como a alguien que nunca lo ha hecho. ``` Las partes entre [corchetes] son variables: cámbialas por lo que quieras. ## 5 consejos que te ahorrarán horas 1. **Una petición, un cambio.** Si pides diez cosas a la vez, alguna saldrá mal y no sabrás cuál. 2. **Guarda versiones.** Pídele «guarda esta versión en git» cada vez que algo funcione. Si luego algo se rompe, podrás volver atrás. 3. **Si se atasca, empieza de cero.** Escribe /clear y explícale la tarea otra vez, más corta y concreta. 4. **Pídele que te explique.** «¿Qué has cambiado y por qué?» te ayuda a aprender y a detectar errores. 5. **Nada de claves en el código.** Si tu web usa algún servicio con contraseña o clave, pídele que la guarde en un archivo aparte que no se publique. **¿Quieres los 4 prompts?** Comenta WEB en cualquier post de @ia.hub o escríbenoslo por mensaje directo, y te enviamos los prompts. [Ir a @ia.hub](https://www.instagram.com/ia.hub/) ## Preguntas frecuentes ### ¿Cuánto cuesta tener la web publicada? Una web sencilla como esta se puede publicar gratis en servicios como GitHub Pages o Vercel. Si quieres un dominio propio (tunegocio.com), tendrás que pagar el dominio, normalmente unos pocos euros al año. ### ¿Puedo añadir un formulario de contacto? Sí. Pídele a Claude Code un formulario que funcione sin servidor, con un servicio gratuito de formularios, o un simple botón que abra tu correo o WhatsApp. ### ¿Y si quiero cambiar algo dentro de un mes? Abre Claude Code en la misma carpeta y pídele el cambio. Si tiene un archivo CLAUDE.md con las instrucciones del proyecto, recordará cómo está hecha la web.