Frontend y UI
emil-design-eng
Las reglas de Emil Kowalski para el timing de animación, el easing y el acabado de componentes.
Qué es
Codifica una filosofía de ingeniería de diseño: un marco de decisión de animación, guía sobre springs, principios de componentes, técnicas de clip-path, manejo de gestos, reglas de rendimiento y una lista de revisión.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Por qué importa para el diseño
- Las acciones frecuentes pierden su animación por completo, así las paletas de comandos se mantienen instantáneas.
- Las entradas parten de scale(0.95), nunca de scale(0), así nada aparece de la nada.
- Los popovers escalan desde su disparador en vez de su centro, manteniendo el vínculo espacial.
Qué cubre
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
Cómo instalarlo
emil-design-eng
-
Clona el repositorio.
git clone https://github.com/emilkowalski/skills -
Señálale a Codex el archivo de la skill.
skills/emil-design-eng/SKILL.md -
Luego describe la interfaz que quieres. Codex sigue la skill.
Cómo ejecutarlo con Codex
-
Pídele a Codex que revise código de UI; devuelve una tabla de Antes, Después y Por qué.
-
Para movimiento nuevo responde si debe animarse, por qué, qué easing y a qué velocidad.
-
Aplica la lista de revisión, señalando transition: all y las duraciones de más de 300ms.
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.