6 skills gratis para que Claude diseñe páginas sin cara de IA

Qué hace

Le da a Claude un catálogo para decidir cómo se va a ver la página antes de escribir código. La versión gratis trae 79 estilos buscables (50 activos), 192 tipos de producto, paletas, combinaciones de tipografías y guías para 22 frameworks, y con eso genera un sistema de diseño. Se activa sola cuando le pedís trabajo de interfaz.

Lo que ganás

Tu página arranca con un estilo elegido para tu rubro, no con el que la IA usa por defecto.

Instalar en Claude Code

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

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

Alternativa, desde la terminal:

npm install -g ui-ux-pro-max-cli

y en la carpeta del proyecto:

uipro init --ai claude

Ojo

Necesita Python 3. Tiene una versión paga aparte (identidad de marca, logos); esta guía habla solo de la gratis.

MIT133.182 ★ (5/10/2026) github.com/nextlevelbuilder/ui-ux-pro-max-skill ↗

Qué hace

Guía de diseño para agentes de código. Según su README: una skill, 24 comandos, iteración en vivo en el navegador y 61 reglas que detectan los patrones típicos del diseño hecho con IA. Arrancó desde la skill frontend-design de Anthropic.

Lo que ganás

Los tics que delatan a la IA se detectan y se corrigen antes de que los vea tu cliente.

Comandos que vas a usar

/impeccable init una vez por proyecto: escribe un PRODUCT.md con tu público, el propósito y la voz de la página. Después, polish, audit, critique, distill, animate, bolder, quieter, typeset, layout, colorize y harden.

Instalar (recomendado)

Desde la carpeta del proyecto:

npx impeccable install

Y después, dentro de Claude Code:

/impeccable init

Alternativa en Claude Code (después instalá Impeccable desde /plugin):

/plugin marketplace add pbakaus/impeccable

Apache-2.076.847 ★ (5/10/2026) github.com/pbakaus/impeccable ↗

Qué hace

El criterio de diseño e interfaz de Emil Kowalski, que las armó, en sus palabras, a partir de sus años trabajando en empresas como Vercel y Linear. Parte de una observación: los agentes no tienen buen gusto. Eligen una animación de entrada que acelera cuando debería frenar (ease-in en vez de ease-out), o un borde sólido donde iba una sombra suave.

Qué incluye

emil-design-eng (la principal, animación y diseño), animate, review-animations, improve-animations, find-animation-opportunities, apple-design (principios de Apple tomados de sus charlas WWDC), mobile-native (que la web se sienta como una app en el teléfono), break-ui (probar la interfaz con datos extremos) y prototype.

Lo que ganás

Las animaciones y los detalles finos se sienten naturales, y la página aguanta datos raros sin romperse.

Instalar

npx skills@latest add emilkowalski/skills

MIT43.543 ★ (5/10/2026) github.com/emilkowalski/skills ↗

Qué hace

Revisa el código de tu interfaz contra más de 100 reglas de accesibilidad, rendimiento y experiencia de uso. Cada vez que revisa trae las reglas actualizadas de Vercel y te devuelve cada hallazgo con el archivo y la línea. Se dispara con pedidos como "revisá mi interfaz" o "chequeá la accesibilidad".

Lo que ganás

Una lista concreta de qué arreglar y dónde, antes de publicar, en vez de enterarte por un cliente que no pudo usar la página.

Instalar

npx skills add vercel-labs/agent-skills

Instala el paquete entero de skills de Vercel; web-design-guidelines es una de ellas.

MIT según su README31.952 ★ el repositorio entero (5/10/2026) github.com/vercel-labs/agent-skills ↗

Qué hace

Le pide a Claude que trabaje como el director de diseño de un estudio cuyo cliente ya rechazó propuestas que parecían cliché o de plantilla. Las decisiones de estilo y tipografía salen del rubro del cliente, tanto en una página nueva como al rehacer una existente. Nombra como tics de página generada resaltar una sola palabra del título en otro color y animar cada sección al entrar.

Lo que ganás

Claude decide el diseño pensando en tu rubro, en vez de repetir lo que trae por defecto.

Instalar en Claude Code

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

Si el marketplace oficial no aparece, agregalo primero:

/plugin marketplace add anthropics/claude-plugins-official

Ojo

Es de Anthropic y está en su marketplace oficial de plugins. Las estrellas son las del repositorio entero de skills de Anthropic, no las de esta skill sola.

Apache-2.0179.733 ★ el repositorio entero (5/10/2026) github.com/anthropics/skills ↗

Qué hace

Arma sitios inmersivos guiados por el scroll. El scroll funciona como una línea de tiempo: el video avanza a medida que girás la rueda, hay secciones que quedan fijas mientras avanza el argumento y títulos que se arman línea por línea. Le exige a cada sitio un movimiento firma propio, y que cada página nueva se diferencie de las anteriores en al menos 4 de 6 dimensiones.

Lo que ganás

Una página que se recorre como una película y que no repite la última que armaste.

Instalar en Claude Code

/plugin marketplace add nateherkai/scroll-craft

/plugin install nateherk-design

Se usa con:

/nateherk-design:scroll-craft

Si aparece "Run /reload-plugins to activate.", corré /reload-plugins.

Ojo

Necesita Node 18 o superior y ffmpeg en su versión completa. La clave de kie.ai hace falta solo si querés generar imágenes o video. Con tus propias fotos y videos no hay gasto; su README avisa que el video generado tiene costo. Y antes de elegirla: en una página que tiene que vender, un scroll que toma el control puede espantar.

MIT2.954 ★ (5/10/2026) github.com/nateherkai/scroll-craft ↗