Design for AIDeja de entregar el
look de IA por defecto
Cada pieza de este sitio se ejecuta en vivo. Copia el CSS, o copia el prompt y deja que Claude Code, Cursor, v0 o Lovable lo reconstruya al píxel.
En movimiento
Loaders, pulsos y shimmers, ejecutándose como CSS puro. Cada uno lleva sus propios keyframes.
Glass CorridorsNightbus
Rotating edge
A conic gradient spins around the card using a registered custom property.
Copiados recientemente
Snippets
Botones y tarjetas renderizados desde su propio CSS, cada uno sobre una pieza teñida a partir del espécimen. Pasa el cursor por uno: el segundo estado es parte de la receta.
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
Un solo prompt fija paleta, tipografía, radio y sombra para todo un proyecto. Cada póster está dibujado con sus propios tokens, botón incluido.
Nuevo en CSS
CSS reciente que merece pedirse a un agente por su nombre. Cada ventana muestra la funcionalidad en uso en una página; las cifras son la primera versión estable por navegador.
Estiliza un padre según lo que contiene, sin clases de estado en JS.
Chrome 105
Edge 105
Safari 15.4
Firefox 121
Las capas posteriores ganan, sea cual sea la especificidad de la regla de abajo.
Chrome 99Edge 99Safari 15.4Firefox 97
Dos animaciones sobre una propiedad, sumadas en vez de sustituidas.
Chrome 112Edge 112Safari 16Firefox 115
Anchored below, flips above near the bottom edge.
Tooltips y menús se anclan a su disparador y se voltean en el borde.
Chrome 125Edge 125Safari 26Firefox 147