Publicada el · Actualizada el
Que Claude diseñe páginas que no parezcan hechas por IA instala tres skills de diseño gratuitas
Claude puede construir webs muy resultonas, pero solo si lleva instaladas las skills de diseño adecuadas. Aquí tienes las tres que quitan el aspecto genérico de IA, más dos herramientas que le permiten construir y probar por sí mismo.
Lo que hay dentro, de principio a fin
El problema el aspecto genérico tiene causa
Por defecto, la IA construye siempre la misma web: tipografía Inter, degradados morados y tarjetas dentro de tarjetas. Las tres skills gratuitas que vienen a continuación cambian esos reflejos por criterio de diseño real.
Las tres son gratuitas y de código abierto, se instalan en segundos, funcionan dentro de Claude Code (la terminal, no la aplicación de escritorio) y se pueden apilar para sumar animación, pulido y gusto a la vez.
Skill 1 Emil Kowalski, movimiento y transiciones
Enseña a Claude animaciones de interfaz suaves y modernas, en lugar de los movimientos rígidos típicos de IA. Está basada en el trabajo real de un diseñador de interacciones.
Instalación en Claude Code:
npx skills add emilkowal/skill
Comprueba el identificador exacto en su web (emilkowal.ski) al instalar, porque los nombres de las skills pueden cambiar.
Skill 2 Impeccable, tipografía y limpieza
Corrige automáticamente tipografía, espaciado y color. Rechaza de forma activa las fuentes más quemadas y caza las marcas típicas de "IA slop" como el texto con degradado y las tarjetas anidadas.
Instalación en Claude Code:
/plugin marketplace add pbakaus/impeccable
Y después, desde la raíz de tu proyecto:
npx impeccable install
/impeccable init
La skill trae 23 comandos. Los dos que más vas a usar son /impeccable audit para localizar problemas y /impeccable polish para corregirlos.
Skill 3 Taste, aprende de webs bien hechas
En lugar de adivinar lo que queda bien, aprende de páginas reales con buen diseño, para que tus proyectos dejen de parecer generados por IA.
Instalación en Claude Code:
npx skills add Leonxlnx/taste
Ahora se construye y se prueba solo añade Figma y Playwright
Conectando Figma y Playwright, Claude puede diseñar la interfaz, escribir el código y probarlo en un navegador real por su cuenta. Tú solo le describes la web que quieres.
Añade los conectores:
claude mcp add figma
claude mcp add playwright
Figma permite a Claude traducir diseños con fidelidad. Playwright le permite hacer capturas y probar su propio resultado para luego arreglar lo que falle.
Cómo usarlo en la práctica cuatro pasos
- Instala primero las tres skills. Después solo describe la web que quieres. Las skills se activan solas mientras Claude construye.
- Dale una dirección de diseño. Una sola línea con el estilo que buscas (por ejemplo: "limpio, premium, mucho espacio en blanco") multiplica la eficacia de las skills.
- Audita antes de publicar. Ejecuta
/impeccable auditsobre la web terminada para cazar cualquier rastro de IA que se te haya escapado. - Es un punto de partida. Las skills te llevan casi al final. Tu contenido real y unos pocos ajustes manuales la cierran del todo.
El aspecto genérico de IA no es un límite de Claude, es una skill que le falta.