Claude baute in einer Sitzung einen skeuomorphen Tastatursimulator — Öffentliche Transkripte, CORS-proxierte Unsplash-Hintergründe

Ein Entwickler auf r/ClaudeAI teilte einen skeuomorphen Keyboard-Simulator, der in einer einzigen Claude-Sitzung erstellt wurde. Die App, live unter asdf.app.teenyapp.com, zeigt eine realistische Tastatur, die aufleuchtet, wenn man auf der physischen Tastatur tippt. Drückt man die Eingabetaste, wird die Zeile in ein öffentliches Transkript gesendet, das für alle Besucher sichtbar ist.

Wichtige technische Entscheidungen

• Erste Eingabeaufforderung: "Tastatur-Rekorder mit einem Verlauf wie auf einer Rechnerrolle, der darüber scrollt, skeuomorph. Claude lieferte v1 in einem Durchlauf, aber generisch."
• Figma-Import: Der Entwickler lud eine Figma-Datei mit den gewünschten Tasten hoch. Claude installierte fig kiwi (einen Community-Parser für Figmas Binärformat), durchlief alle 98 Knoten und extrahierte exakte Verläufe und Unschärfen. Die CSS-Nachbildungen wirkten "geringelt" und zu scharf – die Lösung war, alle SVG-Ebenen aus Figma einzeln zu übertragen.
• Tipplogik: Die erste Version verwendete ein benutzerdefiniertes div als Eingabefeld, sodass Cmd+PfeilLinks und Cmd+Rücktaste nichts taten. Die Lösung war ein verstecktes <input> unter dem orangefarbenen Display, dessen Wert in den sichtbaren Text gespiegelt wird, sodass das Betriebssystem alle Tastenkombinationen nativ behandelt.
• Hintergründe: Echte Unsplash-Fotos (Marmor, Walnuss, Scheunenholz, Schiefer) wurden über einen CORS-Proxy abgerufen und als zwischengespeicherte WebP-Dateien ausgeliefert.

Dies ist eine praktische Demonstration, wie Claude von einer vagen Idee zu einer ausgefeilten, funktionalen Web-App in einer einzigen Sitzung geführt werden kann – vorausgesetzt, man ist bereit, am Design zu feilen und mit den Eigenheiten von LLM-Ausgaben umzugehen.