Skill gratis para Claude
¿Por qué una app de Apple se siente viva y la mayoría de las páginas web se sienten tiesas? No es el color: es cómo responden cuando las tocas.
Este skill le enseña a Claude los principios de diseño que Apple explica en sus charlas de WWDC, traducidos a la web: resortes en lugar de duraciones, gestos que siguen tu dedo y animaciones que puedes interrumpir.
Te mostramos cómo instalarlo y usarlo, paso a paso. Y puedes probar la diferencia aquí mismo.
Si le pides a Claude una interfaz sin más, la anima con transiciones de duración fija: se ven bien en una captura y se sienten tiesas al usarlas.
Con el skill, Claude decide como un diseñador de interacción. Sabe qué valores usar, cuándo rebotar y cuándo no, y cómo respetar a quien prefiere menos movimiento.
En Claude entra a Personalizar, luego Skills, y sube el .zip sin descomprimirlo. En Claude Code, descomprímelo dentro de tu carpeta de skills. Con eso queda disponible en todos tus chats.
~/.claude/skills/apple-design/
Describe qué quieres construir y para qué. Mientras más concreto el gesto (arrastrar, deslizar, abrir una hoja), más principios aplica Claude.
Usa el skill de Apple Design. Construye [UNA HOJA QUE SUBE DESDE ABAJO / UN CARRUSEL / UN MENÚ LATERAL] para [MI PRODUCTO], que se pueda arrastrar con el dedo y se sienta como en iPhone.
Claude deja de animar con duraciones fijas y empieza a usar resortes con los valores que Apple publica: sin rebote para lo que solo aparece, con un rebote leve cuando el gesto trae impulso.
También cuida la respuesta al tocar, los bordes elásticos, los materiales translúcidos, la tipografía según su tamaño y a las personas que prefieren menos movimiento.
Arrastra la tarjeta y suéltala con fuerza hacia un lado. Con resorte cae donde la mandó tu impulso, y la puedes agarrar a medio camino. Con transición CSS cae en el punto más cercano a donde la soltaste, y si la agarras mientras se mueve, brinca.
Suéltala con fuerza hacia un lado.
No tienes que empezar de cero: pásale tu página o tu código y pídele que te diga qué se siente tieso y por qué, con el cambio concreto para cada cosa.
Usa el skill de Apple Design. Revisa [ESTA PÁGINA / ESTE COMPONENTE]: [LINK O CÓDIGO]. Dime qué se siente tieso en la respuesta al tocar, las animaciones, los gestos, la tipografía y el movimiento reducido. Ordena los cambios por impacto y explica cada uno con el principio que lo justifica.
Amortiguación y respuesta en lugar de duraciones, con los valores que usa Apple.
Arrastre 1:1, velocidad al soltar e impulso para decidir dónde cae.
Todo se puede agarrar y revertir a medio camino, sin brincos.
Capas translúcidas, sombras y jerarquía como en las interfaces de Apple.
Espaciado según el tamaño de la letra, movimiento reducido y los ocho principios de diseño de Apple para decidir qué sí construir.
Usa el skill de Apple Design. Haz que los botones de mi página respondan al presionarlos, no al soltarlos. Usa el skill de Apple Design. Convierte este modal en una hoja que sube desde abajo y se cierra deslizándola. Usa el skill de Apple Design. Ajusta la tipografía de mis títulos y textos según su tamaño. Usa el skill de Apple Design. Agrega a mi sitio una versión para quien prefiere menos movimiento. Usa el skill de Apple Design. Explícame qué valores de resorte usarías para [MI INTERACCIÓN] y por qué.
Gratis
Es el skill de Emil Kowalski, con licencia MIT. Lo usamos para diseñar páginas como esta.
Si no se descargó, usa el botón de abajo. Luego sigue los pasos para instalarlo.
En AI School for Business capacitamos a equipos completos para usar Claude en los procesos reales de su empresa.
Conocer el curso