Si llegaste hasta aquí, seguramente estás igual de cansado que yo de ese montón de videos que son puro hype, donde supuestamente te enseñan a crear sitios web espectaculares con inteligencia artificial en cinco minutos. Casi siempre es lo mismo: un clickbait vacío que promete que con tres skills y un par de plugins la IA hace magia. La realidad es bastante más terca, y por eso quiero mostrarte cómo se hace una web con Claude Code de verdad, con un proceso real de principio a fin.
En este post te enseño exactamente el flujo que uso para construir una landing page efectista —de esas que puedes vender tranquilamente en más de mil dólares a una marca personal o a una empresa— sin escribir una sola línea de código a mano. Y no solo eso: te dejo gratis la misma skill que uso para diseñar este tipo de páginas, junto con un super prompt y una guía paso a paso. Descárgalos aquí abajo y léelos mientras avanzas con el post.
🛠️ Descarga gratis la skill efectista
El paquete incluye la skill, la plantilla de super prompt y la guía paso a paso. Déjala en tu carpeta de skills de Claude Code y empieza a diseñar landings con el mismo flujo que uso yo. El enlace de descarga está al inicio y al final de este post.
¿De verdad puedes crear una web con Claude Code sin saber programar?
Sí, puedes crear una web con Claude Code sin saber programar, pero con un matiz importante: la IA no hace magia si no le das contexto real. Claude Code no inventa tu marca, tu copy ni tus imágenes a partir de la nada. Lo que hace —y muy bien— es construir el sitio cuando tú le entregas una base documental sólida: quién eres, qué vendes, qué estilo quieres y qué efectos buscas. Sin esa base, el resultado es genérico, y ese es justo el problema que sufre la mayoría.
🎓 ¿Quieres dominar Claude Code como tu developer personal?
En uxdivi.com/cursos tienes mi curso completo de Claude Code: 11 clases donde construimos esta misma landing, una automatización y un dashboard, con la base documental, las skills y los flujos que de verdad funcionan. Accede como suscriptor desde el plan anual y llévate también el resto del catálogo.
He hecho muchísimas pruebas, y te lo digo claro: si solo instalas tres skills y le pides a la IA "hazme un sitio web", no lo va a lograr al 100%, por más prompt engineering específico que apliques. La diferencia entre un resultado plano y una landing premium no está en la herramienta, está en el método. Si todavía no tienes claro qué es esta herramienta, te recomiendo leer primero qué es Claude AI y cómo empezar desde cero, y luego vuelves aquí para el flujo completo.
Paso 1: organiza la carpeta de trabajo y el contexto
Claude Code trabaja por carpetas. Tú eliges una carpeta en tu computadora y ese es el espacio de trabajo donde la IA va a operar. Lo primero, antes de pedirle nada, es estructurar bien esa carpeta. Si la carpeta está vacía o desordenada, Claude empieza a inventar cosas que no debería, y ahí es donde se te van los prompts iterando mil veces sin llegar a buen puerto.
Mi estructura base tiene siempre estos elementos dentro de la carpeta del proyecto:
- Un archivo
CLAUDE.mdcon las instrucciones generales de trabajo. - Una carpeta de archivos, donde guardo todo lo que ya no uso.
- Una carpeta de contexto, la más importante de todas: aquí va de qué trata el proyecto.
- Una KB (base de conocimiento) con un README y un changelog, donde Claude escribe cosas a medida que trabaja.
En la carpeta de contexto guardo el documento eje del proyecto. En mi caso es la historia maestra de mi marca personal, el documento sobre el que se va a basar todo el copy de la landing. Si tú estás haciendo, por ejemplo, una web para un directorio de bienes raíces, en lugar de una historia personal escribes el contexto completo del proyecto: de qué va, qué vende, cuál es su fortaleza, su oferta de valor. Ese background normalmente lo tenemos que escribir nosotros, los humanos. Esa es la parte humana que hace que este trabajo sea diferente y deje de sonar a plantilla.
Consejo: Establecer un contexto amplio al inicio no es perder tiempo, es ganarlo. Cuanto mejor entiende Claude tu proyecto, menos iteras después — y por lo tanto gastas menos tokens. La gente que se queda sin tokens rápido es la que le tira instrucciones a lo loco sin construir esta base primero.
Paso 2: crea el sistema de diseño con Claude Cowork
Con la carpeta estructurada, el siguiente paso es definir el sistema de diseño de la marca. Hay varias formas de hacerlo, pero la más rápida cuando tienes una base reducida —un logo, un par de colores— es apoyarte en Claude Cowork. Si quieres ver este flujo a fondo, lo desarrollo en el curso de Claude AI y Cowork para freelancers, que es donde explico cómo manejar clientes, contenido y proyectos con estas herramientas.
Lo que yo hice fue sencillo: le pasé a Claude Cowork los logos de mi marca personal y le pedí que escaneara la URL de un sitio web de referencia que me gustaba para marca personal. A partir de ahí le di una sola instrucción clara: que creara un sistema de diseño simple basado en mis logos —tipografía para títulos, tipografía para párrafos, colores, grosores— y que cruzara un poco esos estilos con los del sitio de referencia.
Claude escaneó el sitio, revisó las tipografías, verificó todo y me generó el sistema de diseño en un documento markdown. Me gusta que la IA me entregue documentos markdown porque es la forma más limpia en la que estas herramientas leen información. En ese documento quedó todo: la paleta de azules y gradientes, los fondos en sus distintas modalidades, los colores funcionales para estados, las reglas de contraste, las tipografías recomendadas, la escala tipográfica, los pesos a cargar, los espaciados, el layout y los radios.
Consejo: No te quedes siempre con la tipografía que la IA recomienda por defecto. Lo potente es que el sistema de diseño nazca ligado a tu marca y a tu logo — ahí es donde el resultado deja de parecer un template genérico y empieza a sentirse tuyo.
Paso 3: el copy, basado en tu historia real
Una vez que tengo el sistema de diseño guardado en su carpeta, paso al copy. Aquí uso mi historia maestra como base y, a partir de ella, defino la arquitectura de información del sitio: qué secciones van, en qué orden, qué dice cada una. Este es un paso intermedio que vale oro, porque le da a Claude el esqueleto narrativo de la landing antes de que toque una sola etiqueta de HTML.
No tienes que escribir el copy a mano si no quieres. Puedes apoyarte en la IA para generarlo a partir de tu contexto, igual que haces con el diseño. Si te interesa ese flujo específico, lo detallo en el post sobre cómo usar Claude para el copy de un sitio web en una hora, donde muestro el proceso real de principio a fin.
Paso 4: instala la skill efectista (la que te regalo)
Con el sistema de diseño y el copy listos, llega el momento de instalar la skill que te dejo para descargar gratis arriba. Es una skill que ya tengo completamente optimizada para crear sitios efectistas, bonitos y bien estructurados, basándose en todo el material que ya preparaste.
En el archivo descargable vas a encontrar tres cosas: la guía paso a paso de uso, una plantilla de super prompt y la carpeta de la skill efectista. Para instalarla, arrastras la carpeta de la skill a Claude Code y le dices algo como "instala esta skill a nivel global para diseñar sitios". También puedes copiar la carpeta directamente en tu directorio de skills. La skill incluye un documento de referencias para efectos premium y otro de guía de imágenes.
Consejo: Cuando instales una skill nueva a nivel de usuario, cierra y vuelve a abrir Claude Code para que la cargue. Si lo dejas en la sesión actual no la va a reconocer. Una vez reiniciado, le pides que compruebe que la skill está cargada y listo.
Paso 5: llena el super prompt y deja que Claude trabaje
En lugar de ir pasándole la guía de estilos, el copy y la arquitectura uno por uno, todo eso lo resumo en un super prompt: una plantilla que llenas con tus datos y le das a Claude en una sola instrucción. La plantilla te pide el producto y la audiencia, la acción principal, la promesa, la voz y el tono, el sistema de diseño, el copy, la arquitectura de información, la lista de imágenes, los efectos a aplicar y los requisitos técnicos.
Un punto que no puedes saltarte: las imágenes. Tienes que tenerlas listas antes de aplicar el super prompt, y saber dónde va cada una. Si no tienes imágenes propias, puedes descargarlas de un banco como Freepik, o crearlas directamente con IA usando herramientas como Nano Banana, e incluso conectar un MCP de generación de imágenes a través de Claude Cowork para que te las genere dentro del flujo. En mi caso ya tenía mis fotografías e imágenes preparadas fuera de cámara.
🎓 ¿Quieres aprender este flujo completo paso a paso?
En uxdivi.com/cursos tengo el curso de Claude Code, donde armo toda esta base documental, el sistema de diseño y la landing con muchísimo más detalle del que cabe en un post. ¡Accede como suscriptor y construye tu primera web premium con método!
Yo tengo dos formas de usar el super prompt: conversacional, donde le pides a Claude que te guíe para llenarlo paso a paso, o one shot, donde lo pegas ya completo y le das una sola instrucción. Como quiero que haga todo el diseño hasta el final, le aplico la propiedad de objetivo: le digo que genere el diseño en HTML en su versión final, completo, hasta que termine. Y aquí está la magia de Claude Code: mientras trabaja, tú puedes irte por un café. Cuando termina, te avisa, y vienes a ver el resultado.
El resultado y la iteración
Cuando Claude termina, copias la ruta del archivo y lo abres en el navegador. En mi caso, el resultado fue una landing con la estructura completamente definida y el copy al 100%: efecto de cursor magnético que se agranda al pasar por elementos clicables, efectos de desvanecimiento por CSS que funcionan muy bien en estilos dark, micro-movimientos, una sección de estadísticas, un formulario que me encanta y la presentación de mi ecosistema de marca. No tardó casi nada, precisamente porque el super prompt ya tenía todo el contexto cargado.
A partir de ahí viene la iteración: revisas qué quedó bien, qué hay que ajustar, le dices qué efectos quieres reforzar y vas puliendo. Pero ojo, esto es clave: si llegaste hasta aquí con la base bien hecha —carpeta organizada, copy detallado, sistema de diseño claro ligado a tu marca y arquitectura de información definida—, la iteración es mínima. Lo pesado del trabajo ya lo resolviste antes de generar.
Cómo llevar la web a producción
Tener el HTML listo es solo la mitad del camino; ahora hay que publicarlo. Esto depende del hosting donde trabajes. Yo uso y recomiendo Hostinger —te dejo mi recomendación detallada en el post sobre los mejores hosting para WordPress y Divi—, así que te explico el proceso ahí.
Dentro de Hostinger vas a la sección de dominios y creas o conectas un dominio o subdominio. Luego, en sitios web, eliges crear un sitio web vacío y seleccionas el tipo PHP/HTML personalizado, que es justo el tipo de código con el que Claude genera la landing. Escoges tu dominio, sigues los pasos y, dentro de la carpeta public, pegas los archivos del sitio: tanto tu prototipo HTML como los tokens CSS.
🎓 ¿Quieres conectar Claude Code a tu servidor y automatizar el deploy?
En uxdivi.com/cursos verás cómo dejar que Claude suba y configure tu sitio por SSH, además de tres ejemplos reales: una automatización, un dashboard completo y esta misma landing. ¡Accede como suscriptor y deja de hacer el deploy a mano!
Hay un atajo todavía más cómodo: puedes conectar Claude Code a tu servidor por SSH y pedirle que suba la web, la configure y deje todo funcionando. Claude Code se encarga del despliegue completo. Ese flujo de deploy automatizado lo explico dentro del curso, porque tiene su propia configuración.
Recomendaciones finales para tu primera web con Claude Code
Si vas a aplicar este flujo, estas son mis recomendaciones para que el resultado sea premium y no genérico:
- Recopila información real antes de empezar. La IA no hace magia: sin contexto, copy e imágenes propias, el resultado siempre será plano.
- Organiza la carpeta del proyecto a fondo. Una buena estructura es la diferencia entre un sitio coherente y uno que la IA se inventa sobre la marcha.
- Define el sistema de diseño ligado a tu marca, no a la tipografía que la IA recomienda por defecto.
- Arma la arquitectura de información antes de generar. El mismo Claude Code te ayuda con preguntas guía si se lo pides.
- Itera con calma al final. Con la base bien hecha, los ajustes son cosméticos, no estructurales.
Y si te interesa el lado de negocio de todo esto —porque sí, este tipo de landings se venden bien—, échale un ojo a cómo monetizar lo que creas con Claude para ponerle precio a tu trabajo con criterio.
Conclusión
Crear una web con Claude Code sin saber programar es totalmente posible, pero no por instalar tres skills y esperar magia, sino por seguir un proceso claro: contexto, diseño, copy, arquitectura y, recién entonces, generación e iteración. Esa parte humana —darle a la IA el material real de tu proyecto— es lo que separa una landing premium de un sitio que parece plantilla. Descarga la skill que te dejé, prueba el flujo en un proyecto real y mira lo que puedes lograr.
Comentarios
Para dejar un comentario, accede a tu cuenta de UXDivi.
Acceder a mi cuenta →