Design for AI

Estilo Cristal + grano de ruido: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para cristal + grano de ruido. También llamado cristal granulado, UI esmerilada con grano, UI de gradiente con ruido, web con grano de película, cristal texturizado. 2022 en adelante (corrección del glassmorphism limpio; era de Fontshare, Fey, Family wallet).

Rasgos

  • paneles de cristal como en el glassmorphism pero con una textura de grano de película encima de todo
  • gradientes granulados en vez de suaves; el ruido es el acabado, no un fallo
  • paletas más oscuras y sombrías que el cristal de 2020: carbón, verde profundo, azul tinta con una luz cálida
  • bordes finos de 1px a baja alfa, sombras suaves y amplias
  • tipografía con más carácter: una grotesk con rarezas o un acento en serif cursiva
  • movimiento contenido; el grano hace el trabajo visual
  • a menudo monocromo más un color de resplandor

Paleta

#0e0f12 página, #16181d panel, rgba(255,255,255,0.1) canto, #e8e6df texto, #9a9890 apagado, #f2b880 resplandor cálido

Tipografía

Instrument Sans o Geist para la UI, Instrument Serif cursiva para acentos, JetBrains Mono para etiquetas pequeñas; títulos 500 a 40-64px con -0.02em, cuerpo 400 a 16px

Haz

  • genera el grano una sola vez como filtro SVG feTurbulence (baseFrequency 0.65-0.9, numOctaves 3) y aplícalo como capa fija a página completa al 6-10% de opacidad
  • coloca el grano por encima del cristal pero por debajo del texto, con pointer-events none y mix-blend-mode overlay
  • mantén la paleta en grises más un resplandor cálido para que el grano se lea como material, no como ruido

Evita

  • no uses un mosaico PNG de ruido mayor de 200x200; cuesta bytes y se repite de forma visible
  • no apiles grano sobre fotos cargadas; se convierte en barro
  • no dejes que la alfa del grano supere el 12%; el texto se vuelve borroso

Conocido por: Fey, Family wallet, Fontshare, app Reflect, Cosmos

Semilla CSS
:root {
  --bg: #0e0f12;
   --panel: rgba(22,24,29,0.7);
   --edge: rgba(255,255,255,0.1);
   --fg: #e8e6df;
   --muted: #9a9890;
   --glow: #f2b880;
   --radius: 14px;
   --grain: 0.08;
   --font: 'Instrument Sans',sans-serif
}
Prompt

Construye el sitio en estilo cristal granulado. Página #0e0f12 con un resplandor radial cálido arriba a la derecha (rgba(242,184,128,0.25), 60vw, blur(120px)). Añade una capa fija a página completa: un SVG inline con feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index por encima de los paneles pero por debajo del texto mediante una capa de apilamiento aparte. Paneles: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borde 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, apagado #9a9890, acento de resplandor #f2b880 para enlaces y el botón primario (que usa relleno #f2b880 con texto #0e0f12). Fuentes: Instrument Sans 500 para títulos a 56/36/24px con -0.02em, Instrument Serif cursiva para una palabra de acento por título al mismo tamaño, cuerpo 400 a 16px, JetBrains Mono 12px en mayúsculas para etiquetas. Movimiento: 250ms ease en hover; el resplandor respira durante 8s (opacity de 0.2 a 0.3).
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo cristal granulado. Página #0e0f12 con un resplandor radial cálido arriba a la derecha (rgba(242,184,128,0.25), 60vw, blur(120px)). Añade una capa fija a página completa: un SVG inline con feTurbulence (fractalNoise, baseFrequency 0.8, numOctaves 3) como background, opacity 0.08, mix-blend-mode overlay, pointer-events none, z-index por encima de los paneles pero por debajo del texto mediante una capa de apilamiento aparte. Paneles: background rgba(22,24,29,0.7), backdrop-filter blur(18px), borde 1px rgba(255,255,255,0.1), border-radius 14px, box-shadow 0 20px 60px rgba(0,0,0,0.45). Texto #e8e6df, apagado #9a9890, acento de resplandor #f2b880 para enlaces y el botón primario (que usa relleno #f2b880 con texto #0e0f12). Fuentes: Instrument Sans 500 para títulos a 56/36/24px con -0.02em, Instrument Serif cursiva para una palabra de acento por título al mismo tamaño, cuerpo 400 a 16px, JetBrains Mono 12px en mayúsculas para etiquetas. Movimiento: 250ms ease en hover; el resplandor respira durante 8s (opacity de 0.2 a 0.3).

## Tokens
:root { --bg:#0e0f12; --panel:rgba(22,24,29,0.7); --edge:rgba(255,255,255,0.1); --fg:#e8e6df; --muted:#9a9890; --glow:#f2b880; --radius:14px; --grain:0.08; --font:'Instrument Sans',sans-serif }

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