Frontend y UI
apple-design
Los principios de interfaz fluida de Apple llevados a springs y gestos web.
Qué es
Conocimiento destilado de las charlas de diseño de Apple en la WWDC, principalmente Designing Fluid Interfaces, mapeado a CSS, Pointer Events y librerías de springs. Cubre respuesta, interrumpibilidad, inercia, materiales, tipografía y accesibilidad.
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 tran
Por qué importa para el diseño
- El feedback se dispara en pointer-down, así los elementos pulsados dejan de sentirse muertos.
- Las animaciones parten del valor real en pantalla, eliminando saltos visibles al interrumpirlas.
- Los toques rápidos proyectan un punto de destino, así los lanzamientos caen donde apuntaba el gesto.
Qué cubre
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Cómo instalarlo
apple-design
-
Clona el repositorio.
git clone https://github.com/emilkowalski/skills -
Señálale a Codex el archivo de la skill.
skills/apple-design/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pídele a Codex que construya una hoja, un drawer o una interacción de arrastre.
-
Sigue el puntero 1:1 con captura de puntero y registra el historial de velocidad.
-
Al soltar, entrega la velocidad a un spring usando los valores de amortiguación incluidos.
Todos los plugins de esta colección son gratuitos, de código abierto y enlazan a su fuente original real.
Más en la lista codex-design ↗Más plugins de diseño para Codex
Frontend y UI Qué hace gpt-taste Crea landing pages de estilo premiado con movimiento de scroll GSAP y rejillas bento sin huecos. 
Sistemas de diseño Qué hace Stitch Design Taste Escribe un DESIGN.md que orienta a Google Stitch hacia pantallas que no son genéricas. 
Frontend y UI Qué hace image-to-code Primero genera imágenes de diseño, las analiza y luego construye el código frontend correspondiente. 
Frontend y UI Qué hace imagegen-frontend-mobile Genera flujos de pantallas de apps móviles premium como imágenes, no como código. Siguiente paso
Diseña con Open Design, sin montar nada
Instálalo tú mismo, o ejecuta toda una capa de diseño curada alrededor de Codex con Open Design. Trae tu propia key: lo que produzcas es tuyo.