Design for AIPare de entregar o
visual padrão de IA
Cada peça deste site roda ao vivo. Copie o CSS, ou copie o prompt e deixe o Claude Code, Cursor, v0 ou Lovable reconstruir tudo no pixel.
Em movimento
Loaders, pulsos e shimmers rodando em CSS puro. Cada um carrega os próprios keyframes.
Glass CorridorsNightbus
Rotating edge
A conic gradient spins around the card using a registered custom property.
Copiados recentemente
Snippets
Botões e cards renderizados a partir do próprio CSS, cada um numa peça tingida com a cor do espécime. Passe o mouse por um: o segundo estado faz parte da receita.
Designing for quiet interfaces
Why the best screens are the ones you barely notice, and how to get there.
Read more- Name
- Theo Baptiste
- Role
- Staff engineer
- ID
- #04211
Design
Line numbers in errors
Every stack trace links to the file and line.
3 drafts
Hover to fan the pile.
Estilos
Um prompt define paleta, tipografia, raio e sombra para o projeto inteiro. Cada pôster é desenhado com os próprios tokens, botão incluído.
Novo em CSS
CSS mais novo que vale pedir a um agente pelo nome. Cada janela mostra o recurso em uso numa página; os números são a primeira versão estável por navegador.
Estilize um pai pelo que ele contém, sem classe de estado em JS.
Chrome 105
Edge 105
Safari 15.4
Firefox 121
As camadas posteriores vencem, seja qual for a especificidade da regra abaixo.
Chrome 99Edge 99Safari 15.4Firefox 97
Duas animações numa propriedade, somadas em vez de substituídas.
Chrome 112Edge 112Safari 16Firefox 115
Anchored below, flips above near the bottom edge.
Tooltips e menus se prendem ao gatilho e invertem na borda.
Chrome 125Edge 125Safari 26Firefox 147