01 Cómo encajan las dos herramientas
Pedirle a Claude «hazme una web» sin más suele acabar en una página genérica. Este flujo separa el trabajo en dos: primero se decide qué construir y después se construye. Las dos herramientas son repositorios con licencia MIT que convierten Claude Code en un asistente especializado mediante su CLAUDE.md, sus skills y sus comandos.
The Architect
No escribe código: te entrevista, clasifica el proyecto, elige el stack, verifica versiones y genera un plano en Markdown con pasos de construcción que incluyen criterio de terminado y comando de verificación.
Claude Web Builder
Te hace preguntas en cuatro rondas, te propone un sistema de diseño para que lo apruebes, construye la landing con Next.js, Tailwind y shadcn/ui, te la enseña en local y la publica en Vercel.
Cuándo usar las dos
Si tu proyecto es más que una landing (reservas, área de clientes, pagos), empieza por The Architect. Si solo necesitas una página de presentación, Claude Web Builder puede ir solo.
02 Paso 1: el plano con The Architect
La forma recomendada es instalarlo como plugin de Claude Code. Después puedes lanzarlo desde cualquier carpeta y los planos se guardan en ./blueprints/ de la carpeta en la que estés.
/plugin marketplace add Hainrixz/the-architect
/plugin install the-architect@soyenriquerochagit clone https://github.com/Hainrixz/the-architect.git
cd the-architect
claude| Comando | Preguntas | Duración aproximada | Úsalo cuando |
|---|---|---|---|
| /architect-quick | 3 en un solo mensaje | Unos 10 minutos | El proyecto es pequeño o ya sabes qué stack quieres |
| /architect | 12-16 en varias rondas | 40-60 minutos | Vas a dejar que un agente construya solo y no estarás para resolver dudas |
Antes de generar, The Architect pasa dos filtros: no deja ninguna decisión sin aclarar y hace un análisis previo de por qué podría fracasar el plan. La generación final tarda varios minutos sin mostrar nada; es normal.
/architect
Te cuento el proyecto antes de que empieces con las preguntas:
- Negocio: [QUÉ HACES Y DÓNDE]
- Público: [A QUIÉN TE DIRIGES]
- Qué debe conseguir la web: [PEDIR PRESUPUESTO, RESERVAR, VENDER, CAPTAR CONTACTOS]
- Lo que ya tengo: [DOMINIO, LOGO, TEXTOS, FOTOS]
- Lo que no quiero en la primera versión: [POR EJEMPLO, BLOG O ÁREA PRIVADA]
Hazme las preguntas que necesites y dime los valores por defecto que vas a asumir para que pueda vetarlos.03 Paso 2: construir con Claude Web Builder
git clone https://github.com/Hainrixz/claude-webkit.git
cd claude-webkit
claude-
1
Preguntas en cuatro rondas
Datos básicos del negocio, dirección visual, contenido (qué debe hacer el visitante, ventajas, eslogan) y detalles técnicos (logo, imágenes, publicación). Si no sabes algo, di «decide tú».
-
2
Sistema de diseño
Te propone colores, tipografías y tipo de página. No construye nada hasta que lo apruebes.
-
3
Construcción
Crea el proyecto Next.js, instala los componentes y escribe cada sección. Los textos pasan por una skill que elimina el tono de texto generado por IA.
-
4
Vista previa y revisión
Abre la página en http://localhost:3000 (o te enseña capturas), pasa una auditoría SEO y una lista de calidad, y te pide comentarios.
-
5
Publicación
Si quieres, la publica en Vercel con un script incluido sin necesidad de cuenta. Recibes la URL pública y un enlace para reclamar la web en una cuenta gratuita de Vercel y conservarla.
Antes de empezar las rondas de preguntas, lee este plano que preparé con The Architect y úsalo como briefing: [PEGA LA RUTA DEL ARCHIVO EN ./blueprints/ O SU CONTENIDO].
Saca de ahí todo lo que puedas (negocio, público, secciones, textos, objetivo) y pregúntame solo lo que falte. Respeta el alcance: si el plano deja algo fuera de la primera versión, no lo construyas.04 Pulir antes de enseñarla
Revisa la página como lo haría un cliente que llega desde Google con el móvil:
1. ¿Se entiende en 5 segundos qué ofrecemos y a quién?
2. ¿La llamada a la acción principal se ve sin hacer scroll en 375 px?
3. ¿Algún texto suena genérico o inventado? Señálalo y propón alternativas basadas en los datos que te di.
4. ¿Hay afirmaciones que no puedo demostrar (cifras, premios, testimonios)? Márcalas para quitarlas.
Aplica solo los cambios que yo apruebe.- ✓Sustituye cualquier testimonio, cifra o logo de cliente de ejemplo por datos reales, o elimínalos.
- ✓Añade aviso legal, política de privacidad y de cookies si recoges datos o usas analítica.
- ✓Comprueba el formulario de contacto: adónde llegan los mensajes y qué se guarda.
- ✓Conecta tu dominio desde el panel de Vercel (apartado Domains) cuando reclames la web.
- ✓Guarda el código de la carpeta site/ en un repositorio: es tuyo y cualquier desarrollador puede editarlo.
05 Límites y cuándo contratar a alguien
Este flujo da muy buen resultado para la web de un negocio pequeño, un portfolio o la página de un lanzamiento. Donde se queda corto: marcas con identidad visual compleja, webs con muchas páginas y contenidos que gestionar, integraciones con sistemas internos o requisitos estrictos de accesibilidad y rendimiento. En esos casos, úsalo para prototipar y llegar a la reunión con algo concreto, no como entrega final.
Preguntas frecuentes
No. Respondes preguntas y das indicaciones en lenguaje natural. Sí necesitas manejarte mínimamente en la terminal para clonar el repositorio y arrancar Claude Code.
Las dos herramientas son gratuitas y de código abierto. Necesitas una suscripción de Claude para usar Claude Code; Node.js, Git y la publicación inicial en Vercel no cuestan nada.
Sí. Responde en español y Claude seguirá el proceso en español. El contenido de la página puede estar en cualquier idioma.
Sí. El código queda en la carpeta site/ como un proyecto Next.js estándar. Puedes pedir cambios a Claude o pasárselo a cualquier desarrollador.
Sí. Diseña planos para muchos tipos de software (SaaS, APIs, herramientas internas) y también cambios sobre código existente con /architect-brownfield.
Sobre el autor
Equipo editorial de appyweb
Marketing, SEO y desarrollo con IA
Especialistas de appyweb en SEO, publicidad, desarrollo web y automatización con IA.