Design for AI

Estilo Glassmorphism: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para glassmorphism. También llamado interfaz de cristal esmerilado, tarjetas de cristal, UI con backdrop blur, UI translúcida. 2020-2023 (Windows Vista Aero e iOS 7 como antecesores; bautizado por Michal Malewicz en 2020).

Rasgos

  • paneles translúcidos (blanco al 8-20% de alfa) sobre un fondo colorido y desenfocado
  • `backdrop-filter: blur(16-24px)` es todo el truco; nada funciona sobre un fondo plano
  • borde claro de 1px (blanco al 25-40%) para simular el canto del cristal
  • sombras suaves y amplias en un color tintado, nunca negro puro
  • radio de 16-24px, padding interior generoso
  • el fondo lleva manchas de color desenfocadas para que el blur tenga algo que difuminar
  • la tipografía se mantiene nítida y con alto contraste sobre el cristal

Paleta

#0f172a base de página, #7c3aed y #06b6d4 manchas de fondo, rgba(255,255,255,0.12) relleno del cristal, rgba(255,255,255,0.35) canto del cristal, #f8fafc texto

Tipografía

Manrope o DM Sans para todo; títulos 600, cuerpo 400 a 16px; evita los pesos finos sobre cristal (desaparecen contra el blur)

Haz

  • pon dos o tres formas grandes de color desenfocadas detrás del layout para que el blur tenga profundidad que revelar
  • limita los paneles de cristal a dos niveles como máximo: tarjeta y un overlay flotante
  • prueba cada color de texto contra la zona más cargada del fondo

Evita

  • no apiles cristal sobre cristal sobre cristal; se convierte en barro
  • no uses cristal sobre una página blanca o negra lisa; no hay nada que desenfocar
  • no olvides un respaldo sólido para navegadores sin backdrop-filter

Conocido por: Apple macOS Big Sur, Microsoft Fluent Acrylic, paneles de Stripe (parcial)

Semilla CSS
:root {
  --bg: #0f172a;
   --fg: #f8fafc;
   --accent: #7c3aed;
   --glass: rgba(255,255,255,0.12);
   --edge: rgba(255,255,255,0.35);
   --radius: 20px;
   --shadow: 0 8px 32px rgba(31,38,135,0.37);
   --font: 'Manrope',sans-serif
}
Prompt

Construye el sitio en estilo glassmorphism. Fondo de página #0f172a con tres grandes manchas radiales desenfocadas en #7c3aed, #06b6d4 y #ec4899 (filter: blur(80px), opacity 0.6) colocadas detrás del contenido. Cada tarjeta, barra de navegación y modal es un panel de cristal: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), borde 1px rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Texto #f8fafc, texto secundario rgba(248,250,252,0.7). Fuente Manrope: títulos 600 a 40/28/20px, cuerpo 400 a 16px, line-height 1.6. Botones: #7c3aed sólido con texto blanco, radio 12px, el hover eleva 2px con una sombra más brillante. Espaciado en escala de 8px, padding de tarjeta 24-32px. Proporciona un respaldo sólido (rgba(15,23,42,0.85)) cuando backdrop-filter no esté soportado. Movimiento: 200ms ease-out solo en hover; sin animación disparada por scroll.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo glassmorphism. Fondo de página #0f172a con tres grandes manchas radiales desenfocadas en #7c3aed, #06b6d4 y #ec4899 (filter: blur(80px), opacity 0.6) colocadas detrás del contenido. Cada tarjeta, barra de navegación y modal es un panel de cristal: background rgba(255,255,255,0.12), backdrop-filter blur(20px) saturate(160%), borde 1px rgba(255,255,255,0.35), border-radius 20px, box-shadow 0 8px 32px rgba(31,38,135,0.37). Texto #f8fafc, texto secundario rgba(248,250,252,0.7). Fuente Manrope: títulos 600 a 40/28/20px, cuerpo 400 a 16px, line-height 1.6. Botones: #7c3aed sólido con texto blanco, radio 12px, el hover eleva 2px con una sombra más brillante. Espaciado en escala de 8px, padding de tarjeta 24-32px. Proporciona un respaldo sólido (rgba(15,23,42,0.85)) cuando backdrop-filter no esté soportado. Movimiento: 200ms ease-out solo en hover; sin animación disparada por scroll.

## Tokens
:root { --bg:#0f172a; --fg:#f8fafc; --accent:#7c3aed; --glass:rgba(255,255,255,0.12); --edge:rgba(255,255,255,0.35); --radius:20px; --shadow:0 8px 32px rgba(31,38,135,0.37); --font:'Manrope',sans-serif }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.

Snippets en este estilo

Ver todos: botones glass