Design for AI

Estilo Guiado por la fotografía: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para guiado por la fotografía. También llamado diseño foto primero, web guiada por imágenes, fotografía a sangre, sitio de narrativa visual, lookbook. 2012 en adelante (portadas de Medium, Airbnb 2014, Unsplash, viajes y hostelería).

Rasgos

  • fotografías grandes de borde a borde marcan el ambiente; la UI se retira a filetes finísimos y tipo pequeño
  • texto superpuesto a las imágenes con un velo en gradiente, o colocado en el espacio negativo de la foto
  • etalonaje coherente en todas las fotos (un solo preset) para que el sitio se sienta con autoría
  • imágenes a sangre y contenidas alternándose para marcar el ritmo
  • retículas masonry o editoriales para galerías con pies
  • imágenes responsive con carga diferida y placeholders desenfocados; proporciones fijadas
  • movimiento: Ken Burns lento en los heros, parallax al 5-10%, fundidos cruzados

Paleta

tomada de la fotografía; la UI es #ffffff, #111111, velo rgba(0,0,0,0.5), superficie #f2f2f2, un acento muestreado del tono dominante de la foto

Tipografía

Manrope, DM Sans o Instrument Sans para la UI a 13-15px; una serif fina (Cormorant, Newsreader) o la misma sans a 48-88px para los títulos superpuestos; pies 12px en apagado

Haz

  • etalona cada foto con un solo preset (contraste, calidez, ligero desvanecido) y exporta a 1600px como máximo, webp por debajo de 200KB
  • reserva cada hueco de imagen con aspect-ratio para que nada se desplace al cargar; usa un placeholder desenfocado de 20px
  • coloca el texto en la zona tranquila de cada foto y añade un velo inferior al 40% solo cuando haga falta

Evita

  • no pongas chrome de UI encima de las fotos: sin tarjetas, sin bordes, sin botones de color sobre las imágenes
  • no mezcles estilos de fotografía de stock; un solo look o ninguno
  • no uses carruseles en el hero; una foto fuerte vale más que cinco

Conocido por: Airbnb, National Geographic, Unsplash, Kinfolk, resorts Aman

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #111111;
   --muted: #8a8a8a;
   --scrim: linear-gradient(transparent,rgba(0,0,0,0.5));
   --surface: #f2f2f2;
   --radius: 0;
   --ratio: 3/2;
   --font: 'Manrope',sans-serif
}
Prompt

Construye el sitio guiado por la fotografía. Todas las fotos comparten un solo etalonaje (ligeramente cálido, negros levantados) y se sirven como webp por debajo de 200KB a 1600px, con carga diferida, un placeholder desenfocado y un aspect-ratio fijo (3/2 para horizontal, 4/5 para vertical). Colores de UI: #ffffff, #111111, apagado #8a8a8a, superficie #f2f2f2. Fuente Manrope: título del hero superpuesto 300 a 80px con -0.02em colocado en el espacio negativo de la foto (abajo a la izquierda, 64px de margen interior) sobre un velo inferior linear-gradient(transparent, rgba(0,0,0,0.5)); texto de UI 14px; pies 12px en apagado bajo cada imagen. Hero: foto a viewport completo con un zoom Ken Burns de 20s (scale de 1 a 1.08). Cuerpo: alterna imágenes a sangre con filas contenidas de imagen y texto a dos columnas, separadas 120px. Galería: masonry de 3 columnas con huecos de 16px, sin radio, sin bordes, el hover oscurece un 10%. Los botones son texto subrayado, blanco sobre fotos, negro sobre blanco. La nav es transparente sobre el hero, blanca con un filete finísimo tras 80px de scroll. Parallax del 6% en las imágenes a sangre.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio guiado por la fotografía. Todas las fotos comparten un solo etalonaje (ligeramente cálido, negros levantados) y se sirven como webp por debajo de 200KB a 1600px, con carga diferida, un placeholder desenfocado y un aspect-ratio fijo (3/2 para horizontal, 4/5 para vertical). Colores de UI: #ffffff, #111111, apagado #8a8a8a, superficie #f2f2f2. Fuente Manrope: título del hero superpuesto 300 a 80px con -0.02em colocado en el espacio negativo de la foto (abajo a la izquierda, 64px de margen interior) sobre un velo inferior linear-gradient(transparent, rgba(0,0,0,0.5)); texto de UI 14px; pies 12px en apagado bajo cada imagen. Hero: foto a viewport completo con un zoom Ken Burns de 20s (scale de 1 a 1.08). Cuerpo: alterna imágenes a sangre con filas contenidas de imagen y texto a dos columnas, separadas 120px. Galería: masonry de 3 columnas con huecos de 16px, sin radio, sin bordes, el hover oscurece un 10%. Los botones son texto subrayado, blanco sobre fotos, negro sobre blanco. La nav es transparente sobre el hero, blanca con un filete finísimo tras 80px de scroll. Parallax del 6% en las imágenes a sangre.

## Tokens
:root { --bg:#ffffff; --fg:#111111; --muted:#8a8a8a; --scrim:linear-gradient(transparent,rgba(0,0,0,0.5)); --surface:#f2f2f2; --radius:0; --ratio:3/2; --font:'Manrope',sans-serif }

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