Skill de Página de Aterrizaje Glassmorphism
Genera una página de aterrizaje en un solo archivo con estilo glassmorphism, construida con clases utilitarias de Tailwind. Toda la apariencia se basa en una regla: el desenfoque solo es visible cuando hay algo colorido detrás — por lo tanto, cada panel de vidrio flota sobre un campo de gradiente, nunca sobre blanco plano.
La receta del vidrio
Una receta de panel compartida, aplicada a cada superficie:
backdrop-blur-xl bg-white/10 border border-white/20 shadow-2xl rounded-2xl
Reglas de superposición:
- El fondo de la página es un gradiente vibrante (de dos o tres tonos). Los paneles son la única capa translúcida sobre él.
- Un tono de acento impulsa los gradientes y las acciones principales; el resto se mantiene neutro.
- El texto sobre vidrio es blanco con opacidad del 90-100% para encabezados y del 60-70% para el cuerpo; nunca coloques grises de bajo contraste sobre un panel de vidrio brillante.
- Agrega un borde de 1px
border-white/20a cada panel; es lo que hace que el vidrio se lea como una hoja física en lugar de un rectángulo borroso. - Generosidad en las esquinas redondeadas (
rounded-2xl/rounded-3xl); el vidrio se percibe como suave, no como afilado.
Variaciones de color
Incluye las cuatro variaciones siguientes como un conjunto seleccionable; el ejemplo las expone como una fila de chips de tema que intercambian el campo de gradiente y el acento en vivo.
| Variación | Campo de gradiente | Acento |
|---|---|---|
| aurora | violeta → rosa → ámbar | #7C3AED |
| ocean | cielo → cian → índigo | #0EA5E9 |
| ember | rosa → naranja → amarillo | #F43F5E |
| forest | esmeralda → verde azulado → lima | #10B981 |
Flujo de trabajo
- Lee el DESIGN.md activo (inyectado arriba). Cuando defina color y tipografía, usa esos tokens para el texto y la acción principal; la receta del vidrio y el gradiente son contribución propia de este estilo.
- Nombra el producto y la promesa a partir del briefing. Solo texto real.
- Diseña la estructura: navegación sticky de vidrio, héroe con un H1 + un párrafo + CTA sobre el gradiente, una fila de variaciones de tema, una cuadrícula de 3 columnas de tarjetas de características de vidrio, un panel de testimonio de vidrio, y un CTA final.
- Mantén el nivel de calidad: un H1; el CTA principal usa el acento; el texto del cuerpo sobre vidrio se mantiene >= 4.5:1; los anillos de enfoque son visibles sobre una superficie translúcida; el diseño colapsa a una columna por debajo de 768px.
- Genera un
index.htmlautocontenido. Tailwind se carga a través del Play CDN para el prototipo; la salida de producción debe compilar Tailwind en su lugar.
Antipatrones
- Paneles de vidrio sobre un fondo plano y casi blanco (el desenfoque desaparece).
- Más de dos tonos de acento en pantalla a la vez.
- Desenfocar texto, o apilar vidrio sobre vidrio hasta que el contraste muera.
- Paneles esmerilados con esquinas cuadradas y afiladas.