Claude Web Builder

Claude Web Builder es un proyecto gratis para Claude Code. Trae instrucciones de trabajo y 21 skills —conocimiento especializado de diseño, texto, revisión y publicación— que convierten a Claude en un diseñador web que te entrevista antes de tocar una línea.

No es una plantilla. Cada página sale de lo que le cuentas, y mientras más le cuentes, menos se parece a las demás.

Lo que te llevas

• Una página de inicio hecha para tu negocio, con tus textos, tus fotos y tus colores.
• Diseño que evita a propósito el look de «lo hizo una IA»: fuentes, colores y acomodos prohibidos de fábrica.
• Se ve bien en celular, tablet y computadora: la revisa a 375, 768, 1024 y 1440 píxeles.
• SEO de base: título, descripción, etiquetas para compartir en redes y jerarquía de encabezados.
• El código completo en la carpeta site/. Es tuyo: lo editas, lo mueves o se lo pasas a quien quieras.
• Si quieres, un link en vivo en Vercel sin crear cuenta.

No necesitas abrir la terminal para instalar nada a mano. Le das el link del repo a Claude Code y le pides que deje todo listo: él revisa qué tienes, instala lo que falte y te avisa si algo necesita tu contraseña.

Quiero usar Claude Web Builder para construir la página web de mi negocio.
Repositorio: https://github.com/Hainrixz/claude-webkit

1. Clónalo en ESTA carpeta, no en una subcarpeta. Si la carpeta ya tiene archivos, no borres nada: clónalo en una carpeta temporal y mueve todo aquí, incluida la carpeta oculta .claude.
2. Revisa qué tengo instalado antes de instalar nada: Node.js 18 o más, git y Python 3. Dime qué encontraste.
3. Instala lo que falte. Si algo pide mi contraseña de administrador o abre un instalador con ventanas, dime exactamente qué hacer y espérame.
4. Instala playwright-cli (el paquete de npm es @playwright/cli) y su navegador, para que puedas tomar capturas de la página mientras la construyes.
5. Comprueba que todo responde: node, git, python3 y playwright-cli. Corre también la búsqueda de colores de la skill ui-ux-pro-max con cualquier industria, para confirmar que Python funciona.
6. Todavía no construyas nada ni empieces el cuestionario.

Al final dame una lista corta: qué ya tenía, qué instalaste y qué falló. Y recuérdame que cierre esta sesión y vuelva a abrir Claude Code en esta misma carpeta, para que se carguen las 21 skills.

Lo que va a instalar, y para qué

• Node.js 18 o más — con esto se construye y se corre la página.
• git — con esto descarga el repo.
• Python 3 — lo usa la skill ui-ux-pro-max para buscar paletas y tipografías por industria.
• playwright-cli y su navegador — para tomarle capturas a tu página en celular, tablet y computadora mientras la construye.

Todo esto da por hecho que ya tienes Claude Code. Si no, instálalo primero con esta guía: es un comando y un inicio de sesión.

Si prefieres descargarlo a mano

Una línea en la terminal, dentro de tu carpeta vacía. Después abre Claude Code ahí y pídele que revise e instale Node.js, Python y playwright-cli.

Este es el paso que más cambia el resultado. El kit te hace 18 preguntas en cuatro rondas, y lo que no contestas lo rellena con valores por defecto: testimonios de ejemplo, «audiencia general», formas abstractas en lugar de fotos. Así sale una página correcta que podría ser de cualquiera.

Si antes le dejas una carpeta con tu negocio y tu diseño, Claude contesta solo casi todo el cuestionario y la página sale con tus textos, tus precios y tus fotos.

mi-pagina/
├── CLAUDE.md       ← del repo
├── .claude/skills/ ← las 21 skills
├── docs/           ← del repo
└── contexto/       ← lo pones tú
    ├── negocio/
    │   ├── quienes-somos.pdf
    │   ├── menu-y-precios.pdf
    │   ├── preguntas-frecuentes.txt
    │   └── testimonios.txt
    └── diseno/
        ├── logo.png
        ├── colores.png
        ├── referencia-1.png
        ├── referencia-2.png
        └── fotos/

Con Claude Code abierto en tu carpeta y el contexto adentro, pega esto. Le dice que lea todo antes del cuestionario, que conteste él lo que ya esté en tus documentos y que te diga de dónde sacó cada cosa.

Antes de empezar el cuestionario, lee todo lo que hay en la carpeta contexto/.
- contexto/negocio/ trae la información de mi negocio: qué vendo, a quién, precios, preguntas frecuentes, testimonios y cómo hablamos.
- contexto/diseno/ trae capturas de páginas que me gustan, mi logo, mis colores y fotos reales del negocio.

Cómo quiero que lo uses:
1. Dime qué archivos leíste y resúmeme el negocio en cinco líneas, para confirmar que lo entendiste.
2. En las cuatro rondas del cuestionario, contesta tú todo lo que ya esté en los documentos y dime de qué archivo sacaste cada respuesta. Pregúntame solo lo que falte o lo que se contradiga.
3. Antes de proponer la dirección visual, estudia las capturas de contexto/diseno/. Dime qué tomas de cada una (colores, tipografía, cómo acomodan las secciones, el tono de las fotos) y qué no vas a copiar.
4. Usa mi logo y mis fotos reales en lugar de placeholders. Cópialos a site/public/images/ cuando armes el proyecto.
5. Testimonios, precios, horarios y datos de contacto van tal cual están en los documentos. Si falta alguno, márcalo como pendiente en vez de inventarlo.

Las cuatro rondas, en corto

Después del cuestionario, Claude trabaja en piloto automático. Nunca te pregunta «¿lo hago?» mientras construye: lo hace y te enseña el resultado.

Las cuatro veces que te toca decidir

• Después de la ronda 2: si te late la dirección de diseño.
• Después de la ronda 4: si el resumen de tu negocio está completo.
• Después de la fase 5: qué te gusta y qué cambiarías.
• Antes de la fase 6: si la publicas o no.

Si no le das fotos, el kit no pone imágenes de banco: usa formas, degradados y patrones. Se ve limpio, pero quien entra no ve tu negocio: ni tu producto, ni tu local, ni a tu equipo.

Si tus fotos no alcanzan, conecta Higgsfield y deja que Claude genere las imágenes con el diseño que ya aprobaste, usando tus fotos reales como referencia de estilo.

Primero conecta Higgsfield a tu cuenta de Claude. Son cuatro pantallas y no pide llave: aquí está el paso a paso con capturas.

Ya tengo el conector de Higgsfield activo. Quiero imágenes hechas a la medida para la página, con el sistema de diseño que aprobamos.

1. Revisa la página y propón la lista de imágenes que le faltan: la del hero y las de cada sección que de verdad la necesite. Para cada una dime dónde va, qué proporción lleva y qué debe mostrar.
2. Usa mis fotos de contexto/diseno/ como referencia de estilo, luz y producto. Que se vean como mi negocio, no como banco de imágenes.
3. Antes de generar cada imagen dime cuántos créditos va a gastar y espera mi sí. Si no puedes saber el costo exacto, dímelo. Genera una a la vez.
4. Cuando me guste una, guárdala en site/public/images/ en WebP, ponla en su sección con next/image y un texto alternativo que la describa, y enséñame una captura de cómo quedó.
5. Nada de texto dentro de las imágenes: los títulos van en la página, no en la foto.

El kit no depende de un modelo. Son instrucciones de trabajo y skills en archivos, y cualquier modelo de Claude que tengas en Claude Code las lee igual: el cuestionario, las seis fases, las reglas de diseño y las revisiones son las mismas.

Lo que cambia con el modelo es el criterio: qué tan fina sale la dirección de diseño, qué tan bien escribe y cuántas vueltas das. El contexto de la sección 03 pesa más que el modelo: un buen modelo sin contexto hace una página genérica bien hecha.

Un truco que sirve con cualquier modelo: el kit ya prohíbe fuentes y colores genéricos, pero si hay estilos que a ti te chocan, nómbralos en el prompt de arranque. Aquí está por qué funciona y cómo hacer la lista.

Vienen dentro del repo, en .claude/skills/, y se cargan solas al abrir Claude Code en la carpeta. No instalas ninguna. Las instrucciones del proyecto deciden cuándo entra cada una, así que no tienes que llamarlas por su nombre.

Cuando te enseñe la página, te va a preguntar algo concreto, como qué te parece el hero. Contesta igual de concreto: hace el cambio en ese momento y te lo enseña, sin preguntarte si lo hace.

Cómo pedir un cambio que sí se entiende

La sección del hero no me convence y no sé explicar por qué. Usa la skill prototype: hazme tres versiones de verdad distintas detrás de un selector, déjame verlas en el navegador y espera a que elija una.

Publicarla

Cuando le digas que ya, la sube a Vercel sin que tengas que crear cuenta. Te da dos links: la vista previa, que ya puedes compartir, y uno para reclamarla con una cuenta gratis de Vercel si la quieres conservar a tu nombre.

Ya me gusta cómo quedó. Corre el build para confirmar que no hay errores y publícala con el deploy del proyecto. Dame el link de la vista previa y el link para reclamarla, y explícame en dos líneas para qué sirve cada uno.

Casi todo se arregla pidiéndoselo a Claude en español. Estos son los tropiezos más comunes y qué decirle.

¿Qué skills tienes cargadas de la carpeta .claude/skills de este proyecto? Dime cuántas son y cómo se llaman.

¿Te falta Claude Code? Guía para instalarlo.