Nr. 10 · Interaktives Erklärstück
Ins kalte Wasser
Ein interaktiver Tauchgang von der Meeresoberfläche bis zum Grund des Marianengrabens, 10.935 Meter tief, von einer KI nachgebaut aus einem Prompt, den eine öffentliche Galerie publiziert hat: fünf Meereszonen, 17 Tiere ungefähr in der Tiefe, in der sie leben, ein Tiefenmesser und eine Taschenlampe für die Dunkelheit. Tauch ab, kopier den Prompt und schau, was es braucht, um ein Thema so zu vermitteln.
So spielst du
- Scrollen
- Sink durch die fünf Zonen des Ozeans. Der Tiefenmesser zählt die Meter, den Druck und das Licht.
- Auf ein Tier klicken oder tippen
- Lies, was es ist und wie es in dieser Tiefe lebt.
- Mauszeiger bewegen
- Unterhalb von etwa 200 Metern wird er zur Taschenlampe. Auf dem Handy tippst du, um zu leuchten.
- Tab und Enter
- Jedes Tier ist ein Button. Escape schliesst die Karte.
- Wenig Zeit
- Der Link direkt unter der Wasserlinie überspringt den Tauchgang.
- Ganz unten
- Schau dich ein bisschen um, bevor du wieder auftauchst.
0m
An der Oberfläche
- Druck
- 1 atm
- Wasser
- Hier rund 28 °C
- Licht
- Volles Tageslicht
Tief Luft holen.
10.935 Meter bis zum Grund des Marianengrabens.
Scrolle, um abzutauchen
Tauchgang überspringen0–200 m
Die Sonnenlichtzone
Genug Licht für Photosynthese. Hier wachsen winzige treibende Algen, das Phytoplankton, und sie liefern rund die Hälfte des Sauerstoffs der Erde. Fast alle Nahrung im Meer entsteht in dieser dünnen obersten Schicht.
200–1000 m
Die Dämmerungszone
Ein wenig blaues Licht kommt noch durch, aber zu wenig, als dass Algen wachsen könnten. Viele Tiere hier haben riesige Augen und Lichter am Bauch.
1000–4000 m
Die Mitternachtszone
Bis hierher dringt kein Sonnenlicht. Die meisten Tiere hier unten machen ihr eigenes Licht, um zu jagen, sich zu verstecken oder einander zu finden. Viele sind rot: Rotes Licht kommt nie so tief, also wirkt Rot schwarz.
4000–6000 m
Die abyssale Zone
Nahe am Gefrierpunkt, stockdunkel und riesig: Die Tiefseeebenen bedecken etwa die Hälfte der Erdoberfläche. Nahrung kommt vor allem als das, was von oben herabsinkt.
6000–10.935 m
Die Hadalzone
Benannt nach Hades, der griechischen Unterwelt. Es gibt sie nur in Tiefseegräben, die meisten davon im Pazifik. Viele Tiere hier leben in einem einzigen Graben und sonst nirgends.
Challengertief, Marianengraben
10.935 m
Der tiefste bekannte Punkt im Ozean (die Messungen unterscheiden sich um ein paar Dutzend Meter). Das Wasser darüber drückt mit mehr als einer Tonne auf jeden Quadratzentimeter, und es hat etwa 2,5 °C. Du hast es geschafft.
Der vollständige Prompt · rund 450 Wörter
Kopieren, einfügen, schauen, was rauskommt
Das ist der Prompt, den Claude Opus 5.5: 100 HTML Files für Descent — Eleven Thousand Metres Down (No. 022) veröffentlicht hat, Wort für Wort. Er hat zwei Teile: einen Absatz, der dieses Stück beschreibt, und Hausregeln, die die Galerie jedem Prompt angehängt hat. Der Button kopiert beide. Er steht hier auf Englisch, so wie er veröffentlicht wurde. Die Modelle verstehen ihn genauso gut; wenn du die Antworten auf Deutsch willst, schreib das einfach dazu.
Teil 1 · Das Stück · 180 Wörter
Create "Descent — Eleven Thousand Metres Down", a scroll-driven journey from the ocean surface to the bottom of the Mariana Trench (~10,935 m). As you scroll, the background transitions through the ocean zones — sunlight (#1e90c8), twilight (#0b3a66), midnight (#04142b), abyssal (#020812) and hadal (#000204) — while a fixed depth gauge counts metres and shows the zone name, pressure (≈ 1 additional atmosphere per 10 m) and temperature notes. Illustrated SVG/canvas creatures appear at approximately correct depths: dolphins and sunlit fish near the top, jellyfish, a sperm whale (~1,000 m and deeper), an anglerfish with a glowing lure, a vampire squid, a gulper eel, amphipods, and finally the trench floor. Deeper creatures are bioluminescent, with pulsing blue/green light; marine snow drifts through the water; light rays from the surface fade out gradually. Short, accurate captions (keep claims general and well established). Interaction: scroll; in the dark zones the pointer is a faint torch revealing nearby creatures; clicking a creature opens a caption card. It ends with an elegant "Return to surface" button that smooth-scrolls up.
Teil 2 · Die Hausregeln, die die Galerie jedem Prompt angehängt hat · 280 Wörter
SHARED REQUIREMENTS (apply to every page in this 100-page collection): 1. One standalone HTML5 file. All CSS inline in <style>, all JavaScript inline in <script>. No external resources of any kind: no CDN, no libraries, no web fonts, no external images/SVG/audio files, no network requests. All visuals come from CSS, inline SVG, Canvas and procedural code. 2. Valid HTML5: <!DOCTYPE html>, <html lang="en">, <meta charset="utf-8">, a viewport meta tag, a meaningful <title> and meta description, well-nested semantic markup, unique ids, labels/aria attributes for controls, <button type="button"> for actions. 3. Typography from local system font stacks only, always ending in a generic family; display lettering may be drawn with SVG or Canvas. 4. Responsive from 360px phones to large desktops with no horizontal page scroll; canvases match their container and devicePixelRatio (capped at 2) and re-layout on resize. 5. Works offline by opening the file directly (file://); no console errors; storage access guarded with try/catch. 6. Smooth motion via requestAnimationFrame and transform/opacity; animation pauses when the tab is hidden where it matters; honours prefers-reduced-motion with a calmer fallback. 7. Pointer events so mouse and touch both work; visible :focus-visible styles; keyboard support where it makes sense. 8. Any sound is synthesized with the Web Audio API, starts only after a user gesture, and has a visible mute/toggle. 9. Premium finish: a deliberate palette and spacing, polished micro-interactions, a beautiful first frame before any interaction, and original copy (no lorem ipsum). Factual content must be accurate; fictional brands, people and data are clearly fictional. 10. Quality bar: visually impressive, bookmark-worthy, showcase-grade, premium, full of delightful details, and clearly distinct from the other 99 pages in concept, layout, palette, typography and motion.
Was du hier siehst
Scroll nach unten, und du sinkst von einem ruhigen Morgenmeer bis zum Grund des Marianengrabens, der tiefsten bekannten Stelle im Ozean. Unterwegs kommst du an fünf Zonen vorbei, an 17 Tieren ungefähr in der Tiefe, in der sie leben, und an ein paar Markierungen, die man sich vorstellen kann: wo Sporttaucher umkehren, wo die Titanic liegt, wie hoch der Mount Everest ist. Der Tiefenmesser zählt mit: Meter, Druck, Temperatur und wie viel Licht noch übrig ist. In der Dämmerungszone wird dein Mauszeiger zur Taschenlampe, denn weiter unten gibt es nur noch das Licht der Tiere selbst.
Alles, was du siehst, ist in Code gezeichnet. Keine Fotos, keine Bilddateien, keine Libraries. Keine einzige Zeile davon hat ein Mensch geschrieben.
Das Original habe ich in derselben Galerie gefunden wie Soft Machine: 100 Webseiten, jede in einer einzigen Datei, jede veröffentlicht mit dem, was laut Galerie genau der Prompt dahinter ist, alle Claude Opus 5.5 zugeschrieben. Ich habe Claude Code diese hier nachbauen lassen, weil sie etwas zeigt, das der Synthesizer nicht zeigt: KI kann heute eine richtig gute Art bauen, ein Thema zu vermitteln.
Warum Scrollen lehrt
Zahlen wie 10.935 Meter sagen für sich allein wenig. Du liest sie, nickst und vergisst sie. Scrollst du sie, bleiben sie hängen, weil dein Daumen mitzählt.
Schau auf den Balken unten im Tiefenmesser, gezeichnet im echten Massstab. Die Sonnenlichtzone, in der fast alles Leben lebt, das du aus Dokumentarfilmen kennst, macht weniger als 2 % davon aus. Der Rest ist dunkel.
Drei Dinge kommen dazu. Du bestimmst das Tempo und hältst dort an, wo dich etwas interessiert. Du gehst auf die Suche: Im Dunkeln suchst du mit der Taschenlampe, also schaust du genau hin, was du findest. Und jede Bildunterschrift hat höchstens drei Sätze, also liest du sie.
Das funktioniert für Erwachsene genauso wie für Kinder, und für alles, was einen Massstab oder eine Abfolge hat: die Schichten der Atmosphäre vom Boden bis ins All, die Geschichte der Erde, den Weg einer Bestellung durch dein Unternehmen, die Schritte einer Regulierung. Wenn du Leute einarbeitest, ein Team schulst oder dein Produkt erklärst, lohnt es sich, dieses Format zu klauen.
Der Satz, der am meisten zählt
Der Absatz, der den Tauchgang beschreibt, hat weniger als 200 Wörter, und wie bei Soft Machine trifft er die Entscheidungen, die zählen: die fünf Farben der Zonen, was der Tiefenmesser zeigt, welche Tiere ungefähr in welcher Tiefe, was der Mauszeiger im Dunkeln macht. Darunter stehen dieselben zehn Hausregeln, die die Galerie an jeden Prompt gehängt hat.
Für Lernmaterial leistet eine kurze Wendung am meisten: «Short, accurate captions (keep claims general and well established)» (sinngemäss: kurze, korrekte Bildunterschriften, Aussagen allgemein und gut belegt halten). Sie sagt dem Modell, wie vorsichtig es sein soll. Ein Modell weiss sehr viel über die Tiefsee, aber bei «Pottwale jagen Kalmare per Echoortung» steht es auf festerem Boden als bei der genauen Tiefe eines bestimmten Rekords. Allgemeine Aussagen stimmen viel eher, aber nicht garantiert, also muss sie trotzdem jemand lesen.
Sie sagt dir auch, was du prüfen musst. In konkreten Zahlen verstecken sich die Fehler, darum hat Claude Code für diese Seite die genauen Werte nachgeschlagen, bevor sie hineinkamen. Die 10.935 Meter im Prompt stammen aus einer Vermessung von 2021; andere haben zwischen 10.925 und 10.994 gemessen, darum steht am Grund, dass sich die Messungen um ein paar Dutzend Meter unterscheiden. Der tiefste je gefilmte Fisch war ein Scheibenbauch in 8336 Metern Tiefe, 2022. Wenn du KI für Lernmaterial einsetzt, mach es genauso: Lass sie schreiben, dann prüf jede Zahl, die jemand weitererzählen könnte. Lass deine KI nicht ihre eigenen Hausaufgaben benoten zeigt einen einfachen Weg, das mit einem zweiten Modell zu tun.
Was nicht im Prompt steht
Der Prompt beschreibt das Erlebnis. Um es zu bauen, musste vieles herausgefunden werden, das er nicht erwähnt:
Wie weit man für einen Meter scrollt. Zeichnest du 11 Kilometer in einem einzigen Massstab, rauscht die Sonnenlichtzone mit einem Wisch vorbei, während der Graben ewig dauert. Darum ändert sich der Massstab mit der Tiefe: Die ersten 200 Meter bekommen fast fünf Bildschirme, die letzten fünf Kilometer nicht viel mehr.
Was «fix» in einem Artikel heisst. Auf der eigenständigen Seite der Galerie kann der Tiefenmesser die ganze Zeit auf dem Bildschirm bleiben. Hier muss er erscheinen, wenn der Tauchgang beginnt, verschwinden, wenn er endet, und der Kopfzeile der Website aus dem Weg gehen.
Welches Tier die Taschenlampe beleuchtet. Jedes Tier hat einen Körper, der mit dem Tageslicht in seiner Tiefe verblasst, und eigene Lichter, die das nicht tun. Die Taschenlampe gibt Licht nach Entfernung dazu, also ist ein Tier, das halb im Lichtkegel ist, halb sichtbar. Ein Detail, das sich zu suchen lohnt, ist die Rippenqualle: Ihre Regenbogen sind nicht ihr eigenes Licht, sondern Licht, das ihre schlagenden Härchen streuen, darum erscheinen sie nur, wenn deine Taschenlampe auf sie zeigt. So funktioniert das auch im echten Ozean.
Wann die Arbeit aufhört. Die Lichtstrahlen, der Meeresschnee und die blinkenden Tiere im Dunkeln werden etwa 60 Mal pro Sekunde gezeichnet, aber nur, solange der Tauchgang im Bild ist und der Tab offen. Wenn du in deinen Systemeinstellungen reduzierte Bewegung eingeschaltet hast, steht alles still.
Was sich für diese Seite geändert hat
- Es lebt in einem Artikel. Über die volle Breite, in den Schriften der Website, mit dem Tiefenmesser abseits der Kopfzeile und einem Link unter der Wasserlinie, der den Tauchgang überspringt.
- Es spricht drei Sprachen. Jede Bildunterschrift gibt es auf Englisch, Deutsch und Französisch, und die Zahlen folgen jeder Sprache: 10,935 auf Englisch, 10.935 hier, 10 935 auf Französisch.
- Mehr zu entdecken. Der Prompt nennt acht Tiere; der Tauchgang hat 17, dazu die Tiefenmarkierungen und den Abstieg der Trieste von 1960, die der Schweizer Physiker Auguste Piccard konstruiert hatte und mit der sein Sohn Jacques zusammen mit Don Walsh von der US Navy hinunterfuhr.
- Etwas ganz unten, nach dem der ursprüngliche Prompt nicht gefragt hat. Wenn du den Tauchgang übersprungen hast, lohnt es sich, nochmals zurückzugehen.
Das angepasste Briefing unten auf dieser Seite enthält all das, eingearbeitet in den ursprünglichen Prompt.
Probier es selbst aus
- Kopier den vollständigen Prompt oben. Der Button übernimmt beide Teile.
- Füg ihn in Claude, ChatGPT oder Gemini ein. Je nach Abo und Einstellungen erscheint das Ergebnis direkt neben dem Chat (Claude nennt das Artifact, die anderen beiden Canvas). Wenn nicht, speichere den Code als
descent.htmlund öffne die Datei in deinem Browser. - Dann wechsle das Thema. Behalte die Struktur und tausch den Gegenstand aus: «dieselbe Idee für die Atmosphäre, vom Boden bis an den Rand des Weltalls», oder die Geschichte der Erde, ein Bildschirm pro hundert Millionen Jahre. Bitte darum, die Aussagen allgemein zu halten, und prüf dann die Zahlen.
Rechne damit, dass deine erste Version ein bis zwei Runden «dieser Teil ist kaputt, bitte behebe ihn» braucht. Die Version der Galerie und diese hier wurden beide in einer Schleife geprüft und korrigiert. In diesem Prompt stecken keine Unternehmensdaten, also kannst du ihn bedenkenlos mit jedem Assistenten ausprobieren, den du hast, auch mit dem, den dein Arbeitgeber dir gegeben hat.
Das Briefing, angepasst für diese Seite Derselbe Prompt, in den alle Änderungen für diese Website eingearbeitet sind. Nützlich, wenn du sehen willst, wie sich eine Spezifikation verändert, sobald eine Demo in einem echten Produkt laufen muss.
Erstelle «Ins kalte Wasser», eine Scroll-Reise von der Meeresoberfläche bis zum Grund des Marianengrabens (~10.935 m), die in einer Artikelseite auf goodaiguide.com lebt, als Komponente der Website über die volle Breite und nicht als eigenständige Seite. Beim Scrollen wechselt der Hintergrund durch die Meereszonen: Sonnenlichtzone (#1e90c8), Dämmerungszone (#0b3a66), Mitternachtszone (#04142b), abyssale Zone (#020812) und Hadalzone (#000204). Ein Tiefenmesser, der fix bleibt, solange der Tauchgang im Bild ist, zählt die Meter und zeigt den Namen der Zone, den Druck (≈ 1 zusätzliche Atmosphäre pro 10 m), Hinweise zu Temperatur und Licht und einen Balken im echten Massstab von 0 bis 10.935 m. Gib den Metern im Sonnenlicht am meisten Scroll-Raum und stauche den Graben, damit jede Zone Zeit auf dem Bildschirm bekommt. Illustrierte SVG-Tiere erscheinen in ungefähr richtiger Tiefe: Delfine und Fische im Sonnenlicht oben, Quallen, ein Pottwal (~1000 m und tiefer), ein Anglerfisch mit leuchtendem Köder, ein Vampirtintenfisch, ein Pelikanaal, Flohkrebse und schliesslich der Grund des Grabens; ergänze weitere bekannte Tiefseetiere dort, wo sie leben, etwa einen Beilfisch, einen Gespensterfisch, eine Kronenqualle Atolla, eine Rippenqualle, einen Dumbo-Oktopus, Seeschweine und einen Dreifussfisch auf einem Felsvorsprung und einen Scheibenbauch zwischen den Wänden des Grabens. Tiefere Tiere leuchten selbst, mit pulsierendem blauem und grünem Licht; Meeresschnee treibt durchs Wasser; Lichtstrahlen von der Oberfläche verblassen allmählich. Markiere ein paar Tiefen, die man sich vorstellen kann: die Grenze für Sporttaucher, die durchschnittliche Tiefe des Ozeans, die Titanic, den tiefsten je gefilmten Fisch und die Höhe des Mount Everest, dazu eine kurze Notiz zum ersten bemannten Abstieg 1960. Kurze, korrekte Bildunterschriften (Aussagen allgemein und gut belegt halten), auf Englisch, Deutsch und Französisch, mit Zahlen so geschrieben, wie jede Sprache sie schreibt. Interaktion: scrollen; in den dunklen Zonen ist der Mauszeiger eine schwache Taschenlampe, die nahe Tiere sichtbar macht (auf einem Touchscreen der letzte Tipp); ein Klick auf ein Tier öffnet eine Karte mit Bildunterschrift. Ganz unten, als Belohnung für alle, die bis zum Schluss scrollen: eine kleine Unterwasserstation am Grund des Grabens mit dem Good-AI-Guide-Logo auf dem Dach, und durch ihr grosses Fenster sieht man Fabian an einem Schreibtisch mit sechs Bildschirmen, der sich umdreht und winkt, wenn man ankommt. Klar erkennbar erfunden, mit niedlichen Details rundherum. Am Ende steht ein eleganter Button «Zurück an die Oberfläche», der zum Anfang des Tauchgangs zurückscrollt. Gemeinsame Anforderungen wie im Original, ausser: Baue es als Komponente der bestehenden Website statt als eigenständige Datei und verwende die Schriften, die die Seite bereits lädt. Es gibt keinen Ton, also auch keinen Stummschalter. Der Tauchgang selbst macht keine Netzwerkanfragen.