3 herramientas para que tu web hecha con IA no parezca hecha con IA (Magic UI, Impeccable y Taste)

La IA te escribe el código de la web en minutos, pero todas le salen iguales: el mismo hero centrado, las mismas tarjetas, el mismo degradado morado. Estas tres herramientas le dan a tu agente lo que le falta —componentes de verdad y criterio de diseño— para que tu sitio no grite "hecho con IA".

Qué vas a aprender

• Por qué las webs generadas con IA se parecen todas, y cómo romper ese molde
• Instalar Magic UI y agregar componentes animados con un solo comando
• Conectar el MCP de Magic UI para que tu editor con IA ponga los componentes solo
• Instalar Impeccable para auditar, criticar y pulir el diseño con comandos
• Instalar Taste para darle "buen gusto" a tu agente y evitar el diseño genérico
• Un flujo de trabajo que combina las tres, de principio a fin

01 · Por qué tu web con IA se ve genérica

Todos los modelos aprendieron de las mismas plantillas

Si le pides a Claude, Cursor o cualquier agente que te arme una landing, el resultado casi siempre tiene los mismos "tells": hero con título centrado, tres tarjetas iguales abajo, un degradado azul-morado, sombras blandas por todos lados y cero jerarquía. No es culpa tuya ni del modelo: se entrenaron con las mismas plantillas de SaaS, así que por defecto regurgitan el mismo puñado de patrones. A eso se le llama AI slop —diseño genérico que se nota a un kilómetro.

La forma de arreglarlo no es pelear con el prompt cada vez. Es darle al agente tres cosas que no trae de fábrica, y cada una de estas herramientas cubre una:

La buena noticia: las tres son gratis y open source, y se instalan en minutos. Vamos una por una y al final las combinamos.

02 · Magic UI: componentes animados con un comando

Lo que tu IA necesita para no inventar animaciones mal

Magic UI es una librería de componentes animados para copiar y pegar: marquesinas de logos, texto con blur-fade, fondos de grilla, globos 3D, efectos de borde brillante. Está construida sobre React, Next.js, Tailwind CSS y Motion (la librería de animación antes llamada Framer Motion), y usa exactamente el mismo sistema que shadcn/ui —de hecho, lo extiende—. Tiene más de 21 mil estrellas en GitHub y licencia MIT.

El requisito: un proyecto React o Next.js con Tailwind CSS configurado, igual que pide shadcn/ui. Si ya usas shadcn, no tienes que configurar nada nuevo.

Primero inicializas (esto es de shadcn, una sola vez por proyecto):

pnpm dlx shadcn@latest init

Luego agregas el componente que quieras. Por ejemplo, el globo 3D:

pnpm dlx shadcn@latest add @magicui/globe

Eso te copia el código del componente dentro de tu proyecto (en components/ui/), no lo instala como dependencia oculta. Lo importas y lo usas como cualquier componente tuyo:

import { Globe } from "@/components/ui/globe"

Tip: si no usas pnpm, cambia pnpm dlx por npx (npm), yarn dlx o bunx. El resto del comando es idéntico.

La diferencia frente a dejar que la IA "invente" una animación: estos componentes ya están probados, optimizados y se ven bien. Tu agente deja de improvisar @keyframes torcidos y usa una pieza que funciona.

03 · El MCP de Magic UI: que tu IA los ponga sola

De copiar comandos a pedirlo en lenguaje natural

Un MCP (Model Context Protocol) es un puente que le da a tu editor con IA acceso directo a una herramienta. El MCP de Magic UI le permite a tu agente buscar y meter componentes sin que tú copies comandos a mano.

Para instalarlo en Claude (Claude Code / Claude Desktop):

pnpm dlx @magicuidesign/cli@latest install claude

El CLI también soporta otros editores: cambia claude por cursor, windsurf, cline o roo-cline según el que uses. Reinicia el editor después de instalar, o el MCP no aparece.

Una vez conectado, en vez de buscar el componente y correr el comando, se lo pides directo:

Agrega una animación de texto con blur fade al hero

Pon un fondo de grilla animado en la sección de precios

Agrega una marquesina vertical de logos de clientes

El agente consulta el MCP, encuentra el componente correcto de Magic UI y lo instala en tu proyecto. Es la diferencia entre tú siendo el intermediario y tu IA trabajando directo con la librería.

04 · Impeccable: el crítico de diseño con 23 comandos

El vocabulario de diseño que no sabías que te faltaba

Impeccable es una skill de diseño para asistentes de IA. Donde Magic UI te da piezas, Impeccable le da a tu agente criterio y comandos para razonar sobre el diseño: trae 7 archivos de referencia (tipografía, color, motion, diseño espacial, interacción, responsive y UX writing), 23 comandos especializados y 27 reglas que detectan anti-patrones de forma determinista. Licencia Apache 2.0.

Para instalarlo:

npx impeccable skills install

Si prefieres copiarlo a mano en un proyecto con Claude Code:

cp -r dist/claude-code/.claude your-project/

Una vez instalado, trabajas con el comando /impeccable seguido de la acción y el área. Los cuatro que más vas a usar:

/impeccable shape [area]       # Planear el diseño ANTES de codear
/impeccable audit [area]       # Chequeo técnico de calidad
/impeccable critique [area]    # Revisión de UX y diseño
/impeccable polish [area]      # Pasada final de pulido

También trae animate, distill y otros hasta sumar 23. Y tiene un CLI suelto que escanea una carpeta o una URL buscando problemas de diseño, útil para auditar algo ya hecho:

npx impeccable detect

Ejemplo real de uso: terminas tu landing con la IA, y antes de darla por buena corres /impeccable critique hero. Te devuelve cosas como "el título y el subtítulo compiten por atención porque tienen pesos parecidos" o "el CTA no contrasta lo suficiente con el fondo". Eso es lo que un diseñador te diría mirando por encima del hombro, y que la IA por defecto no te dice.

05 · Taste: darle buen gusto (anti-slop) a tu agente

El criterio para que no caiga en lo genérico

Taste se define como "el framework anti-slop para agentes de IA". Es una colección de skills portables que mejoran el diseño que genera la IA en layout, tipografía, motion y espaciado. Funciona con React, Vue y Svelte, porque las reglas apuntan a la intención de diseño, no a la API de un framework.

Para instalar todas las skills del repo:

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

O solo la principal, por nombre:

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

La skill central es design-taste-frontend, y lo interesante es que trae tres "diales" que ajustas del 1 al 10 según lo que quieras:

• DESIGN_VARIANCE — qué tan arriesgado vs. seguro es el diseño
• MOTION_INTENSITY — cuánta animación y movimiento
• VISUAL_DENSITY — qué tan denso o aireado el layout

Por ejemplo, para una landing premium con harto aire le subes la varianza y bajas la densidad; para un dashboard de datos haces lo contrario. Taste también incluye una redesign-skill para auditar un sitio existente y mejorarlo, y skills de generación de imágenes para crear referencias visuales que después le pasas al agente de código.

Nota: si tu agente no soporta npx skills add, puedes pegar el contenido de cualquier archivo SKILL.md directo en la conversación con ChatGPT, Claude o el que uses. Las skills son archivos de instrucciones portables.

06 · El flujo completo: de web genérica a web con criterio

Cómo se combinan las tres (menos de lo que crees)

El error es instalarlas y usarlas sueltas. El valor está en encadenarlas: criterio primero, componentes después, auditoría al final.

1. Carga el criterio con Taste — antes de pedirle nada a la IA, instala design-taste-frontend y ajusta los diales para el proyecto. Esto define el "norte" de diseño y evita que arranque genérico.
2. Planea con Impeccable — corre /impeccable shape hero (o la sección que sea) para que el agente piense la jerarquía, el ritmo y la intención antes de escribir una línea.
3. Construye con la IA — ahora sí, que genere el código. Con Taste activo, ya no te tira el hero centrado de siempre.
4. Mete los componentes con Magic UI — pídele por el MCP "agrega un blur fade al título" o "fondo de grilla en features". Animaciones probadas, no improvisadas.
5. Audita y pule con Impeccable — /impeccable critique [area] para la revisión de UX, y /impeccable polish [area] para la pasada final. Arregla lo que marque.
6. Verifica el resultado — npx impeccable detect sobre tu URL local para un último chequeo de anti-patrones.

Tip: no necesitas las tres en cada proyecto. Para un retoque rápido, Magic UI solo. Para rediseñar algo feo, Impeccable + Taste. Para construir desde cero con buen nivel, las tres.

07 · Reglas clave y errores comunes

Lo que conviene tener claro

• Taste y Impeccable no se pisan, se complementan. Taste es el criterio de entrada (que no salga genérico); Impeccable es el control de calidad de salida (auditar y pulir). Usar las dos es lo normal, no redundante.
• Magic UI copia código, no instala una caja negra. Cada componente que agregas queda como archivo tuyo en components/ui/, así que lo puedes editar. Si algo no te gusta, lo cambias; no dependes de actualizar una librería.
• Reinicia el editor tras instalar el MCP. El error más común con Magic UI vía MCP es que "no aparece": casi siempre es que no reiniciaste.
• Necesitas Tailwind y un proyecto React/Next para Magic UI. Si tu sitio es HTML plano sin build, Magic UI no aplica directo —ahí te sirven más Impeccable y Taste, que trabajan sobre intención de diseño.
• El criterio sigue siendo tuyo. Estas herramientas suben el piso, no deciden por ti. Si los diales de Taste quedan en "máxima varianza" para un banco, vas a tener un problema. Ajusta al contexto.
• Son gratis y open source, pero revisa la licencia si las redistribuyes. Magic UI es MIT, Impeccable y Taste tienen sus propias licencias (Apache 2.0 la primera). Para uso normal en tus proyectos, sin problema.

La idea de fondo: la IA ya escribe el código rápido. Lo que le falta es gusto y piezas buenas. Magic UI le pone las piezas, Taste le pone el gusto de entrada e Impeccable lo revisa a la salida. Con eso, tu web deja de parecer una plantilla más.

Guías relacionadas

• Guía completa para usar Claude Code