01 Qué es y qué obtienes
Claude Web Builder es un repositorio gratuito (licencia MIT) con un CLAUDE.md que guía a Claude Code por seis fases y 21 skills de diseño, redacción, revisión, animación y publicación. Al abrir Claude Code en la carpeta, Claude deja de ser un asistente genérico y pasa a comportarse como un diseñador que pregunta antes de construir.
No es una plantilla: cada página sale de lo que le cuentas. Cuanto más material concreto le des, menos se parecerá a cualquier otra web hecha con IA.
- ✓Una landing con tus textos, tus fotos y tus colores.
- ✓Diseño adaptado a móvil, tableta y escritorio, revisado con capturas automáticas.
- ✓SEO básico: título, descripción, etiquetas para redes y jerarquía de encabezados.
- ✓El código completo en la carpeta site/, en Next.js estándar, que puedes editar o pasar a otro desarrollador.
- ✓Opcionalmente, una URL pública en Vercel sin necesidad de crear cuenta.
02 Instalación
-
1
Crea una carpeta vacía
Ponle el nombre del proyecto, por ejemplo web-panaderia.
-
2
Clona el repositorio dentro
Desde la terminal, dentro de esa carpeta, ejecuta el comando de abajo. El punto final hace que se clone en la carpeta actual y no en una subcarpeta.
-
3
Abre Claude Code y pide la revisión del entorno
Ejecuta claude en la carpeta (o ábrela desde la app de escritorio) y pega el prompt de preparación.
-
4
Reinicia la sesión
Sal con /exit y vuelve a abrir Claude Code en la misma carpeta. Las skills y el CLAUDE.md se cargan al iniciar la sesión.
git clone https://github.com/Hainrixz/claude-webkit.git .Acabo de clonar Claude Web Builder en esta carpeta. Antes de empezar:
1. Comprueba si tengo Node.js 18 o superior, git y Python 3, y dime qué versiones encuentras.
2. Instala lo que falte. Si algo requiere mi contraseña o un instalador gráfico, explícame qué hacer y espérame.
3. Instala playwright-cli (paquete npm @playwright/cli) y su navegador para poder hacer capturas.
4. No empieces el cuestionario ni construyas nada.
Termina con una lista breve: qué ya estaba, qué has instalado y qué ha fallado.03 Prepara tu carpeta de contexto
Este paso es el que más influye en el resultado. El kit te hace preguntas en cuatro rondas (lo básico, el estilo, el contenido y lo técnico) y lo que no contestes lo rellena con valores por defecto. Si antes le dejas tu material, Claude responde casi todo por ti y solo te pregunta lo que falta.
contexto/
├── negocio/
│ ├── presentacion.pdf
│ ├── servicios-y-precios.pdf
│ ├── preguntas-frecuentes.txt
│ └── opiniones-con-permiso.txt
└── diseno/
├── logo.svg
├── colores.png
├── referencia-1.png
├── referencia-2.png
└── fotos/Negocio
Qué haces y para quién, servicios con precios, preguntas habituales, opiniones reales con permiso, horarios, contacto y la acción que quieres que haga el visitante.
Diseño
Capturas de dos o tres webs que te gusten (no tienen que ser de tu sector), logo en SVG o PNG transparente, colores de marca y fotos reales, aunque sean del móvil.
Tono
Un par de publicaciones o correos tuyos para que copie tu forma de hablar: cercana, formal o con humor.
04 El arranque y las seis fases
Lee primero todo lo que hay en contexto/: en negocio/ está la información de la empresa y en diseno/ las referencias visuales, el logo, los colores y las fotos.
1. Dime qué archivos has leído y resume el negocio en cinco líneas.
2. En el cuestionario, responde tú lo que ya esté en los documentos indicando de qué archivo sale cada respuesta. Pregúntame solo lo que falte o se contradiga.
3. Antes de proponer el estilo, analiza las capturas y dime qué tomas de cada una y qué no vas a copiar.
4. Usa mi logo y mis fotos reales, no imágenes de relleno.
5. Precios, horarios, opiniones y contacto, tal cual aparecen. Si falta alguno, márcalo como pendiente; no lo inventes.-
1
Descubrimiento
Las cuatro rondas de preguntas. Si no sabes algo, responde «decide tú» y te explicará su elección.
-
2
Sistema de diseño
Paleta con códigos exactos, dos tipografías de Google Fonts, tipo de página y orden de secciones. Aquí te pide aprobación.
-
3
Proyecto
Crea site/ con Next.js 16, Tailwind CSS 4 y shadcn/ui e instala las dependencias.
-
4
Construcción
Escribe cada sección, pasa los textos por una skill que elimina el tono artificial y coloca tus imágenes.
-
5
Revisión
Arranca la web en local (normalmente http://localhost:3000), hace capturas a varios anchos, revisa animaciones y SEO y corrige antes de enseñártela.
-
6
Publicación
Solo si lo autorizas: la sube a Vercel y te da un enlace de vista previa y otro para reclamarla con una cuenta gratuita.
05 Las 21 skills por función
| Función | Skills |
|---|---|
| Diseño | frontend-design, ui-ux-pro-max, web-design-guidelines |
| Componentes | shadcn-ui, building-components |
| Texto | humanizer |
| Revisión en navegador | playwright-cli, chrome-bridge-automation |
| SEO y rendimiento | seo-audit, vercel-react-best-practices |
| Investigación | web-reader, deep-research |
| Publicación | vercel-deploy |
| Movimiento (de emilkowalski/skills) | emil-design-eng, animate, review-animations, find-animation-opportunities, animation-vocabulary, apple-design, prototype, improve-animations |
Se cargan solas desde .claude/skills/; el CLAUDE.md decide cuándo entra cada una. La única que conviene pedir por su nombre es prototype, que construye tres versiones de una sección tras un selector para que elijas en vivo.
06 Cómo pedir cambios y publicar
| En vez de… | Prueba con… |
|---|---|
| No me gusta el diseño | Los colores resultan fríos para una panadería; quiero tonos más cálidos |
| Mejora el título | Haz el titular más grande y que explique lo que vendo en menos de ocho palabras |
| En el móvil se ve raro | En móvil el menú tapa el titular; bájalo para que no se solapen |
| Añade más cosas | Añade una sección de preguntas frecuentes con las de contexto/negocio/preguntas-frecuentes.txt |
La página me convence. Ejecuta el build para confirmar que no hay errores y publícala con el despliegue del proyecto. Dame el enlace de vista previa y el enlace para reclamarla, y explícame en dos líneas para qué sirve cada uno.07 Problemas habituales
| Síntoma | Causa probable | Qué hacer |
|---|---|---|
| No te hace el cuestionario | No reiniciaste la sesión o la abriste en otra carpeta | Sal y abre Claude Code en la carpeta del repositorio |
| No hace capturas | Falta playwright-cli o su navegador | Pídele que lo instale o que use npx; si no, abre tú la URL local |
| localhost no carga | El servidor se ha caído o el puerto está ocupado | Pídele que revise el servidor o prueba npm run dev -- --port 3001 dentro de site/ |
| Falla la publicación | Error de build o sesión de Vercel | Asegúrate de que npm run build funciona; si hace falta, npx vercel login |
| La web parece genérica | Poco contexto | Añade capturas, textos y fotos y pide que rehaga la dirección de diseño |
Preguntas frecuentes
No. Todo se pide en español dentro de Claude Code. Conviene, eso sí, saber abrir una terminal o usar la app de escritorio para elegir la carpeta del proyecto.
El kit es gratuito y de código abierto. Necesitas una suscripción de Claude que incluya Claude Code. Node.js, git y la publicación básica en Vercel no tienen coste.
Sí. El método vive en archivos de instrucciones y skills, así que cualquier modelo los sigue. Un modelo más capaz afina más el diseño y los textos, pero el contexto que le des pesa más que el modelo. Puedes cambiarlo con /model.
Sí. El código queda en site/ como un proyecto Next.js normal. Vuelve a abrir Claude Code en la carpeta y pide los cambios, o entrégaselo a un desarrollador.
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.