Cómo construir un sitio web con Claude Code · La guía práctica en español.

Hasta hoy, para construir un sitio web tenías una de dos opciones · contratar a un programador y pagar miles de séquels, o luchar con un creador de sitios web engorroso y terminar con algo que parece una plantilla. Claude Code cambia toda la ecuación. Abres Claude, hablas con él durante 30 segundos sobre lo que quieres que tenga el sitio web y él lo construye. En pocos minutos tienes un sitio web en vivo con imágenes, botones, una galería, un formulario de contacto y un botón de WhatsApp · sin escribir una sola línea de código. Esta guía responde exactamente a la pregunta 'cómo construir un sitio web con Claude Code' · desde las primeras instalaciones hasta un sitio web en vivo en internet. Revisaremos los 3 métodos de diseño, las habilidades que transforman un sitio web común en uno prémium y el despliegue en la nube. En español, paso a paso.

Lo que obtendrás al final de la guía

• Un sitio web en vivo en internet · con una dirección temporal de Vercel (puedes conectar tu propio dominio más adelante)
• Un flujo de trabajo ordenado con Claude Code · saber dar un prompt, trabajar en Plan Mode y cuándo aprobar
• Métodos de diseño en tu haber · transcripción libre a Claude, inspiración de un sitio web existente y componentes de 21st.dev
• Habilidades instaladas en Claude · un sitio web con accesibilidad, privacidad y diseño prémium y no AI genérico
• Respaldo completo del código en GitHub · si algo se rompe, se retrocede con un clic
• Infraestructura de base de datos lista en Supabase · si deseas recopilar correos electrónicos, pedidos o cualquier información

Qué es Claude Code y por qué supera a cualquier creador de sitios web

Paso 1 · Las 3 herramientas que se instalan antes de empezar

Vercel

Despliegue en la nube · El sitio web está en vivo en internet

El estándar predeterminado para el despliegue de sitios web. Sin Vercel, el sitio web que Claude construya para ti solo estará en tu computadora en localhost:3000 · nadie más lo verá. En cuanto le dices a Claude 'despliega en Vercel', él empuja el código, lo despliega en la nube y te devuelve una dirección pública que puedes compartir.

Consejo para agentes: después de registrarte, regresas a Claude → Customize → Connectors → Browse Connectors → Vercel → Connect. Así es como Claude despliega sitios web con un clic.

Supabase

Base de datos · Memoria para el sitio web

Postgres + Auth + Storage. En lugar de ejecutar un servidor para guardar correos electrónicos, pedidos o cualquier información · Supabase te ofrece todo esto con un clic. Si deseas un formulario de contacto que guarde todas las consultas, una lista de correo o una pequeña tienda · este es el software responsable de almacenar la información.

Consejo para agentes: al igual que Vercel · conectas el conector en Customize → Connectors. Nombre del conector: Supabase. La cuenta gratuita es suficiente para el 99% de los proyectos personales.

GitHub

Respaldo de código · Como Google Drive para tu sitio web

En GitHub se guarda todo el código del sitio web en línea. Si algo se rompe, si Claude cometió un error que no se puede deshacer, o si quieres trabajar en el sitio web desde otra computadora · GitHub guarda todo el historial. Cada vez que lo desees · dile a Claude 'haz una copia de seguridad en GitHub' y él empujará la última versión.

Consejo para agentes: los repositorios se guardan por defecto en Private (privado) · solo tú tienes acceso. Si deseas compartir el código con otro desarrollador · puedes cambiar a Public con un clic.

💡 Las tres herramientas juntas · cuestan cero séquels para principiantes. Solo si deseas un sitio web con alto tráfico (miles de usuarios al día) o una base de datos excepcionalmente grande · entonces hay planes de pago. Para el 99% de los proyectos personales y pequeños negocios · el plan gratuito es suficiente.

Paso 2 · Cómo abrir un nuevo proyecto en Claude

¿Quieres dominar Claude Code desde cero?

Esta guía te ha dado las bases. En el taller completo de Claude Code construimos juntos paso a paso: instalación, CLAUDE.md, habilidades, agentes y un sitio web en vivo en el aire. 4 sesiones grabadas, acceso de por vida.

Paso 3 · Método 1 · Arroja a Claude todo lo que se te ocurra

Ejemplo de prompt para Claude Code (para copiar y editar)

Quiero construir un sitio web que sea adecuado para plantillas para zapatos. Quiero que el sitio web tenga mi propio estilo · futurista, respirable, con fuentes claras y un contraste muy definido. Tonos: monocromo · blanco, negro, gris. Acento azul futurista. El menor desorden visual posible. Quiero imágenes de deportistas y soldados corriendo, de esos que hacen que la gente entienda la dirección. Quiero experiencias de clientes · personas que califican desde Google y recomiendan el producto. Si no tengo esto · simplemente deja un marcador de posición (placeholder) vacío para que lo llene yo mismo. Quiero un botón flotante de WhatsApp para que puedan comunicarse con un representante lo más rápido posible. En el Hero · quiero una imagen de una plantilla flotando en el espacio. Si no puedes crear una imagen así · crea un prompt para ingresarlo en un modelo de imágenes. Trabaja en Plan Mode. Muéstrame el plan. Después de que lo apruebe · procede con la construcción.

🎯 Importante · siempre se comienza en Plan Mode (botón en la parte inferior de Claude). Esto ahorra montones de tokens · Claude presenta un plan de trabajo antes de correr a construir, y puedes corregir antes de que invierta esfuerzo. En Plan Mode se ven todos los colores, fuentes y el orden de las secciones · y luego se aprueba.

Paso 4 · Método 2 · Inspiración de un sitio web existente

Prompt para ingresar a Claude junto con la imagen de inspiración y el enlace (para copiar)

Check deeply the elements, DOM, sources. Then start to create section by section, one by one, in all aspects · HTML, CSS, JS. Reference site: [Pega aquí el enlace del sitio web de inspiración] [Además · arrastra la imagen de página completa a Claude] Trabaja en Plan Mode. Muéstrame el plan · con qué secciones comienzas, en qué orden, qué componentes clonas. Después de que lo apruebe · procede con la construcción. Construye el sitio web parte por parte, no de golpe · así saldrá más parecido al original.

⚠️ Esto es inspiración · no copia. Se toma lo visual y la estructura, pero se reemplazan el contenido, las imágenes y los productos por los tuyos. Los colores y las fuentes también se pueden reemplazar. Así el sitio web se ve tan profesional como el sitio que te gustó · pero es tuyo.

Paso 5 · Método 3 · Componentes de 21st.dev (método Frankenstein)

Flujo de trabajo con 21st.dev

• Ingresas a 21st.dev y te registras con Google (5 segundos)
• Navegas por las categorías · Hero, Buttons, Cards, Galleries, Animations
• Encuentras un componente que te gusta · ves una vista previa en vivo en la página
• Haces clic en el botón azul Copy Prompt arriba
• Regresas a Claude, pegas y presionas Enter
• Claude construye el componente en el sitio web · verificas en localhost:3000 que se vea como lo mostró 21st

El taller completo de Claude Code reúne todo en un solo lugar: instalación, habilidades, agentes y construcción de sitios web. 4 sesiones grabadas de por vida.

Paso 6 · Habilidades · La diferencia entre un AI genérico y un sitio web prémium

⚖️ Especialmente importante · accesibilidad y privacidad. En Israel, un sitio web que no cumple con el estándar de accesibilidad (TI 5568) expone al propietario a una demanda de hasta 50,000 séquels. La política de privacidad es obligatoria según la Ley de Protección de Privacidad. Estas no son una 'opción' · son una obligación legal. Las habilidades resuelven esto con un clic.

agentskills.co.il

Repositorio de habilidades israelí en hebreo

El repositorio israelí · habilidades adaptadas a la regulación israelí (privacidad, accesibilidad), al idioma hebreo y al mercado local. Todas las habilidades son gratuitas. Vale la pena revisar todo antes de comenzar un nuevo sitio web para israelíes · especialmente Israeli Privacy Shield, Israeli Accessibility Compliance y Hebrew Content Writer.

Consejo para agentes: copias el comando de instalación negro de la página de la habilidad, lo pegas en Claude y Claude lo instala. La habilidad aparece más tarde en Customize → Skills.

skills.sh

Repositorio oficial de Anthropic · Miles de skills

El repositorio principal para skills de la comunidad. Navega por categorías (Website, Marketing, Productivity), encuentra una skill y verifica que tenga la etiqueta Trust Hub Pass (el código fue revisado y es seguro). Es especialmente útil la skill UI/UX Pro Max · 50 estilos de diseño, 161 paletas de colores y 57 parejas de fuentes.

Consejo para agentes: verifica siempre la etiqueta Trust Hub Pass antes de instalar · Así evitas descargar una skill que pueda realizar acciones no deseadas en el ordenador.

Paso 7 · Despliegue en vivo · El sitio web está activo en internet

¿Quieres dominar Claude Code desde cero?

Esta guía te ha dado las bases. En el taller completo de Claude Code construimos juntos paso a paso: instalación, CLAUDE.md, skills, agentes y un sitio web activo en internet. 4 encuentros grabados, acceso de por vida.

✅ Listo · Tienes un sitio web activo en internet construido con Claude Code, sin escribir una sola línea de código. A partir de aquí puedes seguir mejorando · añadir páginas, conectar un formulario de clientes potenciales a Supabase o añadir un blog. Cualquier cambio · simplemente díselo a Claude y él lo ejecutará y desplegará de nuevo.

Herramientas y enlaces útiles

Todo lo necesario para construir un sitio web con Claude Code · En un solo lugar

Ampliación detallada · Los 3 métodos de diseño, 9 skills recomendadas y despliegue en la nube paso a paso

Guía completa de instalación para Claude Code · El punto de partida si aún no lo has instalado

Despliegue del sitio web en vivo · Dirección pública con un clic. Gratis para principiantes

Base de datos para el sitio web · Formularios, clientes potenciales y pedidos. Gratis para la mayoría de los proyectos

Librería de componentes de diseño premium con un prompt listo para cada componente

Repositorio de skills en hebreo · Accesibilidad, privacidad y redacción en hebreo

Preguntas frecuentes · Cómo construir un sitio web con Claude Code

Sí, y esa es exactamente la idea. Claude Code escribe todo el código entre bambalinas · tú solo describes en lenguaje natural lo que quieres que haya en el sitio web. No se necesitan conocimientos técnicos, aprender un lenguaje de programación ni entender cómo se construyen los sitios web. Si sabes describir lo que quieres · puedes construir un sitio web.

Un sitio web básico o una página de aterrizaje se pueden poner en marcha en menos de una hora · incluidas las instalaciones iniciales. Una vez que las herramientas están instaladas, la construcción en sí de un sitio web nuevo toma unos pocos minutos y las mejoras se realizan en tiempo real. Un sitio web más complejo con muchas páginas y funciones puede tomar varias horas de trabajo acumuladas.

Las herramientas necesarias (Vercel, Supabase, GitHub) son gratuitas para principiantes y suficientes para el 99% de los proyectos personales y de pequeños negocios. El único costo es la suscripción a Claude y, si es necesario, un dominio de pago (unas pocas decenas de séquels al año). Esto en comparación con los miles de séquels que cobra un programador por un sitio web.

En un creador de sitios web estás limitado a las plantillas y componentes que el sistema permite. Con Claude Code no hay límites · cualquier función que hayas visto en un sitio web líder se puede solicitar y Claude la construirá, y el sitio web sigue siendo totalmente tuyo (el código está respaldado en GitHub). Además, el control del diseño es mucho más preciso · cada detalle se modifica mediante una conversación normal.

Solo si se añade. Un sitio web israelí debe cumplir con el estándar de accesibilidad TI 5568 y la ley de protección de la privacidad, de lo contrario existe el riesgo de una demanda de hasta 50,000 séquels. La solución es instalar skills dedicadas (como Israeli Accessibility Compliance e Israeli Privacy Shield del repositorio agentskills.co.il) · Claude implementa la accesibilidad, la política de privacidad y el banner de cookies automáticamente.

Exactamente para eso se realizan respaldos en GitHub. Cada vez que algo funciona bien, se le dice a Claude 'haz una copia de seguridad en GitHub'. Si más adelante Claude comete un error que no se logra corregir · se vuelve a la versión anterior guardada en GitHub con un clic. Esta es la red de seguridad que permite experimentar sin miedo.

Esta guía es la base. En el taller de Claude Code construimos todo desde cero, paso a paso, juntos · instalación y configuración, construcción de Skills, un agente de WhatsApp en vivo y una sesión de bonificación completa sobre la construcción de sitios web mediante 3 métodos (Vibe Coding, inspiración, 21st.dev). 4 encuentros grabados con acceso de por vida y todas las skills y prompts listos para copiar y pegar. Si quieres construir sitios web con Claude Code como se debe · este es el lugar para empezar.

Preguntas frecuentes

¿Se puede construir un sitio web con Claude Code sin saber programar?

Sí, y esa es exactamente la idea. Claude Code escribe todo el código entre bambalinas · tú solo describes en lenguaje natural lo que quieres que haya en el sitio web. No se necesitan conocimientos técnicos, aprender un lenguaje de programación ni entender cómo se construyen los sitios web. Si sabes describir lo que quieres · puedes construir un sitio web.

¿Cuánto tiempo toma construir un sitio web con Claude Code?

Un sitio web básico o una página de aterrizaje se pueden poner en marcha en menos de una hora · incluidas las instalaciones iniciales. Una vez que las herramientas están instaladas, la construcción en sí de un sitio web nuevo toma unos pocos minutos y las mejoras se realizan en tiempo real. Un sitio web más complejo con muchas páginas y funciones puede tomar varias horas de trabajo acumuladas.

¿Cuánto cuesta construir un sitio web con Claude Code?

Las herramientas necesarias (Vercel, Supabase, GitHub) son gratuitas para principiantes y suficientes para el 99% de los proyectos personales y de pequeños negocios. El único costo es la suscripción a Claude y, si es necesario, un dominio de pago (unas pocas decenas de séquels al año). Esto en comparación con los miles de séquels que cobra un programador por un sitio web.

¿Cuál es la diferencia entre Claude Code y un creador de sitios web como Wix?

En un creador de sitios web estás limitado a las plantillas y componentes que el sistema permite. Con Claude Code no hay límites · cualquier función que hayas visto en un sitio web líder se puede solicitar y Claude la construirá, y el sitio web sigue siendo totalmente tuyo (el código está respaldado en GitHub). Además, el control del diseño es mucho más preciso · cada detalle se modifica mediante una conversación normal.

¿El sitio web construido con Claude Code cumple con la ley en Israel?

Solo si se añade. Un sitio web israelí debe cumplir con el estándar de accesibilidad TI 5568 y la ley de protección de la privacidad, de lo contrario existe el riesgo de una demanda de hasta 50,000 séquels. La solución es instalar skills dedicadas (como Israeli Accessibility Compliance e Israeli Privacy Shield del repositorio agentskills.co.il) · Claude implementa la accesibilidad, la política de privacidad y el banner de cookies automáticamente.

¿Qué se hace si Claude rompe algo en el sitio web?

Exactamente para eso se realizan respaldos en GitHub. Cada vez que algo funciona bien, se le dice a Claude 'haz una copia de seguridad en GitHub'. Si más adelante Claude comete un error que no se logra corregir · se vuelve a la versión anterior guardada en GitHub con un clic. Esta es la red de seguridad que permite experimentar sin miedo.