Cómo crear una página web con Claude Code que no parezca genérica

Qué necesitas antes de empezar

Necesitas un plan de Claude que incluya Claude Code, Node.js 20 o superior, Git y Chrome. Con eso cubres el diseño, el código, las skills y la revisión.

brew install node git

Las skills que vale la pena instalar

Instala una skill de dirección, las skills oficiales de GSAP para el movimiento y una de crítica, y no sigas. Una skill es una carpeta de instrucciones que Claude carga cuando la tarea lo pide. Se instala una vez con -g y sirve para todos los proyectos.

claude plugin install frontend-design@claude-plugins-official
npx skills add greensock/gsap-skills -g
npx skills add pbakaus/impeccable -g
npx skills add emilkowalski/skills -g

Abre una sesión nueva después de instalarlas para que Claude las vea. Y ten en cuenta dos cosas:

• Instalada no es lo mismo que usada. En cada fase, pídele a Claude que cargue la skill por su nombre y que te diga cuáles cargó.
• No acumules skills de estilo. Varias con un estilo cerrado se pisan, y la página acaba pareciendo una plantilla. Una skill de dirección tampoco te salva sola: las webs hechas con la misma empiezan a parecerse, y por eso el paso siguiente importa más.

Decide la dirección antes de construir

Pide un tablero de dirección de arte de una página y apruébalo antes de que Claude escriba la web, porque ningún otro paso cambia tanto el resultado. Cada sección que no decides se convierte en la respuesta más habitual de la herramienta, y corregir una web terminada cuesta mucho más que corregir una página.

Sigue este orden:

1. El encargo. Qué es el negocio, para quién, la acción que buscas, la sensación y las restricciones reales, como un logo o textos definitivos. Si el negocio es real, no dejes que invente cifras, testimonios ni productos.
2. Referencias. Dos o tres webs, dos o tres imágenes y uno o dos ejemplos en movimiento. Recorre cada web hasta el final, también en móvil. De cada una, anota el principio que tomas y lo que dejas. Nunca reutilices sus imágenes, sus textos ni su composición.
3. La idea. Una frase: qué ve el visitante, qué cambia al avanzar por la página y para qué. Después, una tabla con una fila por sección: qué cuenta, su composición, su recurso, su movimiento y su versión móvil.
4. La identidad. De cuatro a seis colores, cada uno con su función, dos tipografías como máximo y una sola forma de moverse. Una web lenta y cinematográfica funciona, y una rápida y técnica también. Mezclarlas no.
5. El tablero. Una página HTML con una maqueta 16:9 del hero a calidad final, con imágenes y tipografía reales, más la identidad, la sección interior clave, el recorrido y los recursos necesarios. Sin cajas grises.

No se genera ni se construye nada hasta que apruebes el tablero. Si cambia la dirección, se rehace.

Construye la página entera de una vez

Pide la página completa en la primera pasada: loader, hero, todas las secciones, cierre, pie y menú móvil. Un hero solo parece terminado y esconde todos los problemas que aparecen más abajo. Si quieres las palabras exactas para pedirlo, nuestra guía cómo escribir un prompt para crear una web detalla las seis partes que debe tener.

Con los recursos, lo mismo: empieza con poco. Prueba dos o tres candidatos para el hero dentro de la maqueta antes de hacer el resto. Para negocios reales, lo mejor son fotografías reales; también sirven bancos con licencia e imágenes generadas por ti. Un 3D procedural hecho deprisa suele verse barato, así que pide un fotograma a calidad final antes de comprometerte. Comparamos las opciones en vídeo, WebGL o CSS.

Tampoco hace falta escribir cada efecto desde cero. Nuestras herramientas gratis exportan código de galerías de imágenes en 3D, carruseles infinitos de imágenes y semitonos y texturas de imagen, listo para pegar en la web.

Revísala mirándola

Que pase los tests no dice nada de cómo se ve, así que revisa la web en el navegador, en escritorio y en un teléfono, antes de darla por terminada. Pídele a Claude que cargue impeccable y critique la página entera frente a las referencias y la idea. Agrupa las correcciones y aplícalas juntas.

Después, haz estas comprobaciones:

• Capturas a 375, 768, 1440 y 1920 píxeles.
• Consola sin errores.
• Recorrido con el teclado, con el foco siempre visible.
• Movimiento reducido activado, con la página legible de arriba abajo.
• Selectores, sliders y diálogos abiertos en un teléfono, ninguno con el aspecto del sistema.
• Ningún texto cortado dentro de máscaras, sobre todo descendentes y tildes.
• Primer scroll fluido en un portátil normal y en un teléfono real.

Cuando algo no te convenza, describe lo que ves y no la solución que imaginas: «el paso de la sección dos a la tres se siente brusco» funciona mejor que nombrar una técnica. Reunimos los fallos que más se repiten en nueve errores que rompen las webs animadas hechas con IA.

Guarda tu gusto en un CLAUDE.md

Claude Code lee un archivo CLAUDE.md en la carpeta del proyecto al empezar cada sesión, así que tu proceso y tu gusto se escriben una sola vez. Empieza con algo así y añade una línea cada vez que corrijas lo mismo dos veces:

# CLAUDE.md

### Proceso
1. Encargo: negocio, público, acción principal. Pregunta solo lo que no
   puedas deducir. No inventes cifras, testimonios ni productos.
2. Referencias: recorre cada web hasta el final. De cada una, qué tomamos
   y qué no. Nada de copiar textos, código, imágenes ni composiciones.
3. La idea en una frase y una tabla con una fila por sección.
4. Tablero de dirección de arte en board/direction.html, con el hero a
   calidad final. Espera mi OK antes de generar recursos o construir.
5. Página completa en la primera pasada: loader, secciones, cierre, pie
   y menú móvil.
6. Revisión con impeccable en escritorio y móvil. Capturas a
   375, 768, 1440 y 1920. Pasar los tests no significa que se vea bien.

### Gusto
- Escenas a pantalla completa y una gran frase por escena. Nada de hero
  con tres tarjetas.
- Alterna una sección con foto de fondo y una limpia.
- Mantén un margen exterior. Nada pegado al borde de la pantalla.
- Una sola forma de moverse en toda la web. Anima transform y opacity.
- Movimiento más ligero en móvil, sin pins pesados.
- Ningún control nativo: selectores, sliders y diálogos con el diseño de la web.

La parte de gusto es la que tiene que ser tuya. La nuestra salió de revisar una web tras otra: las cortinillas a pantalla completa entre secciones pesaban, los hovers a saltos con steps() parecían rotos y un vídeo generado para cada cambio de estado se veía forzado. La tuya saldrá del mismo sitio, y escribirla es lo que evita corregir dos veces lo mismo.

Para ver a dónde llega este proceso, mira nuestros ejemplos de sección hero y las plantillas web. Cada una incluye el prompt que la reconstruye.