Pare de pedir "deixa mais premium" e comece a dar regra de design de verdade
1
O que é isso, sem enrolação
A diferença entre um adjetivo e uma regra
A ideia: apple-design é uma skill do Claude Code que destila as talks de design da Apple (principalmente a Designing Fluid Interfaces, da WWDC 2018, mais The Details of UI Typography e Principles of Great Design) e traduz tudo pra web: CSS, Pointer Events, requestAnimationFrame e bibliotecas de mola como Motion e Framer Motion. Ou seja: em vez de você escrever "deixa isso mais premium" e torcer, o Claude passa a ter um conjunto de regras verificáveis pra seguir. Adjetivo é achismo. Regra é execução.
AO que muda no prompt: "deixa mais bonito" vira "anima a partir do valor atual da tela, com mola criticamente amortecida e resposta de 0,4s". O Claude para de chutar.
BOnde ela pega mais forte: qualquer coisa que o dedo toca. Arrastar, deslizar, gaveta, modal, carrossel, toggle. É onde o olho percebe a diferença em milissegundos.
CO que ela não é: não é um tema, não é um pacote de componentes e não deixa o seu site com cara de Apple. Ela dá o porquê por trás do resultado, não a aparência.
Quem escreveu isso importa: O repositório é do Emil Kowalski, que trabalhou na Vercel e na Linear e escreve sobre animação de interface no animations.dev. Não é conteúdo genérico raspado de blog: é experiência de domínio destilada em texto que o agente lê. Essa é a razão de a skill funcionar.
Rode na raiz do projeto onde você usa o Claude Code
npx skills@latest add emilkowalski/skills
Você não instala só uma skill: Esse comando traz nove, e a apple-design é uma delas. As outras que mais rendem no dia a dia: animate (constrói uma animação do zero escolhendo curva, duração e propriedade certas), review-animations (revisa as suas animações de forma rígida), improve-animations (audita todas as animações do código e devolve planos priorizados), find-animation-opportunities (acha onde faria sentido animar, e também onde não faria) e pick-ui-library (faz o agente escolher uma biblioteca de verdade em vez de reinventar um toast na mão).
Primeira mensagem, pra confirmar que carregou
Confirma que a skill apple-design está carregada e me lista em uma linha o que ela cobre.
Depois espera, não mexe em nada ainda.
Pegadinha que custa tempo: Skill recém-instalada só é enxergada em sessão nova. Se você instalou com o Claude Code aberto, feche e abra de novo antes de reclamar que não funcionou.
3
O uso que quase ninguém faz
Auditar o site que você já tem, em vez de começar um novo
Por que auditar rende mais que criar: Site novo é fácil de ficar bonito porque não tem passado. O site que já está no ar é onde moram os detalhes errados que você já não enxerga mais, porque olha pra eles todo dia. A skill não tem esse vício: ela lê o seu código com a régua da Apple e aponta um por um. É o mesmo trabalho que um designer sênior faria numa revisão, e leva minutos.
Prompt de auditoria (cole no Claude Code, na pasta do seu projeto)
Usa a skill apple-design pra auditar esta interface.
Não altera nenhum arquivo ainda. Só me devolve um relatório com:
1. Cada violação encontrada, com o arquivo e a linha.
2. Qual regra da skill ela quebra, citando a regra.
3. O impacto percebido: o que o usuário sente de errado por causa disso.
4. A correção concreta, com o valor exato a usar.
Ordena por impacto, do mais grave pro mais cosmético.
Separa no fim o que é problema de movimento, o que é de tipografia e o que é de material e profundidade.
✦ O tipo de coisa que costuma aparecer no relatório
Transição de CSS numa gaveta que o usuário arrasta.
Animação com transition ou @keyframes não pode ser agarrada e revertida no meio do caminho. O usuário puxa a gaveta de volta e ela ignora o dedo até terminar de fechar. A correção é mola, não transição.
Faça em duas etapas: Peça o relatório primeiro, leia, e só então mande aplicar item por item. Auditoria que já sai corrigindo vira um diff gigante que você não revisa, e aí você trocou um problema de design por um problema de confiança no próprio código.
4
Movimento: os números que a skill carrega dentro
É aqui que ela deixa de ser papo e vira valor
A frase que resume tudo: Uma interface parece viva quando o movimento começa do valor que está na tela agora, herda a velocidade do dedo, projeta o momento pra frente e pode ser agarrado e revertido a qualquer instante. Mola faz isso naturalmente. Transição de CSS não faz, porque tem duração fixa e não sabe ser interrompida.
Os dois parâmetros que a Apple usa (e por que não são os da física): A Apple trocou o trio massa, rigidez e amortecimento por dois números que um designer consegue pensar. Damping controla o repique: 1.0 assenta liso, sem passar do ponto; abaixo de 1.0 estica e volta. Response é quão rápido o valor chega no alvo, em segundos. Repare que response não é duração: mola não tem duração fixa, o tempo de assentar é consequência dos parâmetros.
Mover ou reposicionardamping 1.0 · response 0.4
Rotaçãodamping 0.8 · response 0.4
Gaveta ou bottom sheetdamping 0.8 · response 0.3
Regra de bolsodamping 1.0 como padrão da casa. Só use repique quando o gesto trouxe impulso (um arremesso, um flick, uma soltada). Repique num menu que só apareceu parece errado; repique num card que você jogou parece certo.
AInterrupção é o item mais importante da lista. Nunca bloqueie a entrada durante uma transição, e sempre anime a partir do valor que está desenhado na tela. Começar do valor lógico é o que causa aquele salto feio.
BNa reversão, misture a velocidade em vez de cortar. Trocar uma animação por outra na hora que o gesto inverte cria uma parede invisível. Use uma biblioteca de mola que reaproveita a velocidade ao mudar o alvo.
CSepare X e Y em duas molas independentes. Uma mola só, montada em cima da distância 2D, dessincroniza assim que os dois eixos ganham velocidades diferentes.
DFeedback no `pointerdown`, nunca no `click`. Esperar o dedo soltar pra dar retorno visual é o que faz a interface parecer morta.
ENo arrasto, respeite onde a pessoa pegou. Grudar o elemento pelo centro no momento em que ela toca quebra a ilusão na hora.
Bloco de requisitos que você cola em TODO pedido de interação
Requisitos de movimento (obrigatórios):
- Mola, nunca transição de CSS nem keyframes, em qualquer coisa que o usuário possa tocar ou arrastar.
- Damping 1.0 por padrão. Só use 0.8 se o gesto anterior carregou impulso.
- Response entre 0.3 e 0.4 segundos.
- Toda animação tem que ser interrompível: anime sempre a partir do valor atual desenhado na tela, nunca do valor alvo.
- Nunca bloqueie a entrada do usuário durante uma transição.
- Decomponha movimento 2D em duas molas independentes, uma pro X e uma pro Y.
- Feedback visual no pointerdown, contínuo durante o gesto inteiro, não só no fim.
- Use Pointer Events com setPointerCapture e respeite o offset de onde o usuário agarrou.
- Anime só transform e opacity.
- Entrada e saída pelo mesmo caminho: o que entra pela direita sai pela direita.
5
As duas funções que fazem o gesto parecer físico
Projeção de impulso e resistência na borda
Problema 1: pra onde o elemento vai quando o dedo solta? O erro comum é encaixar no ponto mais próximo de onde o dedo soltou. O certo é usar a velocidade pra projetar onde ele pararia se fosse deslizando, igual à desaceleração do scroll, e só então escolher o encaixe mais próximo desse ponto projetado. É isso que faz o arremesso parecer um arremesso. Essa é a função exata do código de exemplo da Apple, e ela não é a fórmula de física do livro (v²/2a), é decaimento exponencial.
Projeção de impulso (a função que a Apple realmente usa)
// decelerationRate 0.998 pro feel de scroll normal, 0.99 pra algo mais seco
function project(initialVelocity /* px/s */, decelerationRate = 0.998) {
return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
}
const pontoProjetado = posicaoAtual + project(velocidadeNaSoltada);
const alvo = encaixeMaisProximo(pontoProjetado); // escolha o alvo pela projeção
animarComMola(alvo, { velocity: velocidadeNaSoltada }); // e entregue a velocidade pra mola
Problema 2: o que acontece quando chega no fim? Parada seca na borda lê como travado. Resistência que aumenta quanto mais longe o dedo insiste lê como "está respondendo, só não tem mais nada aqui". É a diferença entre a pessoa achar que quebrou e a pessoa entender que acabou.
Resistência elástica na borda
// quanto mais além do limite, menos o elemento acompanha o dedo
function rubberband(overshoot, dimension, constant = 0.55) {
return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
}
E a emenda entre arrastar e animar: Quando o gesto acaba, a animação precisa continuar na velocidade exata do dedo. Se houver diferença, aparece uma costura visível entre o arrasto e a animação, e é justamente essa costura que separa "fluido" de "ok". Algumas bibliotecas querem velocidade relativa: divida a velocidade do gesto pela distância que falta até o alvo. Motion e Framer Motion aceitam o valor bruto em px/s direto na opção velocity.
6
Material, profundidade e tipografia
O que faz a interface ter camada em vez de ter caixa
ABarra e painel são camada translúcida, não faixa opaca.backdrop-filter: blur() com fundo semitransparente e o conteúdo passando por baixo. Faixa sólida come um pedaço fixo da tela e mata a sensação de profundidade.
BO peso do material carrega a hierarquia. Material mais pesado separa região estrutural (uma barra lateral); material mais leve chama atenção pro que é clicável. Nunca empilhe uma superfície translúcida clara sobre outra: a legibilidade desaba.
CSuperfície grande tem que parecer mais grossa: mais desfoque e sombra mais profunda que um chip pequeno.
DEscurecer pra focar, separar pra manter o fluxo. Tarefa modal pede escurecimento do fundo. Painel paralelo, que não bloqueia, usa translucidez e deslocamento sem escurecer nada.
ETexto sobre vidro não pode ser cinza chapado. Aumente o contraste, engorde um pouco o peso e dê uma folga no espaçamento entre letras. Cor forte vai na camada sólida, nunca no texto por cima do translúcido.
FTroque a borda de 1px do cabeçalho fixo por um degradê de desfoque onde o conteúdo encontra a barra flutuante, e só onde ela realmente sobrepõe o conteúdo.
A barra translúcida, do jeito certo
.toolbar {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(20px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.4); /* aresta clara = luz pegando no material */
}
Tipografia: o erro que está em 90% dos sites: Um `letter-spacing` fixo pra todos os tamanhos está errado em algum lugar. Texto grande de display precisa de espaçamento negativo, porque as letras parecem se afastar conforme crescem. Texto pequeno precisa de um tiquinho positivo pra ficar legível. E a entrelinha caminha ao contrário do tamanho: apertada em título grande, folgada no corpo do texto.
Duas regras que economizam trabalho: Monte a hierarquia com peso, tamanho e entrelinha como um conjunto, não só com tamanho: peso adiciona presença sem ocupar mais espaço. E comece pela fonte do sistema antes de sair escolhendo uma fonte customizada, porque ela já vem com tamanho óptico, tabela de espaçamento e ajuste de legibilidade prontos. Troque só quando tiver um motivo que você consiga defender.
7
Movimento reduzido, o item que todo mundo esquece
Não é tirar o feedback, é dar um equivalente mais suave
São três sinais independentes, não um: `prefers-reduced-motion` troca deslizamento, mola e parallax por transição curta de opacidade, sem elástico e sem passar do ponto. `prefers-reduced-transparency` deixa a superfície translúcida mais sólida: sobe a opacidade do fundo e tira o desfoque. `prefers-contrast: more` pede fundo quase sólido com borda definida. Quem trata os três de uma vez só está tratando nenhum direito.
AEvite fundo em movimento ocupando a tela inteira e oscilação lenta em loop (perto de um ciclo a cada 5 segundos é a faixa que mais incomoda).
BSuavize o salto de brilho na troca entre tema claro e escuro em vez de cortar de um pro outro.
CObjeto grande que atravessa a tela fica melhor semitransparente durante o trajeto, e superfície grande que se reposiciona longe pode sumir e voltar depois de assentar.
8
Os oito princípios, pra você discutir design com nome
É o vocabulário que faz o agente entender o que você quer
Por que decorar isso vale a pena: Metade do problema de pedir design pra uma IA é que você não tem a palavra. "Ficou estranho" não é instrução. "Isso viola familiaridade, porque o botão de fechar mudou de lugar entre duas telas" é. Esses oito nomes são a ferramenta de diagnóstico, tanto pra você quanto pro agente.
PropósitoFaça com intenção e decida o que NÃO construir. Toda função cobra tempo, atenção e confiança do usuário.
AutonomiaMantenha a pessoa no controle: ofereça caminhos, não force um só. Desfazer fácil no lugar de confirmação em tudo.
ResponsabilidadeAja no interesse do usuário. Peça permissão na hora certa, só o necessário, e antecipe o mau uso, principalmente com IA.
FamiliaridadeConstrua sobre o que a pessoa já sabe. Coisas parecidas se comportam igual e ficam no mesmo lugar. Só quebre o padrão se conseguir provar que é melhor.
FlexibilidadeContextos, aparelhos e habilidades diferentes. Quando nenhum layout serve pra todo mundo, deixe personalizar.
SimplicidadeNão é minimalismo. Enterrar tudo num lugar só parece limpo e não é simples. Caminho comum primeiro, avançado um nível abaixo.
OfícioNada é aleatório: cada espaçamento, cada tempo e cada alinhamento é uma escolha que você consegue defender. Scroll tremido lê como descuido.
EncantoÉ o resultado de acertar os outros sete, não confete jogado por cima. Decida a emoção que você quer causar e reforce em cada decisão.
Quatro regras táticas que caem bem em qualquer projeto: Retorno tem quatro tipos: status, conclusão, aviso e erro. Valide no meio do caminho, não só quando a pessoa envia. Orientação: toda tela responde onde estou, pra onde posso ir, o que tem lá e como eu saio. Agrupamento: proximidade sugere relação, e se você precisa de um rótulo pra explicar um controle, a relação está fraca. Rótulo específico ganha do genérico: dê nome ao que a seção contém ("Progresso", "Biblioteca"), nunca um guarda-chuva vago ("Início").
Isso aqui é a planta base. Com o que está nesta página você já instala a skill hoje, roda a auditoria no site que está no ar e conserta os detalhes na ordem certa. O que ficou de fora é a parte que transforma isso numa operação: o design system próprio que sobrevive a dez páginas em vez de uma, o processo de prototipar interagindo em vez de aprovar imagem parada, e principalmente o encaixe disso dentro de uma entrega que você cobra do cliente, do orçamento à apresentação. Montar esse pipeline dentro do SEU negócio, com a sua marca e o seu tipo de entrega, é o que eu construo junto com você por dentro.
✦ Material parado não muda nada
Pegou o passo a passo. E agora?
Material salvo que você nunca executa não muda nada. O que falta não é conteúdo, é gente construindo do seu lado. Na Core, a comunidade de builders, você aplica isso junto com quem tá fazendo o mesmo, com as aulas e o suporte pra destravar de verdade.
