Crea tu primer sitio web con Claude Code: del brief del producto al dominio propio

Ya elegiste el nombre y compraste el dominio. El siguiente paso es conseguir que cualquier persona que abra ese dominio pueda ver el producto, entender para qué sirve y realizar la acción siguiente.

En esta guía usaremos Claude Code para crear un sitio de producto listo para publicar. El ejemplo será una herramienta de gestión de comentarios de clientes que todavía no ha abierto el registro. La función del sitio es clara: explicar el producto a profesionales independientes y permitir que las personas interesadas soliciten acceso anticipado.

Todo el proceso se desarrolla dentro de la herramienta de programación: crear la página, ajustar el diseño, conectar el formulario, comprobar el resultado y desplegar el sitio. El sitio en sí no necesita un chatbot ni otra función de IA.

Elige primero el flujo de desarrollo

Claude Code puede leer un proyecto, modificar archivos y ejecutar comandos, por lo que resulta útil para desarrollar y corregir continuamente un mismo sitio. En esta guía se utiliza Claude Code desde una terminal local.

Crea un directorio específico para el sitio y coloca allí el nombre aprobado del producto, los textos y los recursos disponibles. Si ya existe un proyecto, conserva su estructura. Para un proyecto nuevo, puedes pedir a la herramienta una implementación sencilla para una página única.

Si ya tienes una conexión funcional con Claude Code, puedes seguir utilizándola. Configura un proveedor de modelos cuando elijas acceso por API con pago según uso.

Para usar Claude Code a través de BetterToken, sigue la guía de configuración de Claude Code y configura la API Key y la Base URL. Mantén estos datos en el entorno local de desarrollo para que los utilice la herramienta; no los incluyas en el sitio público. Los modelos disponibles y las condiciones de acceso dependen de la configuración actual de la cuenta.

Después de la configuración, pide a Claude Code que revise el directorio del sitio y resuma los archivos existentes, el stack y el comando de inicio. La compatibilidad de una pasarela externa puede variar según el cliente y la función, así que verifica primero el modelo y las capacidades que necesitas.

Paso 1: Dale a la IA un brief con el que pueda construir

“Haz un sitio premium y tecnológico” no indica para quién es el producto ni qué debe hacer el botón principal.

Después de proporcionar el nombre aprobado y los recursos, envía una tarea como esta:

Objetivo: crear la primera versión del sitio de una herramienta de gestión de comentarios de clientes dirigida a profesionales independientes. El producto ayuda a reunir en un solo lugar las solicitudes de cambios de los clientes, en lugar de buscarlas en historiales de chat. El registro todavía no está abierto y el botón principal debe decir “Solicitar acceso anticipado”.

Alcance permitido: crear solo la página de inicio. Debe incluir una introducción al producto, un escenario de uso claramente marcado como demostración, tres usos principales, una sección de preguntas frecuentes y un acceso para solicitar la prueba. Utiliza el nombre y los recursos que proporcionaré.

No hacer: no añadir inicio de sesión, pagos ni un panel del producto. No inventar cifras de clientes, testimonios ni logotipos de socios.

Criterios de finalización: entregar primero una vista previa que se abra en el navegador y funcione tanto en escritorio como en móvil. Si el acceso a la prueba aún no está conectado a un servicio real, debe quedar claramente marcado como demostración.

Verificación: comprobar que la página inicia correctamente, revisar el diseño móvil y el comportamiento del botón principal, e informar qué pruebas se realizaron realmente.

Este brief basta para delimitar la primera versión. Los detalles pueden añadirse después de ver y revisar la página.

En la primera revisión, comprueba si la página explica el producto de forma correcta. ¿De dónde llegan los comentarios de los clientes? ¿Por qué debería probarlo una persona? ¿Qué ocurre después de pulsar el botón? Los colores y las animaciones pueden ajustarse después, pero la página debe responder primero estas preguntas.

Paso 2: Vincula cada cambio con una parte concreta de la página

Cuando la primera versión esté lista, el comentario más útil identifica el área exacta que dificulta la comprensión o el uso.

Por ejemplo, si una imagen grande ocupa toda la cabecera en móvil y obliga a desplazarse antes de entender el producto, continúa con una tarea como esta:

Objetivo: ajustar la cabecera móvil de la página de inicio actual para que el visitante vea primero la función del producto y el botón “Solicitar acceso anticipado”.

Alcance permitido: modificar únicamente el diseño y los estilos de la cabecera de la página de inicio.

Cambios concretos: en móvil, mover la imagen de demostración debajo del botón y conservar el texto actual. En escritorio, mantener el diseño actual en dos columnas.

Criterios de finalización: no debe haber desbordamiento horizontal en móvil, la imagen no debe cubrir el título ni el botón y el diseño de escritorio debe permanecer igual.

Verificación: comprobar un ancho móvil y uno de escritorio. Corregir solo los problemas causados por este cambio.

Abre la página después de cada cambio y confirma que el resultado real coincide con la petición. Si hay herramientas de navegador disponibles, pide a la IA que haga una vista previa directa. En caso contrario, abre la página tú mismo y entrega capturas junto con problemas reproducibles.

Cuando una versión quede aprobada, guarda un punto recuperable antes de iniciar la siguiente ronda de cambios. Así podrás volver rápidamente a una versión estable si la nueva dirección no funciona.

Paso 3: Haz que las solicitudes de acceso lleguen realmente

En este sitio, la función más importante no es una interacción compleja, sino recibir las solicitudes.

La primera versión puede abrir un formulario alojado que ya esté configurado, sin crear un sistema de cuentas solo para recopilar correos. El formulario puede pedir el email y una pregunta opcional: “¿Cómo gestionas actualmente los comentarios de tus clientes?”. Indica que la información se utilizará para contactar sobre el acceso anticipado y para investigar el producto.

Entrega a Claude Code la URL real del formulario y pide que sustituya el acceso de demostración. Después, entra desde el sitio, envía una solicitud de prueba y confirma que el registro aparece en el sistema receptor.

Si el formulario está integrado en el sitio, conecta el servicio real de envío e implementa los estados de envío, éxito y error. Muestra el mensaje de éxito únicamente después de que el sistema receptor confirme que los datos se guardaron.

Los mensajes de la página deben corresponder a acciones que realmente se completaron. Esto es más importante que añadir nuevas secciones visuales.

Paso 4: Revisa la vista pública antes de conectar tu dominio

Después de validar la vista local, publica el proyecto en una plataforma compatible con su stack. Empieza con una URL pública de prueba y ábrela desde otro dispositivo para comprobar imágenes, enlaces y formulario.

En Vercel, por ejemplo, se añade el dominio comprado al proyecto y después se configura el DNS con los valores que muestra ese proyecto. Utiliza los registros del proyecto actual. Si el dominio también se usa para correo, conserva los registros MX y los demás registros de email. El proceso completo aparece en la documentación de dominios personalizados de Vercel.

Cuando el dominio esté conectado, repite todo el recorrido desde tu propia dirección: abrir el sitio, entender el producto y completar la solicitud.

Una página informativa fija como esta no llama a un modelo cada vez que alguien la visita. El modelo participa durante el desarrollo; una vez publicado, el sitio funciona como un proyecto web normal. Si más adelante añades generación de contenido, análisis o chat para visitantes, diseña esa integración de modelo en tiempo de ejecución como una función independiente.

Paso 5: Lanza el producto con un sitio que ya funciona

Cuando empieces a compartirlo, utiliza capturas reales, una descripción clara y un acceso operativo. Si el producto aún busca usuarios de prueba, escribe “Solicitar acceso anticipado” tanto en la página como en los materiales de lanzamiento.

Cuando el sitio esté listo, revisa el directorio de startups de NewName.ai para ver cómo otros productos explican su utilidad y envía también tu proyecto. Centra la ficha en funciones reales, capturas actuales y una URL que funcione.

Después, lleva al proyecto los comentarios concretos de las visitas y solicitudes. Si las personas no entienden la diferencia entre el producto y una aplicación de chat, mejora la explicación. Si pulsan el botón pero no terminan la solicitud, revisa el formulario y el recorrido. Resuelve un problema claro cada vez y sigue mejorando el sitio.

El nombre da identidad al proyecto y el dominio le da una dirección. El resultado real de crear con IA es transformar la idea del producto en un sitio que las personas puedan abrir, entender y utilizar para dar el siguiente paso.