Webs con Claude Code que no parecen plantilla

Qué vas a conseguir

Una web de una página para tu negocio, hecha por Claude Code, con un diseño cuidado y animaciones que se sienten naturales. Y publicada en internet, con su enlace, sin escribir código.

Por defecto, Claude diseña páginas correctas pero simples, y se parecen todas. La clave no está en el prompt, sino en lo que le instalas antes para que trabaje: tres skills. Una skill es un manual que Claude lee antes de trabajar. La instalas una vez y él la usa cuando toca.

La primera vez, dejarlo todo instalado te lleva unos 20 minutos. Las siguientes webs empiezan directamente en el paso 5.

Antes de empezar

Necesitas cuatro cosas.

1. Claude Code instalado. Si aún no lo tienes, sigue la guía oficial: code.claude.com/docs/en/overview. Hace falta una suscripción de pago de Claude (con Pro te vale). Para comprobar que funciona, abre una Terminal nueva y escribe:

claude --version

Si te sale un número de versión, está listo.

2. Node.js 24 o superior. Es el programa que hace funcionar los instaladores de este kit. Descárgalo de nodejs.org (la versión LTS) e instálalo como cualquier programa. Para comprobarlo:

node --version

Tiene que empezar por v24 o por un número mayor.

3. Una cuenta de Netlify. Es el servicio donde vivirá tu web. Tiene plan gratis y puedes crear la cuenta en el paso 4.

4. Una carpeta vacía para tu web. Por ejemplo, una carpeta llamada mi-web en el Escritorio. Si tienes logo o fotos, mételos ya dentro.

Dónde se escribe cada cosa

• La Terminal es la ventana donde se escriben comandos. En Mac: Aplicaciones > Utilidades > Terminal. En Windows: PowerShell.
• Los comandos que empiezan por / se escriben dentro de Claude Code, como si fueran un mensaje.
• Todos los demás van en la Terminal. Cópialos tal cual y pulsa Enter.
• Si un instalador te pregunta Ok to proceed? (y), escribe y y pulsa Enter. Es el permiso para descargarlo.

Para abrir Claude Code dentro de la carpeta de tu web, la guía oficial usa estos dos comandos:

cd your-project
claude

En vez de your-project va la ruta de tu carpeta. Lo más fácil: escribe cd y un espacio, arrastra la carpeta a la ventana de la Terminal y pulsa Enter. Después escribe claude y Enter.

Si usas la app de escritorio de Claude, abre la pestaña Code y elige la carpeta. Los instaladores de los pasos 1 a 4 van igualmente en la Terminal.

Paso 1. Las skills de animación de Emil Kowalski

Emil Kowalski es ingeniero de diseño y el creador de Sonner, una librería de avisos para webs. Su repositorio de skills tiene más de 45.000 estrellas en GitHub.

Le mete a Claude su forma de pensar el movimiento: cuándo animar y cuándo no, qué curva usar, cuánto dura cada transición (la mayoría, menos de 300 milisegundos) y cómo hacer que se sienta real y no de plantilla.

El repositorio trae 15 skills. Para una web, instala dos:

• emil-design-eng: la principal. Su criterio de diseño y de movimiento.
• animate: construye cada animación desde cero. Decide si hace falta, la curva, la duración y qué se mueve.

Si quieres, marca también review-animations, que revisa tus animaciones con sus reglas, en modo estricto.

En la Terminal:

npx skills@latest add emilkowalski/skills

Te hará unas preguntas. Te mueves con las flechas, marcas con la barra espaciadora y confirmas con Enter:

1. Select skills to install: marca emil-design-eng y animate.
2. Which agents do you want to install to? (si te lo pregunta): marca Claude Code.
3. Installation scope: elige Global, para tenerlas en todos tus proyectos.
4. Installation method (si te lo pregunta): Symlink (Recommended).
5. Proceed with installation?: Yes.

Al final puede preguntarte si quieres instalar find-skills. Para este kit no hace falta.

Repositorio: github.com/emilkowalski/skills

Paso 2. Impeccable

Impeccable es de Paul Bakaus. Le da a Claude criterio de diseño y 59 reglas para detectar los fallos típicos de las webs hechas con IA. Parte de la skill oficial de diseño de Anthropic. Son 24 comandos que corrigen tipografía, contraste, estructura y espaciado, entre otras cosas.

En la Terminal, dentro de la carpeta de tu web:

npx impeccable install

Te pregunta en qué herramienta lo vas a usar (elige Claude Code) y si lo instalas solo en este proyecto o en todos (elige todos). Si tenías Claude Code abierto, ciérralo y vuelve a abrirlo.

Primer uso. Abre Claude Code en la carpeta de tu web y escribe:

/impeccable init

Te hace unas preguntas sobre tu negocio (a quién te diriges, qué quieres conseguir) y lo guarda en un archivo, PRODUCT.md. Así cada comando sabe para quién es la web. Se hace una vez por web.

Cómo se usan. Todos los comandos van detrás de /impeccable. Si lo escribes solo, te enseña la lista entera. También puedes pedirle algo con tus palabras, por ejemplo:

/impeccable rehaz la cabecera

Los que más vas a usar:

Antes de construir

/impeccable shape

Planifica la página antes de escribir una línea de código.

/impeccable craft

Diseña y construye una pieza de principio a fin, y la revisa en el navegador.

Para revisar

/impeccable critique

Revisión de diseño: jerarquía, claridad y qué está frenando la web.

/impeccable audit

Revisión técnica: accesibilidad (contraste incluido), velocidad y móvil. Te ordena los arreglos por importancia.

Para corregir

/impeccable typeset

Arregla las tipografías, la jerarquía y los tamaños de letra.

/impeccable layout

Arregla el espaciado y el ritmo entre bloques.

/impeccable colorize

Mete color con intención cuando todo queda gris.

/impeccable clarify

Reescribe los textos que no se entienden: botones, avisos, formularios.

/impeccable adapt

Ajusta la web a móvil, tablet y pantallas grandes.

Para ajustar el tono

/impeccable bolder

Para cuando el diseño queda soso.

/impeccable quieter

Para cuando queda recargado.

/impeccable distill

Quita todo lo que sobra.

Antes de publicar

/impeccable polish

Repaso final: detalles, coherencia y que esté lista para salir.

Repositorio: github.com/pbakaus/impeccable

Paso 3. Taste

Taste Skill es de Leonxlnx y tiene más de 95.000 estrellas en GitHub. Su objetivo: que Claude deje de entregar webs con cara de plantilla. La skill principal se llama design-taste-frontend y hace cuatro cosas:

• Antes de programar, lee lo que le pides y te dice en una línea qué dirección de diseño va a seguir.
• Si tu web encaja con un sistema de diseño real (el conjunto oficial de estilos y piezas de una marca, como Material de Google, Fluent de Microsoft, Polaris de Shopify o Carbon de IBM), usa ese paquete oficial en vez de imitarlo a mano. Si no encaja con ninguno, construye una estética propia con sus reglas.
• Funciona con tres diales del 1 al 10: variedad del diseño (8 por defecto), intensidad del movimiento (6) y densidad de información (4). Los cambias con palabras.
• Tiene una lista de señales típicas de diseño hecho con IA que no puede usar, y un repaso final antes de entregar.

En la Terminal:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

Contesta igual que en el paso 1: Claude Code, Global, Symlink (Recommended) y Yes.

La versión que instala es la v2, que su autor marca como experimental. Si no te convence, en “Problemas típicos” tienes cómo pasar a la v1.

Repositorio: github.com/Leonxlnx/taste-skill

Paso 4. Dale acceso a Netlify

Netlify aloja tu web y le da un enlace público, del tipo tunombre.netlify.app. Para que Claude Code pueda subirla, instalas la herramienta de Netlify para la Terminal y le das permiso tú, en el navegador.

1. Instala la herramienta de Netlify. En la Terminal:

npm install -g netlify-cli

2. Inicia sesión tú.

netlify login

Se abre el navegador. Entra en tu cuenta de Netlify (o créala) y autoriza el acceso a Netlify CLI. Tu ordenador guarda ese permiso y Claude Code lo usa cuando publica. Para comprobar que todo está en orden:

netlify status

Seguridad, en corto:

• El acceso lo das tú, en la web de Netlify. Claude no ve tu contraseña.
• Nunca pegues contraseñas ni tokens en el chat de Claude ni en los archivos de tu web. Un token es una llave de acceso en forma de texto. Si Claude te pide uno, no se lo des: vuelve a hacer netlify login tú.
• Claude Code te pide permiso antes de ejecutar comandos. Lee qué va a hacer antes de aceptar.
• Puedes quitarle el acceso cuando quieras: entra en app.netlify.com/user/applications, busca Netlify CLI en “Authorized applications” y elige Options > Revoke access.

Guía oficial: Netlify CLI

Paso 5. Pídele la web: el prompt

Abre Claude Code en la carpeta de tu web. Si aún no lo has hecho, escribe /impeccable init y contesta. Después rellena los [huecos] de este prompt y pégalo entero:

Quiero una web de una sola página para mi negocio. No quiero que parezca una plantilla.

Antes de empezar, usa estas skills:
- design-taste-frontend (Taste), para decidir la dirección de diseño.
- emil-design-eng y animate (Emil Kowalski), para todas las animaciones.
- Impeccable, para revisar el resultado al final.

MI NEGOCIO
- Nombre: [nombre del negocio]
- Qué hago, en una frase: [ej.: clases de pilates en grupos de 6 personas en Palma]
- Para quién: [tu cliente ideal: quién es, en qué situación está, qué le preocupa]
- Por qué elegirme a mí: [2-3 motivos concretos, con datos si los tienes]
- Qué quiero que haga quien entra: [reservar una llamada / escribirme por WhatsApp / pedir presupuesto / comprar]
- Enlace de ese botón: [url, enlace de WhatsApp o email]
- Tono: [cercano / serio / premium / divertido]
- Colores, logo o tipografía que ya uso: [descríbelos y di cómo se llaman los archivos, o escribe "no tengo"]
- Webs que me gustan y qué me gusta de cada una: [2-3 enlaces con una frase cada uno]

SECCIONES
1. Portada: un titular claro de qué hago y para quién, una frase de apoyo y el botón principal.
2. El problema que resuelvo, en 3 puntos.
3. Servicios: [lista tus servicios o productos, con precio si quieres enseñarlo].
4. Cómo funciona, en 3 pasos.
5. Opiniones de clientes: [pega las reales o escribe "no tengo todavía"]. Si no tengo, quita la sección.
6. Preguntas frecuentes: [3-5 preguntas que te hacen siempre].
7. Contacto, con el botón principal otra vez.

TEXTOS
[Pega aquí tus textos] o escríbelos tú en [idioma de tu web]: frases cortas y concretas, sin exagerar. No te inventes datos, cifras ni opiniones. Lo que tenga que confirmar yo, márcalo con [REVISAR].

CÓMO QUIERO QUE TRABAJES
1. Antes de programar, dime en 5 líneas la dirección de diseño: estilo, tipografías, colores, nivel de animación y, si vas a usar un sistema de diseño real, cuál. Espera a que te diga que sí.
2. Que sea una web estática, lista para publicar en Netlify. Si necesitas instalar algo (por ejemplo, el paquete de un sistema de diseño), hazlo tú y explícame en una línea qué es. Piensa primero en el móvil.
3. Animaciones con criterio, siguiendo las skills de Emil: entradas suaves al hacer scroll, botones que responden al pulsar, transiciones cortas. Nada que maree ni que retrase la lectura. Respeta la opción de "reducir movimiento" del sistema.
4. Nada de recursos de plantilla: ni degradados morados, ni iconos de relleno, ni textos de ejemplo, ni fotos genéricas de banco de imágenes. Si hace falta una imagen que no tengo, deja el hueco marcado y dime qué foto poner.
5. Cuando la tengas, revísala con Impeccable (audit, critique y polish), corrige lo que salga y ábremela en el navegador.
6. Al final, dame una lista corta de lo que has hecho y de lo que tengo que revisar yo. No la publiques todavía.

Claude te enseñará primero la dirección de diseño. Si no te convence, díselo antes de que empiece: es el momento más barato para cambiar.

Paso 6. Frases para retocarla

Háblale como le hablarías a un diseñador. Un cambio por mensaje: si pides diez cosas a la vez, alguna se pierde.

Diseño

• “Se ve genérica. Usa Impeccable para hacerla más atrevida (bolder), sin perder claridad.”
• “Hay demasiadas cosas. Quita todo lo que no ayude a que me contacten (distill).”
• “La letra no me convence. Propón otras dos combinaciones de tipografías y enséñamelas.”
• “Está todo muy pegado. Dale más aire entre secciones (layout).”
• “Quiero que se parezca más a [web que te gusta] en [qué exactamente], sin copiarla.”

Movimiento

• “Baja la intensidad del movimiento a 3.”
• “La animación del titular va lenta. Hazla más corta, siguiendo las reglas de Emil.”
• “Revisa todas las animaciones con las skills de Emil y quita las que no aporten.”
• “Añade una entrada sutil a [sección] cuando aparezca al hacer scroll.”

Contenido

• “Cambia el titular por: [texto].”
• “Pon mi logo arriba a la izquierda. Está en la carpeta y se llama [logo.png].”
• “Haz que todos los botones lleven a [enlace].”
• “Quita la sección de [nombre].”
• “Reescribe los textos de [sección] más cortos y más claros (clarify).”

Antes de publicar

• “Enséñame cómo se ve en móvil y arregla lo que se descoloque.”
• “Haz un repaso final con Impeccable (audit y polish).”

Paso 7. Publícala

Cuando te guste, díselo a Claude Code:

Publica la web en Netlify. Primero haz un borrador con netlify deploy y pásame el enlace. Si te digo que está bien, publícala en producción con netlify deploy --prod y ponle de nombre [nombre-de-tu-web].

Claude ejecutará estos dos comandos. No tienes que escribirlos tú, pero te pedirá permiso antes de cada uno:

netlify deploy

Sube un borrador: un enlace de prueba que no toca tu web definitiva.

netlify deploy --prod

Publica la versión definitiva, en [nombre-de-tu-web].netlify.app si ese nombre está libre.

A partir de ahí, cada vez que cambies algo, basta con decirle: “Publica los cambios en Netlify, en producción.”

Problemas típicos

La Terminal dice command not found: claude. Cierra la Terminal y abre una nueva. Si sigue igual, mira la guía oficial de errores de instalación: code.claude.com/docs/en/troubleshoot-install.

La Terminal dice command not found: npx o node. Node.js no está instalado, o la Terminal estaba abierta desde antes de instalarlo. Ciérrala, abre una nueva y prueba otra vez node --version.

Error de permisos al instalar Netlify (sale la palabra EACCES). No lo arregles con sudo a ciegas. Copia el error, pégalo en Claude Code y pídele que lo arregle de forma segura.

La skill no aparece al escribir /. Escribe esto dentro de Claude Code:

/reload-skills

Si sigue sin salir, cierra Claude Code y vuelve a abrirlo. Y comprueba que al instalar elegiste Claude Code y Global.

El instalador de Impeccable o de Taste falla. Los dos se pueden instalar también desde dentro de Claude Code, como plugin. Impeccable:

/plugin marketplace add pbakaus/impeccable

Después escribe /plugin, entra en Discover e instala Impeccable. Si luego te aparece como /impeccable:impeccable, es lo mismo: escribe el comando detrás. Taste:

/plugin marketplace add Leonxlnx/taste-skill

/plugin install taste-skill@taste-skill

Esta vía instala todas las skills de Taste, no solo la principal. Elige “Install for you” para tenerlas en todos tus proyectos. Usa una vía o la otra, no las dos.

Taste v2 te da resultados raros. Pasa a la v1, que su autor mantiene por compatibilidad:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend-v1"

La web sigue pareciendo genérica. Casi siempre le falta información. Dale 2-3 webs que te gusten, tus textos reales y fotos tuyas. Después pídele una crítica con Impeccable (critique) y que aplique lo que salga.

Claude te pide un token o una contraseña de Netlify. No se lo des. Ejecuta tú netlify login en la Terminal y dile que ya tiene acceso.

netlify login no abre el navegador. Copia el enlace que aparece en la Terminal y pégalo en tu navegador.

Has publicado y no ves los cambios. Lo más probable es que hayas subido un borrador, que tiene otro enlace. Pídele que la publique en producción. Si aun así no cambia, recarga la página.

Solo quieres probar, sin crear cuenta todavía. Netlify permite una publicación anónima:

netlify deploy --allow-anonymous

Te da un enlace temporal. Tienes una hora para reclamar el proyecto creando cuenta o iniciando sesión; si no, se borra. Úsalo solo para pruebas sin datos personales.

Un cambio lo ha estropeado. Dentro de Claude Code:

/rewind

Eliges el mensaje al que quieres volver y “Restore code”. También se abre pulsando Esc dos veces con el cuadro de texto vacío.