Soft Machine

Was du hier siehst

Alles an diesem Gerät funktioniert. Die Tasten spielen über die Sound-Engine, die in jedem modernen Browser steckt: Ein Oszillator erzeugt den rohen Ton, ein Filter formt ihn, und eine Envelope bestimmt, wie jede Note ein- und ausklingt. Sobald du eine Note gespielt hast, zeichnet der Bildschirm den tatsächlichen Klang des Synthesizers, rund 60 Mal pro Sekunde. Darunter liegen keine Audiodateien, keine Plug-ins und keine Libraries. Es sind rund 1700 Zeilen Code, und keine einzige davon hat ein Mensch geschrieben.

Das Original habe ich in einer Galerie mit 100 Webseiten, jede in einer einzigen Datei gefunden. Neben jeder steht der Prompt, der laut Galerie genau dahintersteckt. Die Galerie nennt Claude Opus 5.5 als Urheber aller Seiten: Laut ihren Notizen arbeiteten 20 Claude-Agenten parallel, und jede Seite wurde in einem Browser gerendert und anhand von Screenshots geprüft, bevor sie durchging. Ich bin ziemlich sicher, dass die meisten Leute ausserhalb der KI-Blase keine Ahnung haben, dass ein Modell das heute kann. Deshalb habe ich Claude Code den Synthesizer hier nachbauen lassen, in den Farben dieser Website, wo du ihn spielen kannst, ohne etwas herunterzuladen.

Ein Absatz? Nicht ganz

Der Absatz, der den Synthesizer beschreibt, hat rund 170 Wörter. Der vollständige Prompt hat einen zweiten Teil, der leicht untergeht: zehn Hausregeln, die die Galerie an jeden ihrer 100 Prompts gehängt hat. Eine einzige, in sich geschlossene Datei. Läuft auf allem, vom 360-Pixel-Handy bis zum grossen Monitor. Beschriftete, barrierefreie Bedienelemente. Die Einstellung für reduzierte Bewegung respektieren. Ton erst nach einer Nutzeraktion, mit sichtbarem Mute-Button. Und ein Qualitätsanspruch, der ausdrücklich etwas «bookmark-worthy, showcase-grade, premium» verlangt.

Dieser zweite Teil leistet mehr, als man ihm ansieht. Es ist das Standards-Dokument der Galerie: einmal geschrieben, von jedem Briefing geerbt. Das ist genau das Argument, das ich in Deine KI hat keine Ahnung, was dein Unternehmen macht formuliere: Das brillante neue Teammitglied leistet viel bessere Arbeit, wenn deine Standards zur Stelle dazugehören, statt dass du sie in jeder Anfrage neu erklärst. Den Hausregeln verdankt der Synthesizer einen Mute-Button und Regler, die du mit den Pfeiltasten drehen kannst, obwohl der Absatz beides nie erwähnt.

Das funktioniert auch bei deinen eigenen wiederkehrenden Anfragen: Schreib deine Standards einmal auf und häng sie unter jedes Briefing, oder trag sie in die Custom Instructions deines Assistenten ein, falls er welche hat. Das Setup, mit dem KI aufhört, generisch zu antworten zeigt, wie.

Warum der Absatz funktioniert

Lies ihn noch einmal und zähl die Entscheidungen darin. Exakte Farben für die Fläche, die beiden Schatten und den einen Akzent. Vier benannte Regler, vertikal gezogen. Die Signalkette ausbuchstabiert: Oszillator, dann Filter, dann Envelope. Welche Computertasten Noten spielen. Was auf einem Handy passieren soll. Und eine Zeile, die dir einen verwirrenden Nachmittag erspart: «Audio starts only after the first gesture.» Browser spielen keinen Ton ab, bevor du auf der Seite etwas angeklickt oder getippt hast. Vergisst du das, bleibt dein Synthesizer stumm, und nichts auf dem Bildschirm sagt dir, warum.

Das ist eine Spezifikation: Sie trifft die Entscheidungen, auf die es ankommt, und lässt den Rest offen. Genau darin liegt hier das eigentliche Können. Spezifikationen zu schreiben ist ein grosser Teil meines Jobs, und die Lektion lässt sich direkt übertragen: Das Modell braucht, was ein guter Entwickler braucht, nämlich klare Entscheidungen bei dem, was zählt, und Freiheit bei allem anderen.

Deshalb gebe ich ihn auch nicht als Prompt zum Auswendiglernen weiter. Kopier ihn ruhig. Was sich auf deine eigene Arbeit übertragen lässt, ist die Art, wie er geschrieben ist.

Was der Prompt nie sagt

Absatz und Hausregeln zusammen kommen auf rund 450 Wörter. Der fertige Synthesizer hat rund 1700 Zeilen Code. Alles dazwischen musste erarbeitet werden, und das meiste davon sind Details, die du nur kennst, wenn du schon einmal Audio-Software gebaut hast:

Timing, das nicht davonläuft. Ein Sequencer muss jeden Step auf den Punkt genau treffen. Browser-Timer sind schlampig: Sie feuern zu spät, sobald die Seite beschäftigt ist, und das hörst du als stolpernden Rhythmus. Die Lösung nutzt zwei Uhren. Ein grober Timer wacht alle 25 Millisekunden auf und trägt die Noten, die in der nächsten Achtelsekunde fällig sind, auf der eigenen Uhr der Soundkarte ein, und die geht exakt. Der Prompt sagt «adjustable tempo» und nichts über Uhren.

Noten, die ohne Klick enden. Lässt du eine Taste mitten im Einblenden los, muss die Lautstärke von dem Wert aus sanft absinken, auf dem sie gerade steht. Schneidest du sie abrupt ab, knackt der Lautsprecher. Nicht jeder Browser hat eine Abkürzung, um diesen Zwischenwert festzuhalten (Firefox zum Beispiel nicht), also rechnet der Code ihn selbst aus.

Ein Bildschirm, der ruhig bleibt. Zeichnest du rohe Klangwerte, rutscht die Welle mit jedem Frame seitwärts. Der Bildschirm wartet, bis die Welle auf dem Weg nach oben die Nulllinie kreuzt, und beginnt genau dort zu zeichnen. Das ist derselbe Trick wie bei einem Hardware-Oszilloskop. Vor der ersten Note kann er keinen Klang zeigen, den es noch nicht gibt. Also baut er die aktuelle Wellenform aus ihren Harmonischen nach und schickt sie durch dieselbe Filter-Mathematik. Dreh den Cutoff-Regler, bevor du etwas spielst, und du siehst, wie die Welle rund wird.

Regler, die sich wie Regler anfühlen. Ein vertikales Ziehen, das weiterläuft, wenn dein Finger vom Regler rutscht, Shift für die Feineinstellung, Pfeiltasten für Leute, die keine Maus benutzen, und ein Screenreader, der «Cutoff, 2.4 kHz» vorliest statt einer unbeschrifteten Box. Die Hausregeln verlangen Tastaturbedienung und beschriftete Bedienelemente nur ganz allgemein. Die Details stammen vom Modell.

Finger. Auf einem Handy würde ein Ziehen am Regler normalerweise die Seite scrollen. Deshalb beansprucht der Synthesizer diese Gesten und lässt den Rest der Seite scrollbar. Fährst du mit dem Finger über die Tastatur, spielt jede Taste, sobald du sie passierst.

Der Absatz erwähnt nichts davon, und die Hausregeln fragen nur allgemein danach («keyboard support where it makes sense»). Die zwei Uhren, das klickfreie Ausklingen und der ruhige Bildschirm wurden nirgends verlangt. In diesem Build hat Claude Code sie alle selbst erarbeitet.

Was sich für diese Seite geändert hat

Die Version der Galerie ist eine eigenständige Seite. Der Umzug in eine laufende Website brauchte ein paar Änderungen, und sie zeigen die letzte Strecke zwischen einer beeindruckenden Demo und etwas, das du wirklich ausliefern würdest:

• Die Farben folgen der Website. Die Oberfläche ist im Light Mode warm cremefarben, im Sepia-Modus pergamentfarben und im Dark Mode anthrazit. Probier den Theme-Schalter in der Kopfzeile aus. Der einzige Akzent ist das Orange dieser Website statt Koralle.
• Die Computertasten spielen nur, solange der Synthesizer den Fokus hat. Auf einer eigenständigen Seite ist es in Ordnung, jeden Tastendruck abzufangen. In einem Artikel mit einem Newsletter-Formular darunter soll das Tippen deiner E-Mail-Adresse keine Melodie spielen.
• Die Tasten sind nach Position zugeordnet. Auf Schweizer und deutschen Tastaturen tauschen Y und Z die Plätze. Die Zuordnung folgt deshalb dem Ort einer Taste, nicht dem aufgedruckten Buchstaben.
• Er ist Teil des Codes der Website. Er nutzt die Schriften der Seite und hat Tests für seine Mathematik.

Das angepasste Briefing am Ende dieser Seite hat all das in den ursprünglichen Prompt eingearbeitet.

Wie der Nachbau lief

Ich habe Claude Code den Absatz gegeben und um eine Version im Design dieser Website gebeten. Es hat den Synthesizer geschrieben und dann seine eigene Arbeit geprüft: Unit-Tests für die Mathematik und ein echter Browser, den ein Skript steuerte. Das Skript klickte Tasten, zog Regler, wechselte das Theme und verkleinerte das Fenster auf Handybreite.

Der nützlichste Fund kam noch vor allen Tests. Die erste Version folgte nur dem Absatz. Als Claude Code den vollständigen Prompt der Galerie las, stiess es auf die Hausregeln, die einen sichtbaren Mute-Button und «a beautiful first frame before any interaction» verlangen, und baute beides ein. Das ist die Vorschau auf dem Bildschirm, die du vor deiner ersten Note siehst. Die Notizen der Galerie zu ihrer eigenen Version beschreiben, dass diese Vorschau aus den Harmonischen der Wellenform gezeichnet wird, und dieser Build nutzt dieselbe Idee. Gleiches Modell, besseres Ergebnis, weil es jetzt die Standards kannte.

Die Browser-Runde fand zwei kleine Probleme. Auf einem 320-Pixel-Bildschirm schob der Clear-Button die Seite um 47 Pixel zur Seite. Und leise Sequencer-Noten erschienen auf dem Bildschirm als fast flache Linie. Claude Code hat beides behoben. Schreiben, rendern, anschauen, korrigieren: Es ist dieselbe Schleife, die die Galerie für ihre eigenen Seiten beschreibt.

Probier es selbst aus

1. Kopier den vollständigen Prompt oben. Der Button übernimmt beide Teile. (Die Hausregeln erwähnen die anderen 99 Seiten der Galerie. Das Modell kommt damit klar.)
2. Füg ihn in Claude, ChatGPT oder Gemini ein und schick ihn ab. Je nach Abo und Einstellungen können alle drei das Ergebnis direkt neben dem Chat anzeigen (Claude nennt das Artifact, die anderen beiden Canvas). Wenn deiner das nicht kann, speichere die Antwort als soft-machine.html und öffne sie in deinem Browser. Wenn die Antwort mitten in der Datei abbricht, schreib «weiter».
3. Dann mach weiter. Bitte um einen Echo-Effekt. Bitte darum, die Markenfarben deines Unternehmens zu verwenden. Frag, warum der Sequencer zwei Uhren braucht, und du lernst etwas darüber, wie Software mit Zeit umgeht, das weit über Musik hinaus gilt.

Eine einzelne Chat-Antwort ist ein härterer Test als das, was die Galerie oder ich gemacht haben, denn beide Versionen wurden in einer Schleife geprüft und korrigiert. Rechne also damit, dass deine erste Version ein bis zwei Runden «dieser Teil ist kaputt, bitte behebe ihn» braucht. Dieses Hin und Her ist so vorgesehen. Die Galerie schreibt ihre Version einem der stärksten Modelle zu, die im September 2026 verfügbar waren, und andere Modelle liefern dir ein anderes Ergebnis. Diesen Unterschied selbst zu sehen, ist die fünf Minuten wert. Wenn etwas kaputtgeht, beschreib, was du siehst, und füg die Fehlermeldung aus der Browser-Konsole ein (F12, dann Console). So beginnt das meiste Debugging mit KI, meines eingeschlossen.

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. Wenn du mehr dazu willst, wie man auf diese Weise Dinge baut: Der Wochenendtrip, der seine eigene App bekam ist dieselbe Idee, angewendet auf etwas Nützliches.