Design for AI

Stil Fotografiegeführt: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für fotografiegeführt. Auch bekannt als Photo-first-Design, bildgeführte Website, randlose Fotografie, visuelle Storytelling-Seite, Lookbook. ab 2012 (Medium-Cover, Airbnb 2014, Unsplash, Reise und Hotellerie).

Merkmale

  • große randlose Fotografien setzen die Stimmung; UI zieht sich auf Haarlinien und kleine Schrift zurück
  • Text über Bildern mit Verlaufs-Scrim oder im Negativraum des Fotos platziert
  • konsistente Farbabstimmung über alle Fotos (ein Preset), damit die Seite aus einem Guss wirkt
  • abwechselnd randlose und eingefasste Bilder für Rhythmus
  • Masonry- oder Editorial-Raster für Galerien mit Bildunterschriften
  • lazy geladene, responsive Bilder mit unscharfen Platzhaltern; Seitenverhältnisse fixiert
  • Motion: langsamer Ken Burns auf Heros, Parallax bei 5-10 %, Überblendungen

Palette

aus der Fotografie entnommen; UI ist #ffffff, #111111, rgba(0,0,0,0.5) Scrim, #f2f2f2 Fläche, ein Akzent aus dem dominanten Fototon

Schrift

Manrope, DM Sans oder Instrument Sans für UI bei 13-15px; eine leichte Serif (Cormorant, Newsreader) oder dieselbe Sans bei 48-88px für überlagerte Titel; Bildunterschriften 12px gedämpft

Do

  • stimme jedes Foto mit einem Preset ab (Kontrast, Wärme, leichter Fade) und exportiere bei maximal 1600px, webp unter 200KB
  • reserviere jeden Bildplatz mit aspect-ratio, damit beim Laden nichts springt; nutze einen 20px unscharfen Platzhalter
  • platziere Text im ruhigen Bereich jedes Fotos und ergänze einen 40 % Scrim unten nur bei Bedarf

Don't

  • setze kein UI-Chrome auf Fotos: keine Karten, keine Ränder, keine farbigen Buttons über Bildern
  • misch keine Stockfoto-Stile; ein Look oder keiner
  • nutze keine Hero-Karussells; ein starkes Foto schlägt fünf

Bekannt dafür: Airbnb, National Geographic, Unsplash, Kinfolk, Aman-Resorts

CSS-Seed
: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

Baue die Seite fotografiegeführt. Alle Fotos teilen eine Farbabstimmung (leicht warm, angehobene Schwarztöne) und werden als webp unter 200KB bei 1600px ausgeliefert, lazy geladen mit unscharfem Platzhalter und festem aspect-ratio (3/2 für Querformat, 4/5 für Hochformat). UI-Farben: #ffffff, #111111, gedämpft #8a8a8a, Fläche #f2f2f2. Schrift Manrope: überlagerter Hero-Titel 300 bei 80px mit -0.02em im Negativraum des Fotos (unten links, 64px eingerückt) über einem unteren Scrim linear-gradient(transparent, rgba(0,0,0,0.5)); UI-Text 14px; Bildunterschriften 12px gedämpft unter jedem Bild. Hero: Foto in voller Viewport-Größe mit einem 20s Ken-Burns-Zoom (scale 1 bis 1.08). Body: abwechselnd randlose Bilder und eingefasste zweispaltige Bild-und-Text-Reihen, 120px auseinander. Galerie: 3-spaltiges Masonry mit 16px Lücken, kein Radius, keine Ränder, Hover dunkelt 10 % ab. Buttons sind unterstrichener Text, weiß auf Fotos, schwarz auf Weiß. Die Nav ist transparent über dem Hero, weiß mit Haarlinie nach 80px Scroll. Parallax 6 % auf randlosen Bildern.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite fotografiegeführt. Alle Fotos teilen eine Farbabstimmung (leicht warm, angehobene Schwarztöne) und werden als webp unter 200KB bei 1600px ausgeliefert, lazy geladen mit unscharfem Platzhalter und festem aspect-ratio (3/2 für Querformat, 4/5 für Hochformat). UI-Farben: #ffffff, #111111, gedämpft #8a8a8a, Fläche #f2f2f2. Schrift Manrope: überlagerter Hero-Titel 300 bei 80px mit -0.02em im Negativraum des Fotos (unten links, 64px eingerückt) über einem unteren Scrim linear-gradient(transparent, rgba(0,0,0,0.5)); UI-Text 14px; Bildunterschriften 12px gedämpft unter jedem Bild. Hero: Foto in voller Viewport-Größe mit einem 20s Ken-Burns-Zoom (scale 1 bis 1.08). Body: abwechselnd randlose Bilder und eingefasste zweispaltige Bild-und-Text-Reihen, 120px auseinander. Galerie: 3-spaltiges Masonry mit 16px Lücken, kein Radius, keine Ränder, Hover dunkelt 10 % ab. Buttons sind unterstrichener Text, weiß auf Fotos, schwarz auf Weiß. Die Nav ist transparent über dem Hero, weiß mit Haarlinie nach 80px Scroll. Parallax 6 % auf randlosen Bildern.

## 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 }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.