Guía de lectura localizada
emil-design-engFinalidad, uso y origen
Esta habilidad plasma la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
Fuente recuperada:
- Repositorio de origen
- vercel-labs/open-agents
- SKILL.md
.agents/skills/emil-design-eng/SKILL.md- Estrellas del repositorio
- 5,871
- Actualización del repositorio
- 2026-08-29
- Clasificación de habilidades
- Flujo de trabajo del agente
- Última recopilación
Licencia: MIT
Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.
Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.
Lo que hace esta habilidad
Esta habilidad plasma la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
Cómo funciona el flujo de trabajo ascendente
¿Cuándo usar resortes?
Interacciones de arrastre con impulso Elementos que deberían sentirse "vivos" (como la Isla Dinámica de Apple) Gestos que se pueden interrumpir a mitad de la animación Interacciones decorativas de seguimiento del ratón
Paso río arriba · L143 ↗Ingeniería de diseño
Eres un ingeniero de diseño con sensibilidad artesanal. Creas interfaces donde cada detalle se combina para lograr una sensación de perfección. Entiendes que, en un mundo donde el software de todos es lo suficientemente bueno, el buen gusto es lo que marca la diferencia.
Paso río arriba · L6 ↗El gusto se aprende, no es innato.
El buen gusto no es una preferencia personal. Es un instinto entrenado: la capacidad de ver más allá de lo evidente y reconocer lo que realza. Se desarrolla rodeándose de trabajos excelentes, reflexionando profundamente sobre por qué algo resulta agradable y practicando sin descanso. Al diseñar interfaces de usuario, no te limites a hacer que funcionen. Estudia por qué las mejores interfaces se sienten como se sienten. Analiza las animaciones. Inspecciona las interacciones. Sé curioso.
Paso río arriba · L12 ↗Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)Requisitos y configuración
No se seleccionó ningún fragmento de requisitos breves de este archivo. Esto no significa que la habilidad no tenga dependencias. Consulte las instrucciones de configuración del repositorio y los archivos de referencia.
Límites y controles de calidad
Nunca animar desde escala (0)
Nada en el mundo real desaparece y reaparece por completo. Elementos animados desdescale(0)Parecen surgir de la nada. Empieza desdescale(0.9)o superior, combinado con opacidad. Incluso una escala inicial apenas visible hace que la entrada parezca más natural, como un globo que tiene una forma visible incluso cuando está desinflado.
Comience con una prueba segura.
- Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
- Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
- Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
- Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.
Lea más en la fuente
- Ingeniería de diseño
- El gusto se aprende, no es innato.
- Detalles ocultos compuestos
- La belleza es poder
- Formato de revisión (obligatorio)
- Marco de decisión para la animación
- 1¿Debería animarse esto?
- 2¿Cuál es el propósito?
- 3¿Qué función de suavizado debería utilizar?
- 4¿A qué velocidad debería ser?
- Rendimiento percibido
- Animaciones de primavera
- ¿Cuándo usar resortes?
- Interacciones de ratones basadas en resortes
- Configuración de Spring
- Ventaja de interrumpibilidad
- Los botones deben responder con precisión.
- Nunca animar desde escala (0)
- Hacer que los popovers tengan en cuenta el origen.
- Información sobre herramientas: omitir el retraso en los siguientes desplazamientos del cursor.
- Utilice transiciones CSS sobre fotogramas clave para una interfaz de usuario interrumpible.
- Utiliza el desenfoque para disimular las transiciones imperfectas.
- Animar estados de entrada con @starting-style
- traducirY con porcentajes
- scale() también escala a los hijos.
- 3D transforma para profundidad
- transformar-origen
- ruta de recorte para animación
- La forma insertada
- Pestañas con transiciones de color perfectas
Habilidades relacionadas
Traducción y alcance
Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.
Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.
- Fuente fijada
- Lee el original ↗
- Fuente recuperada
- Confirmación de origen
cf865e94de7729751c747171785b6ce57e7b178c- Fuente SHA-256
9d261c73de2c2c4dc5662ab20117b8e045c7b71958f8042acf037325444ebe6b