Liquid Websites – KI-generierte Webseiten in Echtzeit

Liquid Websites sind Webseiten, die sich nicht nur im Layout an den Bildschirm anpassen, sondern ihre gesamte Struktur, Funktionalität und Inhalte in Echtzeit verändern. Statt starrer Templates generiert eine KI das Interface individuell für jeden Nutzer: basierend auf Gerät, Kontext und Verhalten. Das Konzept geht weit über Responsive Design hinaus und könnte das klassische Webdesign grundlegend ablösen. Google, Vercel und Liquid AI treiben die Entwicklung voran.

Was sind Liquid Websites?

Der Begriff Liquid Website beschreibt eine Webseite, die sich wie ein dynamischer Organismus verhält. Klassisches Responsive Design skaliert ein bestehendes Layout auf verschiedene Bildschirmgrößen. Liquid Websites gehen einen entscheidenden Schritt weiter: Sie verändern nicht nur, wie etwas aussieht, sondern wie es funktioniert. Eine Liquid Website passt Workflows, Interaktionen und den gesamten Funktionsumfang in Echtzeit an. Das Ergebnis ist eine Oberfläche, die für jeden Nutzer individuell generiert wird. In der Fachliteratur wird dieses Konzept auch als Generative User Interface (GenUI) oder Liquid UI bezeichnet. Ein Beispiel: Wenn ein Kind eine wissenschaftliche Webseite besucht, generiert das System ein spielerisches Interface mit großen Schaltflächen und einfacher Sprache. Ruft ein Experte dieselbe Seite auf, wechselt die Darstellung zu einer datendichten Ansicht mit Diagrammen und Rohdaten. Die URL bleibt identisch, das Erlebnis ist grundverschieden.

Responsive, Adaptive und Liquid: Wo liegt der Unterschied?

Die Evolution des Webdesigns lässt sich in drei Stufen unterteilen: Responsive Design nutzt ein einziges, fließendes Layout mit CSS Media Queries. Inhalte werden proportional an jede Bildschirmgröße angepasst. Texte, Buttons und Bilder bleiben gleich, sie werden lediglich neu angeordnet. Responsive Design verändert das Aussehen, nicht die Funktion. Adaptive Design arbeitet mit vordefinierten Layouts für bestimmte Gerätekategorien. Der Server erkennt das Endgerät und liefert ein passendes, statisches Layout aus. Die Anpassung erfolgt in diskreten Stufen statt fließend. Liquid Websites verändern nicht nur das Layout, sondern die gesamte Funktionalität. Workflows, Interaktionsmuster und der Funktionsumfang passen sich in Echtzeit an Gerät, Nutzerrolle und Kontext an. Auf dem Desktop erscheint ein komplexes Dashboard, auf dem Smartphone wird derselbe Prozess zu einer Wischgeste oder einem Sprachbefehl.

Wie funktionieren Liquid Websites technisch?

Das technische Fundament von Liquid Websites besteht aus mehreren Schichten, die zusammenspielen.

Echtzeit-Code-Generierung durch LLMs

Im Kern steht ein Large Language Model, das den Code der Webseite dynamisch generiert. Das System erfasst Nutzerdaten wie Klickmuster, Verweildauer oder Gerätetyp und sendet diese an ein LLM. Dieses schreibt daraufhin den CSS- und HTML-Code der Seite in Echtzeit um. Die Oberfläche entsteht nicht mehr im Voraus, sondern im Moment der Nutzung.

CSS Grid und Flexbox als Fundament

Moderne Webstandards wie CSS Flexbox und CSS Grid bilden die technische Basis. Sie bieten die nötige zweidimensionale Flexibilität, um Layouts ohne starre Breakpoints komplett neu zu berechnen und fließend anzuordnen. Ohne diese Standards wäre die dynamische Neustrukturierung in Echtzeit nicht realisierbar.

Edge-Computing und lokale KI-Modelle

Ein zentraler technologischer Ansatz ist die Ausführung von KI-Modellen direkt im Browser. Das Unternehmen Liquid AI entwickelt sogenannte Linear Input-Varying (LIV) Architekturen. Deren LFM2-Modell läuft über WebGPU lokal auf dem Endgerät. Die Interface-Anpassung erfolgt ohne Cloud-Verzögerung, bei geringer Latenz und hohem Datenschutz: Sensible Daten verlassen das Gerät nicht.

Modulare Komponentenbibliotheken

Die KI baut Seiten aus modularen Komponentenbibliotheken zusammen. Plattformen wie Vercel v0 nutzen beispielsweise shadcn/ui als Baukasten. Die KI wählt und kombiniert Komponenten absichtsorientiert, um die kognitive Last für den Nutzer zu minimieren.

Welche Unternehmen treiben Liquid Websites voran?

Mehrere große Technologieunternehmen und Startups arbeiten an der Umsetzung von Liquid Websites: Google demonstriert das Konzept mit Gemini 3 und der Funktion "Dynamic View". Statt nur Text als Antwort zu liefern, programmiert die KI maßgeschneiderte, interaktive und visuelle Erlebnisse in Echtzeit. Auch Google Stitch experimentiert in diese Richtung. Vercel bietet mit v0 einen KI-UI-Generator an, der durch Prompts direkt produktionsreifen React-Code erzeugt. Die Plattform nutzt shadcn/ui als Komponentenbibliothek und macht generative Interfaces für Entwickler zugänglich. Liquid AI entwickelt die LFM2-Modelle als ressourcenschonende Vision-Language-Modelle, die direkt im Browser laufen. Der Fokus liegt auf Edge-Computing ohne Cloud-Abhängigkeit. Thesys stellt APIs wie "C1" bereit, mit denen Entwickler Generative UI mit minimalem Code-Aufwand in eigene Anwendungen integrieren können. Daneben nutzen Website-Builder wie Framer AI, Lovable, Bolt.new, NxCode und Hostinger generative KI, um Webseiten auf Knopfdruck zu erstellen. Tools wie Durable generieren eine komplette Website in 30 Sekunden, Hostinger benötigt etwa 45 Sekunden.

Konkrete Anwendungsbeispiele

Liquid Websites finden bereits in verschiedenen Branchen praktische Anwendung.

Enterprise-Software: SAP Liquid UI

SAP Liquid UI zeigt eindrucksvoll, wie das Konzept in Unternehmenssoftware funktioniert. Eine Bestellfreigabe sieht auf jedem Gerät fundamental anders aus: Auf dem Desktop erscheint ein umfangreiches Multi-Panel-Layout mit Budget-Analysen und Lieferantenhistorie. Auf dem Tablet wird daraus eine Wisch-Ansicht mit Informationspanels. Auf dem Smartphone schrumpft der Workflow zu einem simplen "Approve/Reject"-Interface. Auf der Smartwatch bleibt nur eine Benachrichtigung mit Sprachfreigabe. Die Ergebnisse sind messbar: Das Unternehmen Diageo spart durch SAP Liquid UI 90.000 US-Dollar pro Mitarbeiter und Jahr. Die KITZ Corporation reduzierte die Dauer einer typischen SAP-Transaktion von fünf bis sieben Minuten auf etwa drei Minuten.

E-Commerce: Dynamische Produkterlebnisse

E-Commerce-Plattformen wie Amazon und Shopify passen Produktempfehlungen bereits dynamisch in Echtzeit an. Shopify optimiert Call-to-Action-Buttons gerätespezifisch: Auf dem Desktop stehen sie rechts neben dem Formular, auf mobilen Geräten werden sie mittig unterhalb des Inhalts platziert. Kontextabhängige Anpassungen dieser Art können die Konversionsraten um bis zu 85 Prozent steigern.

Personalisierte Dashboards

In Salesforce sieht ein Vertriebsmitarbeiter Leads und Quick-Buttons für Anrufe. Ein Manager sieht auf derselben Plattform Diagramme und Filter zur Teamleistung. Rollenbasierte, adaptive Dashboards verbessern die Entscheidungsgeschwindigkeit um 40 Prozent und steigern die Nutzerzufriedenheit um 45 Prozent.

Smart Home und Automotive

Im Automobilbereich projizieren AR-Head-up-Displays Navigationshinweise oder Fußgänger bei Nebel direkt auf die Windschutzscheibe. Smart-Home-Systeme wie Google Nest wechseln die App-Oberfläche kontextabhängig: Beim Verlassen des Hauses erscheinen Sicherheitskameras, bei der Rückkehr die Licht- und Temperatursteuerung.

Was bedeuten Liquid Websites für SEO?

Die dynamische Natur von Liquid Websites bringt neue Herausforderungen für die Suchmaschinenoptimierung mit sich. Auf der positiven Seite: KI-gestützte Optimierung kann die Core Web Vitals verbessern. Nach acht Monaten Integration von KI in Design-Workflows verzeichneten Entwickler eine durchschnittliche Verbesserung der Core Web Vitals um 28 Prozent. KI-Analysetools können Traffic-Muster vorhersagen und Conversions optimieren. Die Risiken sind allerdings erheblich. Ständige asynchrone Neuberechnungen des Layouts durch JavaScript und KI können die Rendering-Pipeline des Browsers blockieren. Dieses sogenannte "Layout Thrashing" verlangsamt die Seite und wirkt sich negativ auf SEO-Metriken aus. Zudem muss KI-generierter Code semantisch korrekt sein, um Suchmaschinen-Standards zu erfüllen. Automatisierte Generatoren erfordern häufig noch manuelle Nachbesserungen. Viele KI-Builder integrieren bereits automatisierte SEO-Assistenten. Für produktive Einsätze ist eine sorgfältige Prüfung des generierten Codes aber weiterhin unverzichtbar.

Vorteile von Liquid Websites

- Maximale Personalisierung: Jeder Nutzer erhält eine maßgeschneiderte Oberfläche. Aufgaben werden bis zu 30 Prozent schneller abgeschlossen. - Bessere Barrierefreiheit: Die KI passt Kontraste, Schriftgrößen und Layouts automatisch an die Bedürfnisse und Fähigkeiten des Nutzers an. - Höhere Konversionsraten: Absichtsorientierte Darstellung relevanter Informationen steigert Engagement und Zufriedenheit. - Datenschutz bei Edge-Ausführung: Wenn KI-Modelle lokal im Browser laufen, verlassen sensible Daten das Endgerät nicht. - Effizienz in der Entwicklung: KI beschleunigt das Wireframing um 65 Prozent, reduziert den Copywriting-Aufwand um 55 Prozent und verkürzt die Entwicklungszeit um 45 Prozent.

Risiken und Herausforderungen

- Performance-Probleme: Layout Thrashing durch ständige asynchrone KI-Berechnungen kann die Rendering-Pipeline blockieren und die Seite verlangsamen. - Fehlerhafter Code: KI-generierter Code kann Barrierefreiheitsstandards (WCAG) verletzen oder semantische Mängel aufweisen, wenn keine Validierungsschichten integriert sind. - Sicherheitsrisiken: Sogenanntes Vibe Coding durch Nicht-Programmierer birgt Gefahren: versehentlich veröffentlichte API-Keys, Datenexponierung oder Anfälligkeit für Prompt-Injection-Angriffe. - Qualitätskontrolle: Trotz aller Automatisierung bleibt die menschliche Überprüfung für Marken-Nuancen und Fehlerkorrektur essenziell.

Wie verändert sich die Rolle von Webdesignern?

Liquid Websites verschieben das Berufsbild des Webdesigners fundamental. Die klassische Arbeit an einzelnen Layouts weicht der Gestaltung von Systemen und Regelwerken. Designer werden zu System-Architekten und Kuratoren von KI-Outputs. Neue Kompetenzfelder entstehen: Prompt Engineering für präzise KI-Anweisungen, Informationsdesign für Maschinen zur Strukturierung von Metadaten und algorithmische Ethik zur Vermeidung von Verzerrungen. Gleichzeitig übernimmt die KI den Code-Teil. Tools wie GitHub Copilot ermöglichen es, komplexe CSS-Animationen in Minuten statt Stunden zu erstellen. Die zentrale Erkenntnis: KI ersetzt die Expertise nicht, sie verstärkt sie. Agenturen, die KI integrieren, bewältigen eine um 35 Prozent höhere Projektkapazität bei 25 Prozent besseren Gewinnmargen. Die Kundenbindungsrate steigt um 18 Prozent.

Ausblick: Was kommt nach Liquid Websites?

Bis 2030 könnte die Einführung von 6G-Netzwerken die nächste Evolutionsstufe einleiten. 6G wird semantische Steuerungsschichten einführen, die eine KI-gestützte Echtzeit-Steuerung ermöglichen. Webseiten könnten dann nicht nur ihr Interface an den Nutzer anpassen, sondern ihre Rechenlast dynamisch zwischen Edge-Server und Endgerät verschieben: abhängig von Latenz, Bandbreite oder Batteriestand. Die Trennung zwischen Website-Buildern und App-Buildern wird zunehmend verschwimmen. Full-Stack-Fähigkeiten inklusive Datenbanken und Backend-Logik werden bei KI-Buildern zum Standard. Die statische Webseite, wie sie seit den 1990er-Jahren existiert, steht vor ihrer grundlegendsten Transformation.

Fazit

Liquid Websites markieren einen Paradigmenwechsel im Webdesign. Die Kombination aus LLMs, Edge-Computing und modularen Komponentenbibliotheken ermöglicht Webseiten, die sich nicht mehr nur anpassen, sondern für jeden Nutzer neu entstehen. Unternehmen wie Google, Vercel und Liquid AI zeigen bereits heute, wohin die Reise geht. Die Herausforderungen in SEO, Performance und Sicherheit sind real, aber lösbar. Für Webdesigner bedeutet das: Wer Systeme statt Seiten denkt und KI als Verstärker nutzt, wird in dieser neuen Ära nicht ersetzt, sondern unverzichtbar. Welche Rolle das klassische CMS in dieser neuen Welt spielt, beleuchtet der Beitrag zu WordPress 7 und Agentic Publishing.