Website

Kaifeng-Nachttour-Webdesign

Folgen Sie in fünf Kapiteln von Bianjing After Dark einem von Laternen beleuchteten Fluss – vom Stadttor und Nachtmarkt bis zur Lyrik und zum Laternensteigen.

OpenDesignDesign und Produktion
Offiziell
Immersives kulturelles Storytelling5 Abschnitte
Kaifeng-Nachttour-Webdesign: von Laternen beleuchteter Fluss und Einführung in die Nachttour
Kaifeng-1 · Aufgezeichnete SzenenfolgeScreenshot 1 von 5

LLM Arena Sep 2026

Fallnotizen
Modell
Claude Opus 5.5
Design-Aufgabe
Eine interaktive, von Laternen beleuchtete Reise durch ein imaginiertes Bianjing der Song-Zeit gestalten.
Ausgabe
Website

Konzipiert für

  • Kulturelles StorytellingSzenen, Texte und kleine Aktionen rund um einen Ort miteinander verbinden.
  • Digitale AusstellungenBesucher ohne Buchungstrichter durch eine thematische Abfolge führen.
  • Interaktive LyrikEine ausgewählte Zeile zum Bestandteil einer späteren Szene werden lassen.

Wichtigste Merkmale

  • Fünf Kapitel entlang eines FlussesEine durchgängige Stadtszene verbindet Tor, Brücke, Markt und Abschluss.
  • Eine Zeile, die weitergetragen wirdDie Gedichtauswahl erscheint erneut als persönliche Laternennotiz.
  • Ein TempowechselVor der abschließenden Aktion weichen die Markteffekte einer ruhigeren Lektüre.

Ein in fünf Kapiteln erzähltes Kaifeng-Nachttour-Webdesign

Bianjing After Dark inszeniert eine imaginierte Stadt als nächtliche Handrolle. Die Eröffnung kombiniert übergroße chinesische Schriftzeichen auf der linken Seite mit einem von Laternen beleuchteten Fluss, Holzbauten und Reflexionen. Goldene Akzente und erleuchtete Fenster heben sich von der dunkelblauen Szenerie ab. Die zentrale Einladung besteht darin, in die Abfolge einzutreten, nicht darin, nach einem Reiseziel zu suchen oder eine Tour zu buchen.

Dieselbe Welt aus Fluss und Stadt setzt sich hinter den späteren Kapiteln fort. Beim Scrollen verändern sich Kameraposition und Vordergrundtext gemeinsam, während die obere Navigation und die nummerierte Kapitelleiste verfügbar bleiben. Dadurch entsteht Kontinuität zwischen Tor, Brücke, Markt, Lyrik und der abschließenden Laternenszene, ohne dass für jede Station eine eigene Seite erforderlich ist.

Die vollständige Eröffnungsszene kombiniert den chinesischen Schautitel mit dem Fluss, den Lichtern der Stadt und der Navigation durch fünf Kapitel.
Die vollständige Eröffnungsszene kombiniert den chinesischen Schautitel mit dem Fluss, den Lichtern der Stadt und der Navigation durch fünf Kapitel.

Typografie als Teil der Szene

Große chinesische Titel sind in kompakten vertikalen Gruppen angeordnet, sodass der breitere Teil des Bildschirms für den Fluss und die Gebäude frei bleibt. Ein kleinerer englischer Markenschriftzug befindet sich unter dem Eröffnungstitel. Die unterschiedlichen Größen schaffen eine Lesereihenfolge, ohne jeder Sprache im selben Raum das gleiche visuelle Gewicht geben zu wollen.

Zwei Möglichkeiten zur Orientierung

Die obere Navigation benennt die Aktivitäten, während die Leiste auf der rechten Seite die fünf Kapitel nummeriert. Die Bezeichnungen erklären, was eine Station enthält; die Zahlen zeigen ihre Position in der Abfolge. Diese wiederholte Orientierungshilfe ist nützlich, da der visuelle Hintergrund durchgängig ist und Kapitelgrenzen andernfalls schwer erkennbar sein können.

Licht als wiederkehrendes visuelles Motiv

Fensterraster, hängende Laternen und Reflexionen lassen in der gesamten Szene immer wieder warme Lichtpunkte erscheinen. Für die abschließende Aktion des Laternensteigens wird dasselbe Objekt verwendet, das von Beginn an sichtbar war. Dadurch wirkt sie wie der Abschluss der etablierten visuellen Erzählung und nicht wie ein am Ende hinzugefügter, zusammenhangloser Effekt.

Eine Gedichtauswahl in die Laternenszene übertragen

Das Lyrikkapitel verändert die Art der Beteiligung. Statt ein weiteres Marktspektakel auszulösen, wählt der Besucher ein Gedicht und anschließend eine Zeile aus. Die ausgewählte Zeile wird in einem separaten Notizbereich wiederholt und in die Abschlussszene übernommen. Dieser kleine Zustandswert verbindet zwei Kapitel: Das Lesen hat später auf der Tour eine sichtbare Konsequenz.

Die Quelle platziert eine Urheberangabe und einen Kontexthinweis neben dem Gedicht, nicht nur auf einer Seite mit Quellenangaben. Sie erklärt, dass der Vers aus der Südlichen Song-Dynastie wegen seiner Bildsprache einer Laternennacht übernommen wurde und nicht als historische Aufzeichnung Bianjings präsentiert wird. Diese Unterscheidung ermöglicht es dem Erlebnis, ausdrucksstarke Literatur zu nutzen, ohne eine künstlerische Assoziation als dokumentarischen Beleg auszugeben.

Die vollständige Lyrikszene platziert auswählbare Verse und deren Kontext neben der Darstellung der Flussstadt.
Die vollständige Lyrikszene platziert auswählbare Verse und deren Kontext neben der Darstellung der Flussstadt.
  1. Eine überschaubare Lektüreauswahl anbieten

    Zwei Gedichtregisterkarten halten die Auswahl klein genug, um sie auf einen Blick zu erfassen. Jedes Gedicht hat eine eigene Urheberangabe und einen eigenen Kontext. Der Besucher muss weder ein Archiv durchsuchen noch eine separate Leseseite öffnen, um eine für dieses kurze Erlebnis relevante Auswahl zu treffen.

  2. Die gewählte Zeile vor dem Fortfahren wiederholen

    Der Notizbereich gibt die ausgewählte Zeile unterhalb des Gedichts erneut wieder. Dies ist eine hilfreiche Bestätigung, da die anklickbaren Zeilen selbst weiterhin von anderen Versen umgeben sind. Die Aktion zum Fortfahren kann dann zu dem Laternenkapitel führen, wobei bereits ein bestimmter Textabschnitt ausgewählt ist.

  3. Dem Abschluss zwei zusammengehörige Aktionen geben

    Das letzte Kapitel bietet neben der übernommenen Notiz eine Himmelslaterne und eine Flusslaterne. Beide passen in die etablierte Welt, während ihre unterschiedlichen Bewegungsrichtungen sie zu klar voneinander abgegrenzten Optionen machen. Die Wiederholungsaktion ist separat, damit eine erneute Reise durch die Stadt nicht mit dem Steigenlassen einer weiteren Laterne verwechselt wird.

Das Tempo von Nachtmarkt, Lyrik und Abschlussszene gestalten

Das Marktkapitel ist die aktivste Station. Es bietet Effekte mit Eisenblumen und Feuerwerk, ein Bedienelement für Straßenrufe sowie kurze Geschichten über Tee, Seide und ein Boot. Dabei handelt es sich nicht ausschließlich um gleichartige Interaktionen: Einige verändern die Atmosphäre, andere den Text. Ihre Bündelung im Markt gibt dieser Vielfalt einen klar erkennbaren Schauplatz.

Die Marktszene vereint atmosphärische Bedienelemente und kleine Alltagsgeschichten in einer vollständigen Kapitelansicht.
Die Marktszene vereint atmosphärische Bedienelemente und kleine Alltagsgeschichten in einer vollständigen Kapitelansicht.
Wie die Kapitelabfolge die Rolle des Besuchers verändert
KapitelZentrale EinladungRolle in der Abfolge
Tor und BrückeDie Stadt betreten und eine Gedichtzeile entdeckenDen Ort etablieren und die spätere Leseinteraktion einführen.
NachtmarktEin Spektakel oder eine Alltagsgeschichte auswählenDie Aktivität steigern und zugleich jede Aktion mit der Straßenszenerie verknüpfen.
LyrikEine Zeile lesen, auswählen und weitertragenDas Tempo verlangsamen und eine kleine, über mehrere Kapitel erhaltene Auswahl schaffen.
LaternensteigenDie ausgewählte Notiz in die Szene entsendenDie frühere Auswahl durch eine sichtbare Abschlussaktion auflösen.

Eine künstlerische Nachttour, keine historische Rekonstruktion

Dies ist ein fiktives digitales Erlebnis, das von der Bildwelt einer Flussstadt, von Lyrik und zeitgenössischer Imagination inspiriert ist. Seine Stadtszenen sind keine präzise Rekonstruktion, und die Quelle kennzeichnet ihre Illustrationen als KI-generiert. Die Vorschau bewahrt die bereitgestellten lokalen Interaktionen; sie fügt weder einen Ticketverkauf noch eine reale Reiseroute oder eine verifizierte historische Karte hinzu. Die Galerie ist eine geordnete Reihe gerenderter Scroll-Szenen und kein gewöhnlicher Screenshot des vollständigen Dokuments.

So erstellen Sie in OpenDesign ein Kaifeng-Nachttour-Webdesign

  1. OpenDesign herunterladen und installieren

    Desktop-App herunterladen, installieren und Einrichtung abschließen. Ein Projekt für das Design anlegen.

    OpenDesign herunterladen
  2. Die Reise vor dem Hinzufügen von Effekten definieren

    Beginnen Sie mit fünf Kapitelzwecken und einem Objekt, das sie miteinander verbindet. Hier erscheinen Laternen in der gesamten Szenerie, während eine ausgewählte Gedichtzeile dem Ende eine konkrete Bedeutung verleiht. Halten Sie diese Beziehungen bereits in der ersten Anfrage ausdrücklich fest.

    Vorgeschlagener Prompt

    Erstelle ein Kaifeng-Nachttour-Webdesign für ein fiktives Erlebnis namens Bianjing After Dark. Verwende eine zusammenhängende, von Laternen beleuchtete Flussstadt mit dunkelblauem Wasser, warm getönten Holzbauten und großen chinesischen Schautiteln. Gliedere die Scroll-Erzählung in fünf Kapitel: Stadttor, Brücke, Nachtmarkt, Lyrik und Laternensteigen. Behalte oben eine benannte Navigation und an der Seite eine nummerierte Kapitelleiste bei. Der Markt soll einige lokale visuelle Effekte sowie kurze Geschichten über Tee, Seide und Boote bieten. Im Lyrikkapitel soll ein Besucher eine mit Urheberangabe versehene Zeile auswählen können, die in der abschließenden Laternennotiz erneut erscheint. Füge getrennte Aktionen für Himmelslaternen und Flusslaternen sowie eine Wiederholung hinzu. Kennzeichne das Werk eindeutig als künstlerische Imagination und nicht als historische Rekonstruktion oder echten Tourenanbieter. Erhalte bei reduzierter Bewegung einen gut lesbaren Weg durch die Texte.

  3. Der ausgewählten Zeile über mehrere Kapitel hinweg folgen

    Wählen Sie eine andere Gedichtzeile, wechseln Sie zum Ende und prüfen Sie, ob dort derselbe Text erscheint. Ändern Sie das Gedicht und wiederholen Sie die Prüfung. So wird die erzählerische Verbindung direkt getestet, statt jedes Kapitel als unabhängigen visuellen Effekt zu behandeln.

  4. Den Text für jede Kameraposition prüfen

    Prüfen Sie die Brücken-, Markt- und Lyrikszenen, während deren vollständige Texte und Bedienelemente sichtbar sind. Während sich die Kamera bewegt, können helle Fenster und Reflexionen hinter unterschiedlichen Zeilen liegen. Verfeinern Sie den Texthintergrund oder die Rahmung, ohne die gesamte Szene durch eine dunkle Überlagerung zu verflachen.

  5. Exportieren und Share-Link erhalten

    Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows