Claude constructor máximo de webs
Una plataforma open source para generar landing pages profesionales sin escribir codigo. Respondés preguntas sobre tu negocio y Claude se encarga del diseño, desarrollo y deployment a Vercel.
Recurso de la comunidad zeltra
Descarga el proyecto completo, úsalo y personalízalo para tu negocio. Seleccionado y adaptado por Benjamin para la comunidad.
Que es Claude Web Builder
Es como tener un arquitecto que te hace preguntas antes de construir.
Respondés en español sobre tu negocio — qué hacés, para quién, qué querés transmitir — y Claude genera un sitio web profesional completo: diseño, animaciones, SEO optimizado. Cero codigo requerido de tu parte.
No es un template. No es un formulario con opciones predefinidas. Es un sistema de construccion guiada donde la IA toma decisiones de diseño reales basadas en lo que vos le contás.
git clone https://github.com/benjaminromero5631/constructor-de-webs.git
cd claude-webkit
claude
Requisitos
Tres cosas que necesitás tener instaladas antes de empezar:
- Claude Code — la herramienta de desarrollo de Anthropic
- Node.js 18+
- Git
Para verificar que todo esté en orden:
node -v && git --version && claude --version
Si los tres comandos devuelven versiones, estás listo.
Como funciona: las 6 fases
Fase 1 — Descubrimiento
Claude te hace preguntas sobre tu negocio. No preguntas técnicas — preguntas de negocio. ¿Qué vendes? ¿Quién es tu cliente? ¿Qué diferencia tu oferta?
Cuanto más específico respondés, mejor el resultado. Este no es el paso para ser vago.
Fase 2 — Aprobacion de diseño
Antes de construir, Claude te muestra las decisiones de diseño: paleta de colores, tipografia, tono visual. Vos aprobás o ajustás. Una vez que das el OK, empieza la construccion.
Fase 3 — Construccion de componentes
Claude genera todos los componentes automaticamente: hero, secciones de features, testimonios, CTA, footer. Cada uno optimizado para conversion.
Fase 4 — Preview local
Antes del deployment, podés ver el resultado en tu navegador:
npm run dev
Abrís http://localhost:3000 y revisás el sitio completo.
Fase 5 — Refinamiento
Si algo no te convence, lo ajustás en esta fase. Le decís a Claude qué cambiar — tono, secciones, colores — y regenera las partes afectadas.
Fase 6 — Deployment a Vercel
Un solo comando para publicar:
npm run build
Claude gestiona el deployment a Vercel. En minutos tenés una URL publica con tu sitio.
Stack tecnologico
Todo el sitio generado usa tecnologias modernas y mantenidas:
| Tecnologia | Version | Uso |
|---|---|---|
| Next.js | 15+ | Framework base |
| Tailwind CSS | 4 | Estilos y layout |
| shadcn/ui | ultima | Componentes de UI |
| TypeScript | — | Tipado |
| Framer Motion | — | Animaciones |
No hay dependencias raras ni tecnologias experimentales. Si el dia de mañana querés contratar a alguien para que modifique el codigo, va a entender exactamente qué está mirando.
13 skills preinstalados
El sistema no trabaja con prompts genericos. Tiene 13 especialistas embebidos que se activan durante la construccion:
- Design methodology — criterios de diseño profesional aplicados sistematicamente
- Component architecture — estructura de componentes escalable y mantenible
- Performance optimization — carga rapida desde el primer render
- Deployment automation — pipeline de deployment sin configuracion manual
- SEO fundamentals — metadata, estructura semántica, Open Graph
- Accessibility — cumplimiento de estandares WCAG
- Responsive design — funciona en mobile, tablet y desktop
- Animation systems — transiciones y microinteracciones con Framer Motion
- Content strategy — jerarquía de informacion y copywriting orientado a conversion
- Color theory — paletas coherentes con la identidad del negocio
- Typography systems — combinaciones tipograficas legibles y con caracter
- Code quality — codigo limpio que podés modificar sin romper nada
- Content humanization — el resultado suena a persona, no a IA generica
Cada skill opera en su dominio. No hay un prompt unico que lo hace todo — hay 13 especialistas coordinados.
Comandos utiles
# Clonar el repositorio
git clone https://github.com/benjaminromero5631/constructor-de-webs.git
# Entrar al directorio e iniciar Claude
cd claude-webkit
claude
# Servidor de desarrollo local
npm run dev
# Build para produccion
npm run build
Por que esto importa
La mayoria de las herramientas no-code te dan control sobre la estetica pero te limitan en estructura. Las que te dan estructura son complejas de operar. Claude Web Builder cierra esa brecha: vos aportás el conocimiento de negocio, Claude aporta el conocimiento tecnico.
El resultado es un sitio que se ve profesional, carga rapido, está optimizado para buscadores y podés modificar cuando quieras.
Open source. Gratis. Sin suscripciones.
git clone https://github.com/benjaminromero5631/constructor-de-webs.git