Por qué Claude entrega diseños genéricos por defecto, las 5 habilidades que lo solucionan en la práctica y el paso a paso para crear la tuya cuando ninguna se adapta a tu marca.
Ya sabes cómo reconocerlo. Degradado morado sobre fondo blanco, tipografía Inter, sombra suave en la tarjeta, un emoji perdido en medio de la sección. Lo miras y piensas: esto lo hizo Claude.
No es culpa del modelo. Es su comportamiento por defecto.
Cuando le pides que "construya una landing page" sin más instrucciones, el modelo no busca la opción más interesante. Busca la más probable. Y la opción más probable es el promedio de todo lo que vio durante el entrenamiento: millones de páginas seguras, genéricas y olvidables. El resultado es un diseño que parece hecho por IA porque es, literalmente, el centro estadístico de lo que existe en la web.
Anthropic tiene un nombre para esto, lo llaman convergencia distribucional. En la práctica, significa una cosa: sin dirección, Claude siempre cae en lo común.
Una habilidad (skill) es cómo lo sacas de ahí.
Qué es una skill, rápidamente
Piensa en un archivo de markdown (texto) que Claude lee antes de empezar a trabajar. En lugar de repetir tus preferencias, tu sistema de diseño y tu tono en cada prompt, lo escribes una vez y se carga automáticamente. Es una descripción del puesto que le entregas antes de pasarle la tarea.
La diferencia en el resultado es enorme. Mismo prompt, mismo Claude, pero con la skill correcta cargada, deja de ser un diseñador genérico y se convierte en un colaborador que conoce tu trabajo.
Probé un montón de ellas, con antes y después en el mismo prompt para ver qué realmente mueve la aguja. Podemos separar 5 que realmente marcan la diferencia para el diseño web.
1. Frontend Design (la oficial de Anthropic)
Esta es la más popular del ecosistema, y por una buena razón: fue lanzada por la propia Anthropic. Ha superado las 277,000 instalaciones.
El secreto no es enseñarle a Claude a dibujar bonito; es enseñarle qué no hacer. El archivo lista explícitamente los clichés a evitar: tipografías sobreutilizadas, las combinaciones de colores habituales, esa estructura de sombra en tarjetas que todos reconocen. Es una pequeña lección de buen gusto incrustada en el modelo.
En la prueba de antes y después, esto se vuelve obvio. La misma landing page que salía con un degradado morado y emoji se convierte en algo editorial, con una elegante combinación de serifa y sans-serif limpia, animaciones de fade al hacer scroll y estados hover cuidados. Todo desde un solo prompt.
Cuándo usarla: Cada vez que empieces un proyecto desde cero y quieras escapar del diseño por defecto en el primer intento. Es tu base.
Y no te limita a su estilo. Si quieres el resto de las reglas pero solo tipografías sans-serif, solo edita el markdown y dile: "usa solo Geist, Google Sans o DM Sans". Claude ajusta el archivo.
2. Impeccable (la caja de herramientas)
Creada por Paul Bakaus, se convirtió en una de las favoritas de la comunidad, superando las 45.9k estrellas en GitHub en poco tiempo. Y es fácil ver por qué.
Lo interesante son los comandos. Está el /impeccable puro, pero viene con unos 20 subcomandos que puedes llamar según el contexto:
- /impeccable animate añade animaciones de entrada y movimiento de forma cohesiva, que tienen sentido para la página
- /impeccable quieter realiza una auditoría de "ruido" en el diseño (demasiados degradados, peso de fuente pesado en cada título, emojis dispersos) y recorta el exceso, aportando elegancia en lugar de gritar
- /impeccable audit hace una comprobación de calidad y accesibilidad
- /impeccable document genera un design.md que captura todo tu sistema de diseño para que cualquier agente lo lea después
Por debajo, tiene 46 reglas deterministas para la detección de "slop" (contenido de baja calidad generado por IA), esas que se ejecutan sin depender de que el modelo adivine. Detecta patrones generados por IA con precisión.
Cuándo usarla: Para iterar sobre lo que ya tienes. ¿Tienes una página lista y quieres domar la exageración? quieter. ¿Le falta vida? animate. En dos prompts, el sitio cambia de nivel.
Un detalle que va más allá de la herramienta: Impeccable tiene una pestaña "slop" que muestra los patrones que le enseña a la IA a evitar. Mira esta lista tú mismo. Aprender a reconocer que un borde de acento en el lateral de una tarjeta se ha convertido en un cliché de IA te hace diseñar mejor manualmente también.
3. UIUX Pro Max (la que obliga a Claude a pensar)
Esta es una base de datos de diseño potenciada, y la más destacada de la lista: superó las 105k estrellas en GitHub. Tiene 67 estilos de UI, 161 paletas de colores, 57 pares de tipografías, 99 guías de UX y 16 stacks tecnológicos para que sepa cómo implementar en cada framework.
El objetivo no es darte código rápido; es todo lo contrario. Obliga a Claude a razonar antes de escribir una sola línea. Ejecuta tu layout a través de una búsqueda en cinco dominios en paralelo (producto, estilo, color, landing, tipografía), aplica reglas de razonamiento, y solo entonces devuelve un sistema de diseño completo, con los antipatrones a evitar ya marcados.
https://x.com/nett0eth/status/2073490435066982554
El resultado son secciones intencionales, no decorativas. En la prueba, hizo cosas como una transición de claro a oscuro justo en el bloque de KPI, específicamente para resaltar el número que debe sobresalir. Es el tipo de decisión que esperas de un humano, no de un generador.
Cuándo usarla: Cuando tienes claridad sobre el contenido y buscas profundidad de diseño. Y un consejo que vale oro: cuanto más específico seas sobre lo que quieres en cada sección, mejor. Una skill no lee tu mente; amplifica tu dirección. Enviar "usa la skill y haz un rediseño más drástico, explora las paletas y los pares de tipografía" cambia completamente lo que recibes.
4. Web Design Guidelines (la auditora, de Vercel Labs)
Esta es para el final del proyecto, no para el principio. Viene de Vercel Labs, tiene 29k estrellas en GitHub, y audita tu código contra la lista de directrices de interfaz web de Vercel, más de 100 reglas: foco de teclado funcionando, nunca deshabilitar el zoom, no bloquear el pegado, indicador de carga en botones, jerarquía de encabezados, ARIA, y demás.
Y tiene un truco que me gusta: puedes pedirle a Claude que anote los problemas directamente en la pantalla de vista previa. En lugar de leer una lista, ves en el sitio, en naranja, dónde falta un aria-label, dónde se rompe la navegación por teclado, dónde el CTA carece de foco. Se vuelve visual.
Cuándo usarla: Cuando el diseño ya es bueno y quieres asegurarte de que sea accesible y no avergüence a nadie que use un teclado o un lector de pantalla. Es el control de calidad antes de salir en vivo.
5. Astryx (el sistema de diseño listo para agentes, de Meta)
https://x.com/nett0eth/status/2073826299789889884
La quinta está en otra categoría: no es una skill de estilo, es un sistema de diseño completo. Las 4 anteriores enseñan a Claude a diseñar mejor, una pantalla a la vez. Meta apostó por el camino opuesto y abrió Astryx, el sistema de diseño que creció durante 8 años internamente, se convirtió en el más grande y utilizado de la empresa, y funciona en más de 13,000 aplicaciones. Ahora es de código abierto y, el detalle que importa aquí, está listo para agentes.
El truco es este: en lugar de esperar que el modelo tenga sentido común para cada componente, le das un sistema donde todo ya nace accesible y consistente. Hay más de 150 componentes, 7 temas listos, modo oscuro y una CLI que tanto la persona como el agente usan de la misma manera, leyendo el mismo documento. Incluso hay un archivo CLAUDE.md en el repositorio para que Claude entienda la casa antes de escribir la primera línea.
Funciona con React y StyleX, está en beta, y ya tiene 8.2k estrellas.
Cuándo usarla: Cuando quieres consistencia de sistema, no solo una pantalla bonita. Las skills refinan el gusto del modelo; Astryx asegura que la base ya sea sólida antes de cualquier prompt. Ambas se complementan.
Dónde encontrar más skills
Estas 5 cubren aproximadamente el 90% de lo que un diseñador web hace en Claude. Pero si quieres explorar, hay buenos directorios:
- UI Skills está enfocado en ingenieros de diseño pero también sirve para diseño web. Lista varias de estas 4 y tiene cosas de accesibilidad y Shadcn.
- Type UI es mi favorito para quienes piensan primero en lo visual. Te desplazas y ves una vista previa de cada estética (minimalista, neo-brutalismo, corporativo sofisticado) y llamas a la que quieras sin escribir un párrafo de instrucciones.
- MCP Market es un repositorio comunitario grande; ve a Agent Skills > Categories > Design Tools y hay una lista interminable.
- skills.sh es donde Vercel y otros publican oficialmente, bueno para obtenerlo directamente de la fuente.
Cómo crear tu propia skill
Cuando ninguna de ellas se ajusta al 100% a tu marca o a tu stack. Ahí es cuando creas la tuya propia.
En la aplicación de Claude o Claude Code, ve a Customize > Skills > Create Skill > Create with Claude. Empieza preguntándote qué debería hacer la skill.
La parte que separa una skill útil de una inútil es lo específico que seas aquí. En lugar de "haz un diseño bonito", da reglas de razonamiento. Por ejemplo:
- Siempre identifica primero el tipo de producto (dashboard, landing, app), porque el diseño cambia con el contexto.
- Siempre infiere el objetivo de la pantalla antes de dibujar: qué acción es más importante y qué debería notar el usuario primero.
- Por defecto, usa una paleta contenida, con fondo y superficie más neutros.
- Una tipografía principal para el cuerpo y, si es necesario, una tipografía de exhibición para títulos grandes.
Claude inicia una conversación y te pregunta sobre tu stack (tokens de Tailwind, por ejemplo), tus proporciones de espaciado, tus límites de layout. Sé detallado; eso es lo que hace que la skill valga la pena. Al final, empaqueta todo en un archivo .md con carpetas de referencia, y accedes a ella mediante tu propio comando de barra diagonal.
Pero crear la skill es la parte fácil. La parte difícil es asegurarse de que no se rompa en la siguiente sesión, y ahí es donde entra el eje que muchos omiten. Ya desglosé el marco de 8 pasos de Matt Pocock para escribir skills que se sostengan (desencadenante, estructura, dirección, poda) en un artículo separado, y vale más que cualquier skill de diseño que instales:
https://x.com/nett0eth/status/2075976597513830727
Vale la pena leerlo junto con esto; es el mismo razonamiento de "darle la regla correcta al modelo" aplicado un nivel más arriba. La guía oficial de Anthropic, La Guía Completa para Construir Skills para Claude, también desglosa los principios.
Lo que queda
Claude no es un diseñador impresionante por defecto. Esto no es ninguna novedad para cualquiera que haya pedido una landing page y haya recibido el habitual degradado morado.
La skill es cómo cierras esta brecha. No porque el modelo se haya vuelto más inteligente, sino porque le diste la regla que un diseñador real lleva en su cabeza. El modelo importa menos que el bucle que construyes a su alrededor.
Configúrala una vez. El salto en el resultado es lo suficientemente grande como para que no quieras trabajar sin ella nunca más.
La pregunta sigue siendo: ¿cuántos de tus proyectos siguen saliendo con el habitual degradado morado solo porque nunca cargaste una skill antes de pedir? Guarda y comparte 👍
Fuentes / enlaces:
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs)
- UIUX Pro Max
- Astryx (sistema de diseño listo para agentes, de Meta)
- La Guía Completa para Construir Skills para Claude
- Mi artículo anterior (marco de 8 pasos para crear skills):
