Frontend & UI
emil-design-eng
As regras de Emil Kowalski para timing de animação, easing e acabamento de componentes.
O que é
Codifica uma filosofia de design engineering: um framework de decisão de animação, orientação sobre springs, princípios de componente, técnicas de clip-path, tratamento de gestos, regras de performance e uma checklist de revisão.
This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
Por que isso importa para design
- Ações frequentes perdem a animação por completo, então command palettes seguem instantâneas.
- As entradas começam em scale(0.95), nunca em scale(0), então nada surge do nada.
- Os popovers escalam a partir do gatilho, não do centro, mantendo a ligação espacial.
O que cobre
- The animation decision framework
- Spring animations
- Component building principles
- clip-path for animation
- Performance rules
- Review checklist
Como instalar
emil-design-eng
-
Clone o repositório.
git clone https://github.com/emilkowalski/skills -
Aponte o Codex para o arquivo da skill.
skills/emil-design-eng/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça ao Codex uma revisão de código de UI; ele devolve uma tabela de Antes, Depois e Porquê.
-
Para um movimento novo, ele responde se deve animar, por quê, qual easing e a que velocidade.
-
Ele aplica a checklist, sinalizando transition: all e durações acima de 300ms.
Todo plugin aqui é gratuito, open source e leva até a sua fonte original.
Mais na lista codex-design ↗Mais plugins de design para o Codex
Frontend & UI O que ele faz gpt-taste Cria landing pages estilo premiado com movimento de scroll em GSAP e grids bento sem falhas. 
Design Systems O que ele faz Stitch Design Taste Escreve um DESIGN.md que guia o Google Stitch para telas que fogem do genérico. 
Frontend & UI O que ele faz image-to-code Gera imagens de design primeiro, analisa cada uma e só depois constrói o código de frontend correspondente. 
Frontend & UI O que ele faz imagegen-frontend-mobile Gera fluxos de telas de app mobile em nível premium, como imagens, não como código. Próximo passo
Projete com o Open Design, sem a configuração
Instale este plugin por conta própria ou rode uma camada de design curada em volta do Codex com o Open Design. Use sua própria chave e seja dono do resultado.