Las reglas de diseño de Apple, para tu IA

Lo que Apple publica

Dos lugares. Las reglas están en la Human Interface Guidelines (la HIG). Los archivos para diseñar, en Apple Design Resources:

• Kits de interfaz. iOS 27 y iPadOS 27, macOS 27, watchOS 26 y visionOS 26 en Figma y Sketch; tvOS 18 en Sketch.
• Plantilla de íconos de app en Figma, Sketch, Photoshop e Illustrator.
• Fuentes. SF Pro, SF Compact, SF Mono y New York, más SF Arabic, SF Armenian, SF Georgian y SF Hebrew.
• SF Symbols 27. Más de 7.000 símbolos en nueve pesos y tres escalas.
• Icon Composer. Íconos por capas con Liquid Glass para iPhone, iPad, Mac y Apple Watch.
• Marcos de dispositivos y plantillas de tecnologías como Apple Pay, Sign in with Apple, Live Activities y Wallet.

Qué le enseña la skill a tu IA

Una skill es un archivo de instrucciones que Claude Code carga cuando trabaja en algo relacionado. Esta junta, en 20 secciones, lo que Apple enseña en sus charlas de diseño y en la HIG, traducido a la web:

• Movimiento. Respuesta inmediata al toque, arrastre pegado al dedo, animaciones con resorte que se pueden interrumpir y que heredan la velocidad del gesto.
• Tipografía. Tamaño, interlineado y espaciado de letras según el tamaño, como en las escalas de iOS y macOS.
• Color. Colores por función, no por apariencia, con sus versiones para modo oscuro y alto contraste.
• Accesibilidad. Tamaños mínimos de texto y de controles, contraste y movimiento reducido.
• Materiales y Liquid Glass. Cuándo usar vidrio y cuándo no.

Los números no los inventa

La skill trae los valores de la HIG como 144 variables de CSS, más las mismas para Tailwind v3 y v4. Un script las genera leyendo las tablas de Apple, así que ningún valor está escrito a mano:

• Los 11 estilos de texto de iOS y los 11 de macOS: tamaño, interlineado, peso y espaciado.
• Los 12 colores del sistema y los 6 grises, en claro, oscuro y alto contraste.
• Los mínimos de texto y de controles.

Paso a paso

1. Baja la skill

   git clone https://github.com/fvanlookeren-bit/apple-design-resources.git
   mkdir -p ~/.claude/skills
   cp -R apple-design-resources/apple-design ~/.claude/skills/

2. Úsala en Claude Code

   Claude Code la carga solo cuando trabajas en una interfaz. También la puedes llamar con /apple-design, por ejemplo para revisar una pantalla que ya tienes.

3. Suma los tokens a tu web

   @import "./apple-hig-tokens.css";
   
   .titulo {
     font-size: var(--hig-ios-title-1-size);
     letter-spacing: var(--hig-ios-title-1-tracking);
   }
   .boton { background: rgb(var(--hig-blue)); }

   Son opcionales: no cambian nada de tu diseño hasta que los usas.

4. Actualízalos cuando Apple cambie la HIG

   El repo trae el comando que baja las tablas de nuevo y el script que regenera los tres archivos. Están en el README.

Lo que aprendí usándola

Los tokens están en producción en vanlookstudio.com y en el dashboard que uso con mis clientes. Tres cosas que te ahorran errores: