Design for AIStil Liquid Glass: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für liquid glass. Auch bekannt als Apple Liquid Glass, iOS-26-Glas, refraktives UI, Linsenglas. ab 2025 (Apple WWDC 2025).
Merkmale
- Glas, das sich wie eine Linse verhält: Kanten brechen das Licht und werden heller, die Mitte bleibt klar
- Glanzlicht entlang der Oberkante, dezenter dunkler Rand unten
- Flächen sind pillen- oder kapselförmig und schweben über dem Inhalt, statt ihn zu rahmen
- Bedienelemente morphen und verschmelzen (eine Tab-Leiste wird beim Scrollen zu einer einzelnen Pille)
- der Hintergrund ist echter Inhalt (Fotos, Karten), keine dekorativen Kleckse
- sehr hoher Radius (volle Pillen), dünne Schrift, kompakte Bedienelemente
- Motion ist fließend und physikbasiert: federnd, schnell, mit leichtem Überschwingen
Palette
inhaltsgetrieben, aber das Chrome nutzt rgba(255,255,255,0.18) Füllung, rgba(255,255,255,0.6) oberes Glanzlicht, rgba(0,0,0,0.12) unterer Rand, #0a84ff Akzent, #ffffff Text auf Dunkel, #1c1c1e Text auf Hell
Schrift
System-Sans (SF Pro bei Apple; Geist als freier Ersatz); Labels 500 bei 13-15px, Titel 600 bei 22-34px; Letter-Spacing bei Titeln leicht negativ
Do
- lege Glas-Controls über reiche Bilder; der Effekt lebt von der Brechung dessen, was dahinter liegt
- baue das Glanzlicht aus zwei inset box-shadows (hell oben, dunkel unten) plus einem schwachen äußeren Glow
- nutze Spring-Easing (cubic-bezier(0.34,1.56,0.64,1)) bei 350-450ms für Morphs
Don't
- nutze es nicht für große Container; Liquid Glass ist für Controls und schwebende Leisten, nicht für Seitenabschnitte
- opfere keine Lesbarkeit für den Effekt; lege einen dunklen Scrim unter Text, wenn der Hintergrund unruhig ist
- fake es nicht mit flachem 10 % Weiß; die Kantenbehandlung ist der ganze Stil
Bekannt dafür: Apple iOS 26 / macOS Tahoe, Toolbars in Apple Music und Karten
CSS-Seed
: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
Baue die Seite im Apple-Liquid-Glass-Stil. Der Inhalt ist randlose Fotografie oder eine Karte; das gesamte Chrome schwebt darüber in kapselförmigen Flächen (border-radius 999px für Leisten, 28px für Sheets). Glasrezept: 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); dazu ein 1px äußerer Rand rgba(255,255,255,0.25). Akzent #0a84ff für den aktiven Tab und den Primärbutton. Schrift Geist: Titel 600 bei 28-34px mit -0.02em Tracking, Labels 500 bei 14px. Die untere Tab-Leiste klappt beim Scrollen zu einer einzelnen Pille zusammen, mit einem 400ms Spring (cubic-bezier(0.34,1.56,0.64,1)). Glas nur für Controls; Seitenabschnitte bleiben solide. Respektiere prefers-reduced-motion, indem du den Morph deaktivierst.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Apple-Liquid-Glass-Stil. Der Inhalt ist randlose Fotografie oder eine Karte; das gesamte Chrome schwebt darüber in kapselförmigen Flächen (border-radius 999px für Leisten, 28px für Sheets). Glasrezept: 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); dazu ein 1px äußerer Rand rgba(255,255,255,0.25). Akzent #0a84ff für den aktiven Tab und den Primärbutton. Schrift Geist: Titel 600 bei 28-34px mit -0.02em Tracking, Labels 500 bei 14px. Die untere Tab-Leiste klappt beim Scrollen zu einer einzelnen Pille zusammen, mit einem 400ms Spring (cubic-bezier(0.34,1.56,0.64,1)). Glas nur für Controls; Seitenabschnitte bleiben solide. Respektiere prefers-reduced-motion, indem du den Morph deaktivierst.
## 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 }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.