Frontend & UI
apple-design
Os princípios de interface fluida da Apple traduzidos em springs e gestos na web.
O que é
Conhecimento destilado das palestras de design da Apple na WWDC, sobretudo Designing Fluid Interfaces, mapeado para CSS, Pointer Events e bibliotecas de spring. Cobre resposta, interruptibilidade, inércia, materiais, tipografia e acessibilidade.
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible tran
Por que isso importa para design
- O feedback dispara no pointer-down, então os elementos pressionados deixam de parecer mortos.
- As animações partem do valor ao vivo na tela, eliminando saltos visíveis quando são interrompidas.
- Os flicks projetam um ponto de chegada, então os arremessos param onde o gesto mirou.
O que cobre
- Response
- Direct manipulation
- Interruptibility
- Momentum projection
- Materials and depth
- Reduced motion and accessibility
Como instalar
apple-design
-
Clone o repositório.
git clone https://github.com/emilkowalski/skills -
Aponte o Codex para o arquivo da skill.
skills/apple-design/SKILL.md -
Depois descreva a UI que você quer. O Codex segue a skill.
Como rodar com o Codex
-
Peça ao Codex uma sheet, um drawer ou uma interação de arrastar.
-
Ele acompanha 1:1 com pointer capture e registra o histórico de velocidade.
-
Ao soltar, ele entrega a velocidade a um spring usando os valores de amortecimento já definidos.
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.