3 skills para webs con IA que no sean iguales

Si le pediste a la IA una página web y te devolvió lo mismo que a todo el mundo, esta guía es para vos. Acá vas a ver cómo instalar tres habilidades de diseño, paso a paso, y casos de uso según el tipo de página que quieras crear, con los pedidos listos para copiar.

Por qué todas las webs hechas con IA se parecen

Si alguna vez le pediste a una IA que te arme una página, ya lo viste. Sale prolija, funciona, y aun así se nota a kilómetros que la hizo una IA. Es porque todos los modelos aprendieron mirando las mismas plantillas, y si no les das otra guía, vuelven siempre a ellas.

Estos son los vicios más comunes. Fijate si alguno te suena:

Las tres habilidades de esta guía atacan ese problema, cada una desde un lado distinto.

Primero, qué es una habilidad (skill)

Una habilidad es un paquete de instrucciones que se le suma a tu asistente de IA. La instalás una vez y a partir de ahí trabaja distinto: en este caso, sabe de diseño. No tenés que acordarte de activarla en cada conversación, porque la mayoría se prende sola cuando le pedís una página.

Las tres son gratis. Y cada una sirve para un momento distinto:

Antes de arrancar: tener Claude Code

En esta guía las instalamos en Claude Code, la versión de Claude que trabaja directo sobre los archivos de tu computadora. No andan en el chat de la web.

Si todavía no lo tenés, entrá a claude.com/claude-code y seguí los pasos para tu sistema (Windows, Mac o Linux). Si nunca creaste nada con IA, en esta guía para crear una app sin programar te cuento cómo es el primer proyecto de punta a punta.

¿Usás Cursor, Codex o Gemini en vez de Claude? Impeccable y UI UX Pro Max también funcionan ahí. Al final te dejo dónde está la instalación para esos programas.

1. Frontend Design: un estilo propio desde el primer intento

Frontend Design es la habilidad oficial de Anthropic, la empresa que hace Claude. Tiene más de un millón de instalaciones en el marketplace de Claude, y está pensada justo para esto: que tus páginas no salgan con la estética genérica de la IA.

Lo que hace es simple. Antes de escribir una línea, Claude se frena a pensar para qué es la página, para quién es y qué estilo le va: editorial, retro, de lujo, minimalista, brutalista, lúdico. Elige uno y lo lleva hasta el final. Y evita a propósito las letras de siempre y el degradé violeta.

Para instalarla:

/plugin install frontend-design@claude-plugins-official

Cómo se usa: no tenés que hacer nada especial. Le pedís la página como siempre y la habilidad se activa sola. Lo que sí cambia el resultado es contarle el estilo que buscás. Si no le decís nada, igual elige uno por su cuenta, pero es mejor que lo elijas vos.

Ya la recomendé en las 3 skills para empezar con Claude Code, junto con otras dos que no son de diseño.

2. Impeccable: para mejorar una web que ya existe

Esta es la que uso cuando la página ya está hecha y quiero llevarla a otro nivel. Fue creada por Paul Bakaus, arrancó a partir de Frontend Design y se volvió mucho más completa: te ayuda con el diseño, la experiencia de usuario (que la página sea fácil de usar), las tipografías, los colores y bastante más.

Trae una lista de 61 reglas que detectan los vicios típicos del diseño hecho con IA, y un montón de comandos para pedirle cosas concretas.

Para instalarla son dos comandos, uno después del otro:

/plugin marketplace add pbakaus/impeccable

/plugin install impeccable@impeccable

El primero le dice a Claude Code dónde encontrar la habilidad y el segundo la instala. Cerrá y volvé a abrir Claude Code.

Cómo se usa: abrí Claude Code en la carpeta de tu página y, la primera vez, escribí:

/impeccable init

Te va a hacer unas preguntas sobre tu proyecto: para quién es, qué hace, cómo habla tu marca. Contestalas con calma, porque de ahí sale todo lo demás. Lo guarda en un archivo para no volver a preguntarte.

Después ya podés usar los comandos. Estos son los que más te van a servir al principio:

Podés decirle en qué parte enfocarse, en castellano: /impeccable critique la portada o /impeccable polish el formulario de contacto. Y si escribís /impeccable solo, te muestra la lista completa (son 24).

3. UI UX Pro Max: el diseño completo, con animaciones incluidas

UI UX Pro Max funciona distinto. Adentro trae una base de datos enorme de estilos, paletas de colores, combinaciones de tipografías y reglas de diseño separadas por rubro. Le contás qué querés construir y te arma un sistema de diseño completo: la receta visual de tu página, para que todo combine.

Y lo que más me gusta es que esa receta incluye los efectos y animaciones que le van a tu rubro, y también lo que conviene evitar. Después, cuando Claude programa la página, los aplica.

Este es un ejemplo, traducido y resumido, del que muestra la propia habilidad para un spa:

Ojo con una cosa: no es un programa que te genere animaciones sueltas. Te dice qué efectos le van a tu página y Claude los usa al armarla.

Para instalarla, también son dos comandos:

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Necesita Python. Es un programa gratuito que la habilidad usa para buscar en su base de datos. En Mac y Linux suele venir instalado; en Windows, casi nunca. Si Claude te avisa que falta, bajalo de python.org e instalalo. En Windows, en la primera pantalla del instalador, tildá la casilla “Add python.exe to PATH” antes de hacer click en instalar: es el error más común.

Cómo se usa: se activa sola. Lo importante es que le cuentes de qué rubro es tu página, porque elige todo a partir de eso. “Una página para mi negocio” le dice poco; “una página para mi estudio de yoga en Rosario” le dice mucho.

Casos de uso: según qué página quieras crear

En el video te pedí que me contaras qué tipo de página querías crear. Estos son los casos que más se repiten, con qué habilidad usar en cada uno y el pedido listo para copiar. Reemplazá lo que está entre corchetes con tus datos.

Una landing para tu emprendimiento

Una sola página que cuenta qué vendés y lleva a la gente a comprar o a escribirte. Acá rinde Frontend Design, porque lo que más importa es que tenga personalidad.

Armame una landing page para [tu emprendimiento: por ejemplo, mi marca de velas artesanales]. Quiero un estilo [cálido y editorial / moderno y minimalista / divertido y colorido], con [colores o sensación que te gusten]. Tiene que tener: qué vendo, tres productos destacados, opiniones de clientes y un botón para escribirme por WhatsApp. Pensala primero para verse bien en el celular.

Una página para tu local o tu servicio

Restaurante, peluquería, consultorio, gimnasio: páginas donde el rubro define mucho cómo tiene que verse. Acá conviene UI UX Pro Max, que tiene reglas armadas para cada tipo de negocio.

Quiero una página web para [tu negocio: por ejemplo, mi peluquería en Córdoba]. Antes de programar, armá el sistema de diseño para este rubro: estilo, colores, tipografías, efectos y qué evitar. Mostrámelo y esperá a que te diga que sí. La página tiene que tener: servicios con precios, fotos de trabajos, ubicación y un botón para reservar turno.

El “esperá a que te diga que sí” no es un detalle: así ves la receta antes de que Claude programe, y si un color no te gusta, lo cambiás en un minuto en vez de rehacer la página.

Tu portfolio personal

Una página para mostrar tus trabajos: diseño, fotos, ilustración, desarrollo. Funcionan las dos, pero con Frontend Design sale más jugado, que es lo que pide un portfolio.

Armame un portfolio personal para [tu profesión: por ejemplo, fotógrafa de casamientos]. Quiero que se sienta [elegante y silencioso / atrevido y experimental], que las fotos sean lo protagonista y que tenga una sección sobre mí y un formulario de contacto. Nada de plantilla genérica: elegí una dirección visual clara y llevala hasta el final.

Mejorar una web que ya tenés

Hiciste una página con IA, funciona, pero se ve como todas. Este es el terreno de Impeccable. Abrí Claude Code en la carpeta de esa página y seguí este orden, de a un comando por vez:

Para el paso 3, cuando ya leíste la revisión:

De todo lo que encontraste, arreglá primero los tres problemas que más hacen que la página parezca hecha con IA. Explicame en una línea qué cambiaste en cada uno.

Hacé un cambio grande por vez y mirá cómo quedó antes de pedir el siguiente. Si le pedís todo junto, cuando algo no te gusta no sabés qué lo rompió.

Darle vida con animaciones

Tu página está bien pero se siente quieta. Si la armaste con UI UX Pro Max, ya tiene sus efectos pensados; si no, pedíselo así:

Sumale animaciones a esta página, pero con criterio: que los elementos aparezcan suave al bajar, que los botones reaccionen al pasar el mouse y nada que distraiga de leer. Respetá a quien tenga activada la opción de reducir movimiento en su celular o computadora.

Con Impeccable instalado, /impeccable animate hace lo mismo con sus propias reglas.

¿Puedo tener las tres instaladas?

Sí, y no se rompe nada. Lo único: como Frontend Design y UI UX Pro Max se activan solas cuando pedís una página, a veces se mezclan. Si querés que use una en particular, nombrala en el pedido: “usá la habilidad ui-ux-pro-max para esto”.

La combinación que mejor me funciona: creo la página con una de las dos primeras y la termino con Impeccable.

Las tres de una: el resumen para copiar

Si ya leíste todo y solo querés instalar, pegá estos cinco comandos en Claude Code, uno por uno:

/plugin install frontend-design@claude-plugins-official

/plugin marketplace add pbakaus/impeccable

/plugin install impeccable@impeccable

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Después cerrá Claude Code, volvé a abrirlo y listo. Para ver lo que tenés instalado, escribí /plugin.

Si algo no funciona

• Te dice que no encuentra “claude-plugins-official”. Pasa en algunas versiones viejas. Pegá /plugin marketplace add anthropics/claude-plugins-official y repetí el comando de instalación. Si sigue fallando, actualizá Claude Code.
• Instalaste pero no cambia nada. Casi siempre falta cerrar y volver a abrir Claude Code.
• UI UX Pro Max se queja de Python. Mirá el aviso de la sección 3: instalalo desde python.org y, en Windows, no te olvides de la casilla “Add python.exe to PATH”. Después cerrá y abrí Claude Code.
• /impeccable no aparece. Escribí /plugin, buscá Impeccable en la lista y fijate que esté activada.
• Usás Cursor, Codex o Gemini. Impeccable se instala con npx impeccable install en la terminal, dentro de la carpeta de tu proyecto, y te pregunta en qué programas ponerla. Para UI UX Pro Max, la página del proyecto tiene un comando para cada programa. Las dos piden tener Node.js instalado.

Si querés ver qué hace cada una por dentro: Frontend Design, Impeccable y UI UX Pro Max.

Lo que sigue

Con estas tres, tus páginas dejan de parecer hechas en serie. El paso siguiente es pedirle bien las cosas a Claude: en las reglas de prompting que uso con Claude te dejo las que más me cambiaron los resultados. Y si el diseño te come el uso del plan, Caveman hace que Claude hable menos y gaste menos.

Si te sirvió, suscribite al newsletter: ahí mando herramientas y trucos de IA como estos. Y si tenés un proyecto y querés que lo pensemos juntos, reservá una asesoría 1:1.