WOPR mit Claude Design in 15 Minuten — vom Filmklassiker zum Webterminal

"Shall we play a game?" — WOPR, WarGames (1983)

In WarGames (1983) hackt der Jugendliche David einen Militaer-Computer namens WOPR (War Operation Plan Response) und loest beinahe einen globalen Atomkrieg aus. Die Szenen mit dem gruenen Phosphor-Terminal, der Atomschlaege simuliert, sind Filmgeschichte — der Punkt im Kino, an dem eine ganze Generation gelernt hat, dass Computer auch beunruhigend sein koennen.

Ich wollte das nachbauen. Als Webseite. Mit dem JOSHUA-Login, der animierten Weltkarte mit Raketen-Trajektorien und der beruehmten Lernsequenz am Ende. Eigentlich ein klassisches Wochenend-Projekt: ein paar Stunden HTML, ein paar Stunden CSS-Animationen, ein bisschen JS-State.

Mit Claude Design waren es 15 Minuten und vier Detailfragen.

→ Hier ausprobieren: WOPR Terminal

Was ist Claude Design?

Claude Design ist die neue Design-Generierung in Claude.ai. Wenn man Claude bittet, etwas Visuelles oder Interaktives zu bauen, gibt es nicht mehr nur Code-Snippets oder Pseudo-Wireframes zurueck, sondern eine vollstaendige, self-contained HTML-Datei — mit Styling, State, Animationen, allem drin.

Im Chat-Interface tauchen dafuer zwei neue Badges auf, die den Output-Modus anzeigen:

• Hi-fi design — pixel-genaue, fertig wirkende Designs
• Interactive prototype — klickbare Prototypen mit echtem State und Interaktion

Das Ergebnis ist immer eine einzelne HTML-Datei. Keine externen Dependencies, kein npm install, kein Build-Step. Doppelklick — laeuft im Browser. Keine Installation, kein Hosting, keine API-Keys.

Die Konversation

Der Einstieg war eine simple Anfrage:

"Kennst du den Film WarGames von 1983? Ich moechte das 'Computerspiel' mit Joshua nachbauen als Webseite und brauche ein Design, was die Computerbildschirme mit dem Atomkrieg-'Spiel' wiederspiegelt."

Claude wusste sofort Bescheid — Matthew Broderick, der WOPR-Computer, "Wouldn't you prefer a good game of Global Thermonuclear War?", das Lehrstueck am Ende, "The only winning move is not to play."

Statt sofort loszulegen kamen vier bis sechs Detail-Rueckfragen:

• Soll der ASCII-Globus animiert sein oder statisch?
• CRT-Scanlines auf dem Terminal — ja oder zu viel des Guten?
• Phosphor-Gruen oder Bernstein-Gelb wie auf den ganz alten Terminals?
• Soll JOSHUA wirklich eine eigene Login-Sequenz haben?
• Welche Spiele sollen im Strategie-Auswahl-Menue stehen?
• Sound-Effekte mit dazu?

Vier kurze Antworten spaeter war der Prototyp fertig. Eine HTML-Datei. 1,4 MB. Komplett standalone.

Was Claude alles in die Datei gepackt hat

Ohne dass ich es im Detail spezifiziert haette:

• Boot-Sequenz mit blinkendem Cursor und scrollendem Text wie auf einem 80er-Jahre-Mainframe
• Login-Prompt, der die beruehmte "JOSHUA"-Backdoor akzeptiert
• Strategie-Auswahl mit Optionen wie Global Thermonuclear War, Chess, Poker, Black Jack
• Animierte Weltkarte mit Raketen-Trajektorien zwischen UdSSR und USA
• Lernsequenz am Ende — "The only winning move is not to play."
• CRT-Effekte — Scanlines, Phosphor-Glow, dezentes Flackern
• Korrekte Monospace-Font und gruener Phosphor-Hintergrund (#001a08, #33ff66 — das genaue WarGames-Gruen)

Alles im Look eines DEC-Terminals der frueheren 80er. Ohne dass ich Referenzbilder geliefert habe.

Der Workflow im Vergleich

So saehe der gleiche Build "klassisch" aus, mit grober Schaetzung:

Der klassische Workflow gibt natuerlich mehr Kontrolle. Aber fuer einen Prototyp, eine Demo, eine "waere nett wenn..."-Idee am Sonntagabend? Unschlagbar.

Eine Datei. Drei Befehle.

Bisher war der Schritt von "Ich hab da so eine Idee" zu "Hier, kannst du klicken" der teuerste. Selbst mit Tools wie v0, Bolt oder Lovable hat man danach noch eine Codebase, die gehostet, deployt und gewartet werden will.

Claude Design macht aus der Idee in einem Schritt eine Datei, die man verschicken kann. Per E-Mail, AirDrop oder — wie hier — auf einen statischen Webserver legen.

Der WOPR-Prototyp liegt jetzt als eine HTML-Datei im public/-Ordner dieses Next.js-Projekts. Kein Build, keine Dependencies, kein React-Wrapper. Einfach cp und die Datei ist online.

cp "WOPR Terminal - Standalone.html" public/wopr.html
git commit -m "WOPR demo"
git push

Drei Befehle. Online unter www.macip.de/wopr.html.

Was das praktisch bedeutet

Wenn aus 9 Stunden 15 Minuten werden, veraendert das nicht nur die Geschwindigkeit. Es veraendert, welche Ideen es ueberhaupt vom Kopf in die Welt schaffen.

Eine Klasse von Anwendungen, die vorher schlicht zu aufwendig waren, wird jetzt realistisch:

• Persoenliche Mini-Tools, die zwei Mal im Jahr gebraucht werden
• Visuelle Demos fuer Vortraege, Pitches oder Stand-ups
• Storytelling-Experimente und interaktive Erklaerstuecke
• Genau-eine-Aufgabe-Tools ohne Hosting-Aufwand
• Hommagen an Filme, die einen als Kind nicht losgelassen haben

Genau die Art von Projekt, die man frueher in Gedanken weggewunken hat — "haette ich Zeit fuer, aber...". Diese Schwelle ist deutlich niedriger geworden.

Fazit

Claude Design hebt nicht den Skill-Floor — sondern den Spass-Faktor. Ein Tool, das aus einer halbgaren Filmreferenz in 15 Minuten einen klickbaren Prototypen zaubert, macht Lust, mehr Ideen anzufassen, statt sie weiterzuschieben.

Und manchmal ist das eben ein 41 Jahre alter Militaer-Computer, der nochmal fragt:

"Shall we play a game?"

→ Zum WOPR Terminal