Claude Web Builder
Genera landing pages profesionales sin escribir una sola linea de codigo. Responde preguntas sobre tu negocio y Claude construye, disena y publica tu pagina web completa — con animaciones, SEO y deploy a Vercel incluido.
Proyecto open source
Descarga el repositorio completo o explora el codigo en GitHub.
Danos una estrella en GitHub para apoyar el proyecto.
01 que es
Que es Claude Web Builder?
Imagina que tienes un amigo arquitecto. Le dices "quiero una casa bonita con tres cuartos" y el te hace preguntas: "De que color la quieres? Cuantas ventanas? Con jardin?". Despues de responder, el construye toda la casa mientras tu tomas cafe.
Claude Web Builder es exactamente eso, pero para paginas web. Tu le dices que hace tu negocio, el te pregunta los detalles y construye una pagina web profesional completa — con diseno, animaciones, SEO y todo listo para publicar.
No necesitas saber programar
Cero codigo. Solo respondes preguntas en espanol sobre tu negocio.
Claude hace las preguntas
4 rondas de preguntas sobre tu marca, diseno, contenido y detalles tecnicos.
Pagina lista en minutos
Diseño profesional, responsive, con animaciones y optimizada para Google.
En resumen: es como tener un disenador web, un programador y un equipo de deployment — todo en uno. Y es gratis.
02 requisitos
Que necesitas para empezar?
Solo tres cosas. Si ya tienes Claude Code instalado, probablemente ya tienes las otras dos.
Claude Code
La herramienta de Anthropic que hace todo el trabajo. Si no la tienes, en la boveda hay un proyecto que te guia paso a paso para instalarla.
Node.js 18+
El motor que hace funcionar las paginas web. Descargalo gratis desde nodejs.org e instalalo como cualquier programa.
Git
Una herramienta para descargar codigo. Si tienes Mac ya lo tienes. En Windows, descargalo desde git-scm.com.
Verifica que tienes todo instalado
node -v && git --version && claude --version03 inicio
Como empezar (3 comandos)
Abre tu terminal (la aplicacion donde escribes comandos) y ejecuta esto, uno por uno:
Paso 1 — Descargar el proyecto
git clone https://github.com/Hainrixz/claude-webkit.gitPaso 2 — Entrar a la carpeta
cd claude-webkitPaso 3 — Iniciar Claude
claudeEso es todo. Al escribir claude en la terminal, Claude detecta automaticamente las 13 habilidades del proyecto y empieza a hacerte preguntas sobre tu negocio.
04 el proceso
Que pasa cuando ejecutas Claude?
Claude sigue un proceso de 6 fases. Tu solo respondes preguntas — Claude hace todo lo demas.
Preguntas
Claude te pregunta sobre tu negocio
Diseno
Te muestra el plan visual para aprobarlo
Construccion
Genera todos los componentes
Vista previa
Ves tu pagina en el navegador
Refinamiento
Pides cambios y Claude los hace
Deploy
Un clic y tu pagina esta en internet
05 paso a paso
Las 6 fases explicadas
Cada fase sucede automaticamente. Tu unico trabajo es responder preguntas y dar feedback.
Preguntas de descubrimiento
Claude te pregunta sobre tu negocio: que haces, para quien, que colores te gustan, que tono quieres. Es como cuando un arquitecto te pregunta que tipo de casa quieres antes de dibujar los planos. Son 4 rondas de preguntas simples en espanol.
Aprobacion de diseno
Claude te muestra un plan: los colores que va a usar, las tipografias, el estilo general. Si te gusta, le dices que si. Si quieres algo diferente, le dices y lo ajusta. Tu tienes el control total.
Construccion automatica
Claude empieza a construir cada parte de tu pagina — el header, el hero, la seccion de servicios, testimonios, precios, footer. Todo automatico. Tu literalmente ves como aparece el codigo en tiempo real.
Vista previa local
Antes de publicar nada, ves tu pagina completa en tu navegador. Es como ver la maqueta de una casa antes de construirla. Puedes navegar, ver como se ve en celular, revisar cada detalle.
Refinamiento iterativo
Si algo no te gusta — un color, un texto, la posicion de algo — le dices a Claude y lo cambia al instante. Puedes iterar cuantas veces quieras hasta que quede perfecto.
Deploy a Vercel
Un clic y tu pagina esta en internet con una URL real. No necesitas cuenta de Vercel, no necesitas configurar nada. Claude se encarga de todo. Tu pagina queda publicada y lista para compartir.
06 tecnologias
Que tecnologias usa tu pagina?
No necesitas saber que son — Claude las configura por ti. Pero es bueno saber que tu pagina usa las mismas herramientas que usan las mejores empresas del mundo.
Next.js 15+
El framework que usan empresas como Netflix y Nike para sus paginas web.
Tailwind CSS 4
El sistema de estilos mas popular del mundo — hace que todo se vea profesional.
shadcn/ui
Componentes pre-hechos como botones, formularios y tarjetas con diseno impecable.
TypeScript
JavaScript con superpoderes — menos errores, mas estabilidad.
Framer Motion
Animaciones suaves y profesionales que hacen que tu pagina se sienta premium.
07 habilidades
13 habilidades pre-instaladas
Cuando abres el proyecto con Claude, estas 13 habilidades se cargan automaticamente. Cada una le da a Claude conocimiento especializado para construir tu pagina.
Design Methodology
Crea sistemas de diseno coherentes desde cero
Component Architecture
Estructura componentes reutilizables y escalables
Performance Optimization
Optimiza velocidad de carga y Core Web Vitals
Deployment Automation
Deploy automatico a Vercel con un solo comando
Humanizer
Hace que el contenido suene natural, no generado por IA
SEO Fundamentals
Meta tags, Open Graph y estructura optimizada para Google
Accessibility
Paginas accesibles para todos los usuarios
Responsive Design
Se adapta perfecto a celular, tablet y escritorio
Animation System
Animaciones fluidas con Framer Motion
Content Strategy
Estructura el contenido para maximizar conversiones
Color Theory
Paletas de colores profesionales que transmiten tu marca
Typography System
Combinaciones tipograficas que mejoran la legibilidad
Code Quality
Codigo limpio, bien documentado y facil de mantener
Todas son automaticas. No tienes que instalar ni configurar nada. Claude las usa cuando las necesita durante la construccion de tu pagina.
08 comandos
Comandos utiles
Estos son los comandos principales que puedes usar. Copialos y pegalos en tu terminal.
Clonar el repositorio
git clone https://github.com/Hainrixz/claude-webkit.git && cd claude-webkitIniciar Claude Web Builder
claudeVer tu pagina en el navegador
npm run devCrear version de produccion
npm run build