Design for AI

Estilo Guiado por fotografia: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de guiado por fotografia. Também chamado de design photo-first, site guiado por imagem, fotografia full-bleed, site de narrativa visual, lookbook. 2012 em diante (capas do Medium, Airbnb 2014, Unsplash, viagem e hotelaria).

Traços

  • fotografias grandes de ponta a ponta definem o clima; a UI recua para filetes finos e tipografia pequena
  • texto sobreposto às imagens com um scrim em gradiente, ou posicionado no espaço negativo da foto
  • gradação de cor consistente em todas as fotos (um preset) para o site parecer autoral
  • alternância entre imagens full-bleed e contidas para dar ritmo
  • grades masonry ou editoriais para galerias com legendas
  • imagens responsivas com lazy loading e placeholders desfocados; proporções travadas
  • movimento: Ken Burns lento nos heros, parallax a 5-10%, crossfades

Paleta

extraída da fotografia; a UI é #ffffff, #111111, rgba(0,0,0,0.5) scrim, #f2f2f2 superfície, um acento amostrado do tom dominante da foto

Tipografia

Manrope, DM Sans ou Instrument Sans para UI a 13-15px; uma serifa leve (Cormorant, Newsreader) ou a mesma sans a 48-88px para títulos sobrepostos; legendas 12px em atenuado

Faça

  • grade cada foto com um preset (contraste, calor, leve fade) e exporte a no máximo 1600px, webp abaixo de 200KB
  • reserve cada espaço de imagem com aspect-ratio para nada se deslocar no carregamento; use um placeholder desfocado de 20px
  • posicione o texto na área calma de cada foto e adicione um scrim inferior de 40% só quando necessário

Evite

  • não coloque chrome de UI por cima das fotos: sem cards, sem bordas, sem botões coloridos sobre imagens
  • não misture estilos de fotografia de banco de imagens; um visual ou nenhum
  • não use carrosséis no hero; uma foto forte vale mais que cinco

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

Semente 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

Construa o site guiado por fotografia. Todas as fotos compartilham uma gradação de cor (levemente quente, pretos elevados) e são servidas como webp abaixo de 200KB a 1600px, com lazy loading, placeholder desfocado e aspect-ratio fixo (3/2 para paisagem, 4/5 para retrato). Cores de UI: #ffffff, #111111, atenuado #8a8a8a, superfície #f2f2f2. Fonte Manrope: título do hero sobreposto 300 a 80px com -0.02em posicionado no espaço negativo da foto (canto inferior esquerdo, recuo de 64px) sobre um scrim inferior linear-gradient(transparent, rgba(0,0,0,0.5)); texto de UI 14px; legendas 12px em atenuado abaixo de cada imagem. Hero: foto de viewport inteira com um zoom Ken Burns de 20s (scale de 1 a 1.08). Corpo: alterne imagens full-bleed com fileiras contidas de duas colunas de imagem e texto, 120px de distância. Galeria: masonry de 3 colunas com gaps de 16px, sem raio, sem bordas, o hover escurece 10%. Os botões são texto sublinhado, branco sobre fotos, preto sobre branco. A nav é transparente sobre o hero, branca com filete após 80px de scroll. Parallax de 6% nas imagens full-bleed.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site guiado por fotografia. Todas as fotos compartilham uma gradação de cor (levemente quente, pretos elevados) e são servidas como webp abaixo de 200KB a 1600px, com lazy loading, placeholder desfocado e aspect-ratio fixo (3/2 para paisagem, 4/5 para retrato). Cores de UI: #ffffff, #111111, atenuado #8a8a8a, superfície #f2f2f2. Fonte Manrope: título do hero sobreposto 300 a 80px com -0.02em posicionado no espaço negativo da foto (canto inferior esquerdo, recuo de 64px) sobre um scrim inferior linear-gradient(transparent, rgba(0,0,0,0.5)); texto de UI 14px; legendas 12px em atenuado abaixo de cada imagem. Hero: foto de viewport inteira com um zoom Ken Burns de 20s (scale de 1 a 1.08). Corpo: alterne imagens full-bleed com fileiras contidas de duas colunas de imagem e texto, 120px de distância. Galeria: masonry de 3 colunas com gaps de 16px, sem raio, sem bordas, o hover escurece 10%. Os botões são texto sublinhado, branco sobre fotos, preto sobre branco. A nav é transparente sobre o hero, branca com filete após 80px de scroll. Parallax de 6% nas imagens full-bleed.

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

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.