Como Ensinar Agentes de IA a Construir Interfaces Polidas

Se você já pediu ao Cursor ou Claude Code para construir um menu suspenso ou modal, provavelmente notou algo estranho. O código funciona, o botão clica, mas tudo parece um pouco desajeitado. Os elementos aparecem com um atraso absurdo, bordas de cards são desenhadas com linhas sólidas escuras, e para uma simples notificação toast, o modelo importa um pacote abandonado há cinco anos.

Os modelos de linguagem são razoáveis em escrever lógica de componentes, mas não têm senso estético. Eles escolhem os parâmetros que aparecem primeiro nos seus dados de treinamento. O resultado é ruído genérico de interface.

Emil Kowalski, que anteriormente liderou animações e interfaces na Vercel e Linear, montou o repositório emilkowalski/skills. É um conjunto de instruções prontas para agentes de IA que ensinam redes neurais a construir layouts mais polidos.

Por que os agentes precisam de regras de design

Já percebeu a IA animando aparecimentos de janelas em momentos errados? Um erro comum é aplicar a função de easing ease-in para elementos entrando na tela. Na realidade, elementos recebidos devem começar rápido e desacelerar no final (ease-out), caso contrário a interface parece lenta.

O mesmo vale para detalhes de layout. Redes neurais frequentemente usam uma borda sólida onde um box-shadow semitransparente é necessário, ou reinventam soluções em vez de usar bibliotecas comprovadas.

Pequenos erros se acumulam. O resultado é uma UI que parece barata. O conjunto de habilidades de Emil faz a rede neural verificar regras básicas de design engineering antes de entregar o código final.

Como instalar as instruções

A instalação usa o utilitário CLI skills:

npx skills@latest add emilkowalski/skills

Após iniciar, seu agente de rede neural ganha acesso a uma base de conhecimento sobre movimento, proporções e seleção de ferramentas de frontend.

O que está dentro do repositório

Lá dentro está um conjunto de instruções formatadas em Markdown divididas por tarefa.

Verificando e melhorando movimento

As instruções review-animations e improve-animations fazem o agente realizar uma auditoria rigorosa do código. O modelo procura funções de easing perdidas, atrasos longos demais e transforms descuidados. Em vez de correções aleatórias, o agente cria um plano de otimização passo a passo que então executa sozinho.

A regra find-animation-opportunities ajuda a encontrar lugares onde animação realmente é necessária e proíbe explicitamente adicionar movimento onde só atrapalharia o usuário.

Dicionário e diretrizes da Apple

Para ajudar a rede neural a entender exatamente que tipo de micro-interação você precisa, animation-vocabulary é útil. Ele contém termos precisos para descrever animações.

Um arquivo separado apple-design contém princípios de interface Apple adaptados para web de conferências WWDC passadas. Eles ajudam a recriar aquela sensação responsiva de UI.

Seleção de bibliotecas e prototipagem

Se você pedir a um modelo para construir um toast ou dropdown personalizado, ele ou escreve cem linhas de código frágil ou instala um pacote há muito tempo sem suporte. A regra pick-ui-library força a IA a usar apenas soluções comprovadas que equipes de produto realmente dependem.

Para experimentos rápidos, existe prototype. Esta habilidade gera várias variantes do mesmo elemento de UI de uma vez e adiciona um toggle em cima para que você possa compará-las ao vivo.

Para quem isto é

Se você usa Cursor, Claude Code, Windsurf ou agentes CLI similares para trabalho frontend diariamente, este repositório economizará muito tempo em correções manuais de CSS. Você não precisará mais alterar manualmente ease-in para cubic-bezier e explicar ao modelo por que uma borda sólida fica ruim em dark mode.