apple-designpor Emil Kowalski

Apple Design Skill.

Un skill de Claude Code y Codex para investigación UX: gestos, movimiento físico y jerarquía espacial de Apple traducidos para la web.

UX & Research
Código UI

Descargar OpenDesign Ver guía de uso

emilkowalski/skills · skills/apple-design/SKILL.mdSKILL.md

--- name: apple-design description: Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style … --- ## The Core Idea ## 1. Response — kill latency ## 2. Direct manipulation — 1:1 tracking ## 3. Interruptibility — the single most important principle ## 4. Behavior over animation — use springs ## 5. Velocity handoff — the seam between drag and animation

Encabezado y títulos de sección leídos del archivo original el 14 de septiembre de 2026 · 22 559 caracteres en total

01 Qué hace

Qué Hace el Skill apple-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Apple Design destila las charlas de interfaz de WWDC de Apple, principalmente Designing Fluid Interfaces (WWDC 2018), en reglas para construir UI web fluida y física. Está dirigido a diseñadores y desarrolladores que trabajan en interfaces basadas en gestos: arrastrar, deslizar, hojas (sheets), resortes (springs), impulso (momentum), transiciones interrumpibles, materiales translúcidos y profundidad, tipografía (tamaño óptico, tracking, leading) y comportamiento de movimiento reducido.

El hilo conductor es que el movimiento debe comenzar desde el valor actual en pantalla, heredar la velocidad del usuario, proyectar el impulso hacia adelante, y ser agarrable y reversible en cualquier instante. Los resortes reemplazan las animaciones de duración fija porque son inherentemente interrumpibles y sensibles a la velocidad, y el skill cierra con los ocho principios de diseño de Apple usados como vocabulario compartido.

Qué produce

CSS de retroalimentación de presión que escala el control en :active con una transición ease-out de 100ms.
Llamadas de resorte de movimiento que muestran el valor por defecto críticamente amortiguado y la variante de rebote de impulso lado a lado.
Un helper project() que implementa la proyección de impulso con decelerationRate por defecto en 0.998.
CSS de transparencia reducida que reemplaza las barras de herramientas translúcidas con fondos sólidos y sin desenfoque.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Responder al presionar (pointer-down)
La retroalimentación pertenece a la presión, no a la liberación: resalte el control en el instante en que se presiona, y trate cualquier cosa no esencial en la ruta de entrada, incluido el retraso de toque de ~300ms, como una regresión.
02
Seguir el Puntero 1:1
Utilice Pointer Events con captura para que el seguimiento se mantenga aunque el puntero salga de los límites del elemento, y respete el punto donde el usuario lo sujetó en lugar de saltar al centro del elemento.
03
Haga que el movimiento sea interrumpible
Un elemento en movimiento debe poder sujetarse y revertirse en pleno vuelo; el usuario nunca debería tener que esperar a que termine la animación actual para redirigirla.
04
Modele el movimiento con muelles (springs)
Un muelle absorbe la nueva entrada simplemente cambiando su objetivo, de modo que el movimiento se mantiene continuo; los guiones de duración fija no tienen nada que reapuntar.
05
Transfiera la velocidad de liberación
Dele al muelle la velocidad del puntero en el momento de la liberación para que no haya costura entre el arrastre y la animación; normalice según la distancia restante cuando la API requiera una velocidad relativa.
06
Proyecte el momentum y luego ajuste (snap)
No ajuste desde el punto donde el dedo se soltó; proyecte la posición de reposo tal como lo haría la deceleración del desplazamiento y elija el destino de ajuste más cercano a esa proyección.

02 Encuentra tu caso de uso

Cuándo Usar el Skill apple-design

Usa el skill apple-design en Claude Code o Codex cuando el trabajo sea investigación UX de este tipo. El alcance y los límites a continuación provienen del propio archivo del skill.

Buen caso de uso

Construir o revisar UI basada en gestos, como arrastre, deslizamiento, hojas, momentum y transiciones interrumpibles.
Trabajar con materiales translúcidos y profundidad, donde barras de navegación, barras de herramientas y hojas actúan como una capa funcional flotante.
Trabajo de tipografía a escala de tamaño, donde el tamaño óptico, el tracking y el interlineado deben cambiar con el tamaño.
Revisiones de accesibilidad donde la reducción de movimiento, la reducción de transparencia y el aumento de contraste están integrados en los componentes en lugar de añadidos después.
Equipos que quieren los principios de diseño de Apple como vocabulario compartido explícito al debatir una decisión.

Conozca los límites

Animación preescrita o de duración fija, que el skill descarta en cuanto el usuario puede tocar el elemento.
Reconocedores que solo informan un estado final del gesto, ya que descartan el seguimiento continuo del que depende la retroalimentación.
Chrome opaco que consume una franja fija en lugar de permitir que el contenido se desplace debajo de una capa translúcida.
Confirmaciones como hábito por defecto; el archivo las reserva únicamente para acciones genuinamente destructivas e irreversibles.

Qué proporcionar

El código del gesto y su historial de punteroAporte la implementación de Pointer Events, ya que el skill espera setPointerCapture y un breve historial de velocidad/posición, no solo el punto actual.
Una biblioteca de muelles que reapunta la velocidadEl mapeo web pasa por Motion / Framer Motion, y la biblioteca debe transportar la velocidad a través de un reapuntado; no todas las implementaciones de muelles lo hacen.
El chrome translúcido que quiere revisarLas barras de herramientas, barras de navegación y hojas se construyen como capas translúcidas con backdrop-filter blur y un fondo semitransparente, con el contenido desplazándose debajo de ellas.

03 Dentro del skill

Reglas que el skill apple-design le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Por defecto, use un muelle con amortiguación crítica
Empiece la mayoría de la UI con un damping de 1.0 para que se asiente sin rebasamiento; añada rebote, alrededor de un damping de 0.8, solo cuando el propio gesto haya llevado momentum, como un toque rápido o la liberación de un arrastre.
Animar desde el valor de presentación
Al interrumpir, lea la transformación en vivo del elemento en pantalla e inicie la nueva animación desde ahí; comenzar desde el valor lógico o de destino produce un salto visible.
No impulse los gestos con transiciones CSS
Las transiciones CSS y @keyframes no se pueden agarrar y revertir sin problemas en pleno movimiento, así que el movimiento impulsado por gestos debe manejarse con una librería de springs.
Divida el movimiento 2D en dos springs
Ejecute springs independientes de X e Y en lugar de un solo spring sobre una distancia 2D, porque los ejes se desincronizan cuando sus velocidades difieren.
Use la proyección de Apple, no la del libro de texto
La fórmula del libro de física v²/(2·decel) no es la que usa Apple; use la forma de decaimiento exponencial con decelerationRate 0.998 para una sensación de scroll normal, o 0.99 para algo más ágil.
Combine la velocidad a través de una reversión
Cambiar una animación por otra en el momento en que un gesto se revierte crea una discontinuidad de velocidad, un muro; elija una librería de springs que reoriente el destino a partir de la velocidad actual.
Nunca apile superficies translúcidas ligeras
El peso del material es cómo se lee la jerarquía: los materiales más pesados separan regiones estructurales y los más ligeros resaltan elementos interactivos, así que mantenga las capas translúcidas ligeras separadas entre sí.
Nunca use un solo valor de tracking para todos los tamaños
El letter-spacing es específico del tamaño: el texto grande de display necesita tracking negativo mientras que el texto pequeño necesita un tracking ligeramente positivo, así que un letter-spacing fijo estará mal en algún punto.

04 Ponlo a trabajar

Instala apple-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega apple-design a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

Forma genérica del CLI skills para skills/apple-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al Skill una Primera Tarea de Investigación UX

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

I'm building a bottom sheet in [React] that users drag down to dismiss. It currently uses a CSS transition, so a flick snaps from wherever I released and the sheet can't be grabbed again while it's closing. Rework it with Pointer Events and a spring so it tracks the finger 1:1, hands off the release velocity, and projects momentum to pick the snap point.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Agarre de nuevo un elemento que se está cerrando, en pleno movimiento, y confirme que sigue al dedo en lugar de completar su cierre primero.
Revierta un gesto y observe si hay una discontinuidad de velocidad, lo cual significa que la velocidad no se combinó a través del reajuste de destino.
Pruebe con personas reales en un contexto real, ya que el juicio sobre el movimiento se pierde en la máquina de un desarrollador.
Reproduzca el movimiento en cámara lenta o cuadro por cuadro, porque los defectos interesantes son invisibles a velocidad normal.
Confirme que el punto de destino provenga del punto final proyectado y no del punto de liberación.
Revise la variante de transparencia reducida: las superficies translúcidas deben volverse más esmeriladas o sólidas, con la opacidad de fondo aumentada y el desenfoque reducido.

En OpenDesign importe apple-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Archivo de skill: skills/apple-design/SKILL.md Suma de verificación del contenido registrada en la verificación; commit d23d7f8
License: MIT De LICENSE.
Estrellas del repositorio: 37.516 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio emilkowalski/skills, que contiene 9 skills en este catálogo. No es una calificación ni un recuento de uso para apple-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

1. Respuesta — elimine la latenciaResponda al presionar el puntero, audite cada latencia, mantenga la retroalimentación continua durante toda la interacción.
2. Manipulación directa — seguimiento 1:1Adhiera el contenido al puntero, respete el desplazamiento de agarre, mantenga un historial breve de velocidad.
3. Interrumpibilidad — el principio individual más importanteNunca bloquee la entrada, anime desde el valor de presentación, combine la velocidad al invertir, divida los resortes 2D.
4. Comportamiento sobre animación — use resortes (springs)La relación de amortiguación y la respuesta sustituyen a la física; amortiguación 1.0 por defecto, rebote solo para el impulso.
5. Traspaso de velocidad — la unión entre el arrastre y la animaciónPase la velocidad de liberación al resorte, normalizando por la distancia restante cuando se requiera

La descripción propia del Skill

«El enfoque de Apple al diseño de interfaz y el movimiento fluido y físico, traducido para la web. Úsala al construir o revisar UI basada en gestos, animaciones de resorte, interacciones de arrastrar/deslizar/hoja, transiciones con momentum e interrumpibles, materiales translúcidos y profundidad, tipografía (tamaño óptico, tracking, leading), movimiento reducido, o los fundamentos de diseño (feedback, consistencia espacial, moderación) detrás de las interfaces al estilo Apple.»

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 22.559 caracteres. Lea el archivo completo en GitHub.

Apple Design

Ejecute apple-design en una tarea real de investigación UX.

Descarga OpenDesign, importa apple-design desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/emilkowalski/skills --skill apple-design

Qué Hace el Skill apple-design en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo Usar el Skill apple-design

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill apple-design le da a Claude Code y Codex

Por defecto, use un muelle con amortiguación crítica

Animar desde el valor de presentación

No impulse los gestos con transiciones CSS

Divida el movimiento 2D en dos springs

Use la proyección de Apple, no la del libro de texto

Combine la velocidad a través de una reversión

Nunca apile superficies translúcidas ligeras

Nunca use un solo valor de tracking para todos los tamaños