VS Code plant die Einstellungen, Chrome filmt sie

Unser Planer liest eine Live-Seite und schlägt Filme vor. Er kann nicht wissen, dass gestern eine Funktion dazukam oder dass ein bestimmter Filter das ist, was die Leute lieben. Claude Code, das in deinem Editor mit geöffnetem Repository arbeitet, kann es: Es liest die Historie, öffnet die Routen und prüft, ob eine Seite wirklich existiert, bevor es sie nennt.

Unsere VS-Code-Erweiterung beruht deshalb auf einer bewussten Entscheidung. Sie ruft nie von sich aus ein Modell auf. Sie bereitet eine genaue Aufgabe vor und übergibt sie an die Claude-Code-Erweiterung, die in deinem Editor schon offen ist, und du drückst Enter. Deine Anmeldung, dein Kontext und das letzte Wort bleiben bei dir, und nie wird etwas in deinem Namen gesendet. Claude Code schreibt einen Aufnahmeplan ins Projekt, und das Panel aktualisiert sich, sobald sich die Datei ändert.

Die Verbindung ist ein Klick, nach dem Vorbild von drurls.com, unserem Schwesterprodukt. Die Website gewährt Zugang erst nach deiner Anmeldung und Zustimmung, prüft streng, wohin sie dich zurückschickt, und verwendet deinen vorhandenen Schlüssel weiter, sodass das Verbinden von VS Code die Chrome-Erweiterung nie trennt.

Bisher wurde in Chrome immer von einem Menschen aufgenommen: Du hast die Maus bewegt, unser gestalteter Cursor folgte. Um einen Plan abzuspielen, steuert die Erweiterung die Seite jetzt selbst. Ihr Ablauf-Motor führt den Cursor auf einer weichen Bahn zu jedem Ziel und tippt Zeichen für Zeichen, im selben natürlichen Rhythmus wie unsere Filme auf dem Server.

Er ist für echte Websites gebaut:

• er kommt an Dialogfenstern vorbei, statt an ihnen hängen zu bleiben;
• verfehlt ein Selektor, findet er das Element über seine sichtbare Beschriftung;
• Klicks senden die volle Folge von Zeiger-Ereignissen, damit moderne Oberflächen reagieren;
• er bemerkt, wenn ein Ablauf die Seite verlässt, und gibt jedem Schritt ein eigenes Zeitlimit.

Zwei Browserregeln haben den Rest geprägt. Bildschirmaufnahme braucht einen echten Klick von dir, also startet ein Start-Knopf die Sitzung, und danach läuft der Ablauf allein. Und ein Seitenwechsel löscht alles, was in die Seite eingefügt wurde, also wird ein Ablauf an jeder Navigation geteilt, und der Cursor kommt danach jeweils zurück.

Die erste Version vermischte die Rollen: VS Code machte selbst Bilder aus Terminalausgaben und Code-Diffs, Chrome nahm getrennt Screencasts auf, und das Feld, das beides verbinden sollte, wurde noch nicht genutzt. Heute haben wir eine klare Linie gezogen.

• VS Code schreibt Abläufe und nimmt nichts auf. Ein Ablauf ist eine echte Adresse plus geskriptete Schritte, jeder mit einer Beschriftung, die ihn als Szene benennt, und einer Schätzung seiner Zeit im Bild.
• Chrome nimmt auf. Ein Klick spielt jeden Ablauf mit dem gestalteten Cursor ab, nimmt dann jede geplante Einstellung auf, die er erreicht, und markiert den Rest als Aufgabe für einen Menschen, statt ihn zu überspringen.
• Jeder Schritt wird zum Medium. Bei jedem Schritt speichert der Rekorder die Ansicht und die Seitendaten und markiert, wo der Schritt im Clip beginnt. Ein ganzer Ablauf kommt als ein Upload an: die Aufnahme plus ein Bild pro Schritt.

Und du kannst sie heute installieren: Die VS-Code-Erweiterung gibt es jetzt auf ihrer eigenen Seite zum Download, neben der für Chrome, mit der Installationsanleitung in allen vier Sprachen.

Bevor wir die Vorgaben für Claude Code fertigstellten, haben wir gelesen, wie die Erweiterung von drurls.com ihre Abläufe schreibt, und drei bewährte Regeln übernommen:

1. 1Durch die Seite klicken, statt zwischen Adressen zu springen, denn Springen beweist nur, dass die Seiten existieren.
2. 2Bis ganz nach unten scrollen, nicht bis zu einer Pixelzahl, denn ein Assistent, der Quellcode liest, kann nicht wissen, wie hoch eine Seite gerendert wird.
3. 3Nie eine Passwort-Anmeldung skripten: Der Aufnahme-Browser ist schon als du angemeldet.

Die Nahtstelle zwischen zwei Erweiterungen in zwei Umgebungen ist der Ort, an dem etwas verrutschen kann, also haben wir genau dort Tests gesetzt. Ein Hin-und-zurück-Test schickt einen Plan durch den echten Code, vom Schreiben bis zu den Prüfungen des Rekorders, und bestätigt, dass jede Navigation und jedes Scrollen unversehrt ankommt. Ein weiterer bestätigt, dass die Aktionen, die Claude Code nutzen darf, genau die sind, die der Rekorder abspielen kann. Ein dritter prüft, dass jedes Element, auf das das Panel angewiesen ist, wirklich in seiner Seite steht.

Wenn du ein Produkt baust, ist deine beste Demo oft die Funktion, die du diese Woche ausgeliefert hast, und niemand kennt sie besser als dein Code. Jetzt kann der Assistent, der deinen Code schon kennt, den Film planen, und der Browser kann ihn drehen, Schritt für Schritt, mit einem Cursor, der sich wie eine Hand bewegt.

Das Ergebnis sind Aufnahmen, die zeigen, was dein Produkt heute wirklich kann, jeder Schritt benannt, getimt und bereit, eine Szene zu werden. Beide Erweiterungen haben ihre eigene Seite: VS Code und Chrome.