Frontend & UI
animation-vocabulary
Transforma uma descrição vaga de movimento no seu termo técnico exato.
O que é
Um glossário de busca reversa. O usuário descreve um efeito de movimento de forma solta e a skill devolve o termo preciso, citado ao pé da letra, com alternativas próximas quando várias servem.
Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when t
Por que isso importa para design
- Dá ao designer a palavra certa para orientar um agente.
- Desfaz a confusão entre pares próximos como clip-path versus mask, pop in versus bounce.
- Recusa-se a inventar termos, então a nomenclatura continua confiável.
O que cobre
- Entrances and exits
- Sequencing and timing
- Transitions between states
- Scroll
- Spring animations
- Polish and effects
Como instalar
animation-vocabulary
-
Clone o repositório.
git clone https://github.com/emilkowalski/skills -
Aponte o Codex para o arquivo da skill.
skills/animation-vocabulary/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Descreva o que você viu, algo como ‘o scroll rubber-band do iOS’.
-
Ela devolve o termo em negrito e uma definição de glossário em uma linha.
-
Peça alternativas quando dois termos poderiam encaixar.
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.