El kit de diseño con Claude

Ya lo viste en Instagram y en todos lados: el mismo diseño una y otra vez, y sabes a cuál me refiero. Pasa porque Claude, sin ayuda, se va a lo genérico. Estas cinco skills le quitan ese piloto automático. No son plantillas que copias: le enseñan a Claude cómo pensar el diseño, cómo mover las cosas con elegancia y cómo revisarse a sí mismo. La instalas una vez y le hablas normal.

Las cinco se instalan igual. Si nunca lo has hecho, abre tu terminal (o pídeselo a Claude Code), pega el comando de cada una y listo: queda disponible para siempre.

La primera la hizo el patrón: Anthropic, los creadores de Claude. Antes de escribir una sola línea, frontend-design obliga a Claude a tomar decisiones de diseño y a casarse con la referencia que le des, para que no se vaya con lo genérico de siempre. Es la base: instálala primero y todo lo demás se ve mejor desde el primer prompt.

Usa la skill frontend-design. Esta es mi referencia [pega una imagen o un link]. Diseña la landing de [tu producto] con esa misma vibra: tipografía, layout y colores con intención, nada genérico. Antes de codear, dime las decisiones de diseño que vas a tomar.

Esta es de las más fuertes y de mis favoritas: muchos la recomiendan y con razón. No te da diseños hechos — le enseña a Claude a diseñar. Trae más de 67 estilos, 161 paletas, 57 pareos de fuentes y 99 guías de UX por industria para que ilustre y aprenda. Si tuviera que escoger una sola skill de diseño, sería esta. Además arregla textos, tarjetas, efectos, animaciones y más.

Usa la skill UI UX Pro Max. Soy [tu industria, ej. una clínica dental] y quiero una landing moderna. Escoge el estilo, la paleta y el pareo de fuentes que mejor le queden a este tipo de producto y explícame por qué, luego constrúyela responsive con Tailwind.

Una skill que nunca puede faltar: animaciones. Aquí entra Emil Kowalski, una autoridad en movimiento en la web. Su skill le enseña a Claude a hacer animaciones, transiciones y movimiento de forma fluida, no a los tirones. Y si la combinas con UI UX Pro Max, puedes armar animaciones elegantes para tu web, tus presentaciones y casi cualquier proyecto.

Usa la skill de animaciones de Emil Kowalski. Agrégale movimiento a esta página: entradas suaves al hacer scroll, hover en las tarjetas y una transición elegante al abrir el modal. Cuida el easing y la duración para que se sienta natural.

Otro proyecto monstruo, y mis respetos para el equipo que lo hizo. Huashu Design reemplaza la mayoría de tus apps de diseño desde Claude Code: con un solo prompt te arma prototipos de apps de iPhone clickeables, exporta presentaciones PPTX animadas y crea animaciones completas en MP4. Todo en un mismo sistema compacto: lo instalas, se lo pides y te lo entrega. Suena demasiado bueno, pero funciona muy bien.

Usa la skill Huashu Design. Hazme un prototipo clickeable de una app de iPhone para [tu idea, ej. un temporizador pomodoro] con 4 pantallas reales. Dame 3 direcciones visuales distintas para que escoja.

El quinto es mi favorito, pero no diseña: audita. Es de Vercel y es de los consentidos de todos. Revisa tu interfaz contra más de 100 reglas y te dice exactamente los archivos, las líneas y los detalles que están mal, para que todo quede alineado y bonito. Es el complemento perfecto: las otras cuatro diseñan, esta revisa.

Usa la skill web-design-guidelines de Vercel. Audita mi interfaz contra las reglas de diseño y accesibilidad, y dame la lista de problemas con el archivo y la línea de cada uno, ordenados de lo más importante a lo menos.

No tienes que usar las cinco a la vez, pero juntas se potencian. La jugada que más recomiendo: diseña con base, dale criterio, anímalo y revísalo al final.

Esta es mi referencia [imagen o link]. Con frontend-design y UI UX Pro Max, diseña la landing de [tu producto] respetando esa estética y escogiendo estilo, paleta y fuentes acordes. Súmale animaciones fluidas con la skill de Emil Kowalski. Al final, audítala con web-design-guidelines de Vercel y arregla lo que salga mal.

Con estas cinco resuelves la mayoría de los problemas de diseño con Claude, Codex o la herramienta que uses. Si quieres que entremos a fondo en alguna, cuéntame qué vas a diseñar y te paso la guía completa. Y si te sirvió, sígueme y compártelo con alguien que lo necesita.