Design for AI

Estilo Liquid glass: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de liquid glass. Também chamado de Apple liquid glass, vidro do iOS 26, UI refrativa, vidro com efeito de lente. 2025 em diante (Apple WWDC 2025).

Traços

  • vidro que se comporta como lente: as bordas refratam e clareiam, o centro fica limpo
  • reflexo especular ao longo da borda superior, aro escuro sutil na inferior
  • painéis em forma de pílula ou cápsula, que flutuam sobre o conteúdo em vez de emoldurá-lo
  • controles se transformam e se fundem (uma tab bar vira uma única pílula ao rolar)
  • o fundo é conteúdo real (fotos, mapas), não manchas decorativas
  • raio muito alto (pílulas completas), tipografia fina, controles compactos
  • movimento fluido e baseado em física: elástico, rápido, com leve overshoot

Paleta

guiada pelo conteúdo, mas o chrome usa rgba(255,255,255,0.18) de preenchimento, rgba(255,255,255,0.6) reflexo superior, rgba(0,0,0,0.12) aro inferior, #0a84ff acento, #ffffff texto sobre escuro, #1c1c1e texto sobre claro

Tipografia

sans do sistema (SF Pro na Apple; use Geist como substituto gratuito); labels 500 a 13-15px, títulos 600 a 22-34px; letter-spacing levemente negativo nos títulos

Faça

  • sobreponha controles de vidro a imagens ricas; o efeito vive na refração do que está atrás
  • construa o reflexo com dois box-shadows inset (claro em cima, escuro embaixo) mais um leve brilho externo
  • use easing de mola (cubic-bezier(0.34,1.56,0.64,1)) a 350-450ms nas transformações

Evite

  • não use em containers grandes; liquid glass é para controles e barras flutuantes, não para seções da página
  • não sacrifique legibilidade pelo efeito; adicione um scrim escuro sob o texto quando o fundo for movimentado
  • não imite com um branco chapado a 10%; o tratamento das bordas é o estilo inteiro

Conhecido por: Apple iOS 26 / macOS Tahoe, barras de ferramentas do Apple Music e Maps

Semente CSS
:root {
  --bg: #101418;
   --fg: #ffffff;
   --accent: #0a84ff;
   --glass: rgba(255,255,255,0.18);
   --hi: rgba(255,255,255,0.6);
   --rim: rgba(0,0,0,0.14);
   --radius: 999px;
   --font: 'Geist',sans-serif
}
Prompt

Construa o site em estilo Apple liquid glass. O conteúdo é fotografia full-bleed ou um mapa; todo o chrome flutua sobre ele em painéis em forma de cápsula (border-radius 999px para barras, 28px para sheets). Receita do vidro: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); adicione uma borda externa de 1px rgba(255,255,255,0.25). Acento #0a84ff para a aba ativa e o botão primário. Fonte Geist: títulos 600 a 28-34px com tracking -0.02em, labels 500 a 14px. A tab bar inferior colapsa numa única pílula ao rolar com uma mola de 400ms (cubic-bezier(0.34,1.56,0.64,1)). Mantenha o vidro só nos controles; as seções da página continuam sólidas. Respeite prefers-reduced-motion desativando a transformação.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo Apple liquid glass. O conteúdo é fotografia full-bleed ou um mapa; todo o chrome flutua sobre ele em painéis em forma de cápsula (border-radius 999px para barras, 28px para sheets). Receita do vidro: background rgba(255,255,255,0.18), backdrop-filter blur(24px) saturate(180%), box-shadow inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.14), 0 10px 30px rgba(0,0,0,0.25); adicione uma borda externa de 1px rgba(255,255,255,0.25). Acento #0a84ff para a aba ativa e o botão primário. Fonte Geist: títulos 600 a 28-34px com tracking -0.02em, labels 500 a 14px. A tab bar inferior colapsa numa única pílula ao rolar com uma mola de 400ms (cubic-bezier(0.34,1.56,0.64,1)). Mantenha o vidro só nos controles; as seções da página continuam sólidas. Respeite prefers-reduced-motion desativando a transformação.

## Tokens
:root { --bg:#101418; --fg:#ffffff; --accent:#0a84ff; --glass:rgba(255,255,255,0.18); --hi:rgba(255,255,255,0.6); --rim:rgba(0,0,0,0.14); --radius:999px; --font:'Geist',sans-serif }

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

Snippets neste estilo

B 114Canto em gota