Design for AI

Estilo Serif de lujo / moda: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para serif de lujo / moda. También llamado diseño web de lujo, editorial de moda, sitio de marca de alta gama, web de alta costura, lujo silencioso. herencia de la moda impresa; web de 2012 en adelante (Net-a-Porter, Celine, Aesop, The Row).

Rasgos

  • serif de alto contraste o fina a tamaños grandes con letter-spacing amplio en mayúsculas
  • espacio en blanco enorme, texto de cuerpo diminuto, muy pocas palabras por pantalla
  • fotografía y vídeo a sangre, a menudo apagados o en blanco y negro
  • casi sin UI: filetes finísimos, enlaces de texto, ningún botón que parezca un botón
  • paleta de negro, marfil y un tono apagado (camel, sangre de toro, salvia)
  • composiciones centradas para campañas, retículas estrictas para listados de producto
  • movimiento lento y contenido: fundidos de 1s, parallax sutil, el hover revela una segunda imagen

Paleta

#f6f4f0 marfil, #0c0c0c negro, #8b7355 camel, #5a1f22 sangre de toro, #9a9a9a apagado, #e2dfd9 filete

Tipografía

Cormorant Garamond, Playfair Display, Bodoni Moda o Italiana para display (300-400 a 48-120px, tracking 0.1-0.25em en mayúsculas); Jost, Karla o tipo Helvetica a 12-14px para todo lo demás

Haz

  • compón el display fino (300-400) y enorme; el peso viene del tamaño, no de la negrita
  • mantén el cuerpo y el texto de UI a 12-14px con tracking 0.05-0.1em en mayúsculas; se lee como contención
  • dale a la fotografía todo el viewport; el texto se asienta en una esquina o en el centro exacto

Evita

  • no uses botones de color; los enlaces son texto subrayado o cajas con contorno finísimo
  • no añadas sombras, radio ni iconos más allá de un más, un menos y una flecha
  • no abarrotes; un mensaje por pantalla

Conocido por: Celine, The Row, Aesop, Bottega Veneta, editorial de Net-a-Porter

Semilla CSS
:root {
  --bg: #f6f4f0;
   --fg: #0c0c0c;
   --muted: #9a9a9a;
   --accent: #8b7355;
   --line: #e2dfd9;
   --radius: 0;
   --tracking: 0.18em;
   --font: 'Karla',sans-serif;
   --font-display: 'Cormorant Garamond',serif
}
Prompt

Construye el sitio en estilo de moda de lujo. Fondo #f6f4f0, texto #0c0c0c, apagado #9a9a9a, filetes #e2dfd9, un acento #8b7355 usado solo para una etiqueta de rebajas. Fuentes: Cormorant Garamond 300 para display a 104px en escritorio / 52px en móvil en mayúsculas con letter-spacing 0.18em y line-height 1.0; Karla 400 a 13px con tracking 0.08em en mayúsculas para nav, etiquetas, botones y pies; cuerpo 14px Karla, line-height 1.7, max-width 480px. Hero: fotografía a viewport completo o vídeo apagado con el título centrado y un único enlace de texto subrayado debajo. Retícula de producto: 3 columnas en escritorio con medianiles de 40px, imágenes 4:5, sin radio, sin borde; el hover hace un fundido cruzado a una segunda imagen durante 700ms. Botones: caja con filete 1px #0c0c0c, transparente, 12px en mayúsculas, 48px de alto, el hover rellena en negro con texto marfil durante 400ms. Secciones separadas por filetes finísimos y 160px de espacio. Movimiento: fundidos de 1s al hacer scroll, parallax del 5% en el hero, nada más.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo de moda de lujo. Fondo #f6f4f0, texto #0c0c0c, apagado #9a9a9a, filetes #e2dfd9, un acento #8b7355 usado solo para una etiqueta de rebajas. Fuentes: Cormorant Garamond 300 para display a 104px en escritorio / 52px en móvil en mayúsculas con letter-spacing 0.18em y line-height 1.0; Karla 400 a 13px con tracking 0.08em en mayúsculas para nav, etiquetas, botones y pies; cuerpo 14px Karla, line-height 1.7, max-width 480px. Hero: fotografía a viewport completo o vídeo apagado con el título centrado y un único enlace de texto subrayado debajo. Retícula de producto: 3 columnas en escritorio con medianiles de 40px, imágenes 4:5, sin radio, sin borde; el hover hace un fundido cruzado a una segunda imagen durante 700ms. Botones: caja con filete 1px #0c0c0c, transparente, 12px en mayúsculas, 48px de alto, el hover rellena en negro con texto marfil durante 400ms. Secciones separadas por filetes finísimos y 160px de espacio. Movimiento: fundidos de 1s al hacer scroll, parallax del 5% en el hero, nada más.

## Tokens
:root { --bg:#f6f4f0; --fg:#0c0c0c; --muted:#9a9a9a; --accent:#8b7355; --line:#e2dfd9; --radius:0; --tracking:0.18em; --font:'Karla',sans-serif; --font-display:'Cormorant Garamond',serif }

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