Frontend & UI
Animation Review
Encontra, melhora e revisa movimento com um padrão de ofício sênior.
O que é
Três das skills de movimento de Emil Kowalski atuando como um único loop: encontrar lugares que deveriam animar, melhorar o movimento existente e revisar o código de animação contra um alto padrão de ofício.
Bundles 3 commands: find-animation-opportunities / improve-animations / review-animations
Find, improve and review motion in a codebase against a senior craft bar.
Por que isso importa para design
- Revela a UI que deveria se mover e não se move, e rejeita o movimento que não deveria existir.
- Transforma o vago ‘deixa mais agradável’ numa auditoria de movimento priorizada.
- Mede a animação por um padrão de ofício nomeado, não pelo gosto pessoal.
O que cobre
- Find animation opportunities
- Improve animations
- Review animations
- Craft bar
Como instalar
Animation Review
-
Clone o repositório.
git clone https://github.com/emilkowalski/skills -
Aponte o Codex para o arquivo da skill.
skills/find-animation-opportunities/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Rode o passo de find para localizar oportunidades de movimento na sua UI.
-
Aplique o passo de improve para retrabalhar o código de animação existente.
-
Rode o passo de review antes de entregar para pegar movimento de baixo ofício.
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.