Der ShadCN-Loop ist die beste Lösung für deine kaputte UI

Der Sprecher führt in die Problematik ein, dass shadcn als beliebte UI-Bibliothek zwar für einmalige Landing Pages gut funktioniert, aber bei der Entwicklung neuer Apps oder Features durch KI-Agenten schnell zu Problemen führt. Wenn neue Features implementiert werden, brechen oft andere Teile der Anwendung, was ein bekanntes Problem in der Softwareentwicklung darstellt. KI-Agenten testen zwar ihren Code, werden aber bei großen Kontexten zunehmend unzuverlässig. Daher wird eine Lösung benötigt, die sicherstellt, dass Agenten ihre zugewiesenen Aufgaben tatsächlich vollständig abschließen, was zum Konzept der agentischen Schleifen führt.

Der RALPH-Loop wird als Lösung von Anthropic vorgestellt, die auf einer bestehenden Technik basiert und als Open-Source-Plugin veröffentlicht wurde. Der Loop funktioniert über Claude Code Hooks, speziell Stop-Hooks, die ausgeführt werden, wenn Claude seine Antwortausgabe beendet. Bei jedem Stopp wird dem KI-Agenten seine ursprüngliche Prompt-Datei erneut zugeführt, was iterative Verbesserungen ermöglicht. Der entscheidende Mechanismus ist das 'Completion-Promise' - ein beliebiges Wort wie 'complete', das Claude selbst ausgibt, wenn es seine Aufgabe als abgeschlossen betrachtet. Solange dieses Versprechen nicht im Output erscheint, läuft die Schleife kontinuierlich weiter und verhindert vorzeitiges Aufhören.

Nach der Plugin-Installation stehen drei Befehle zur Verfügung: der RALPH-Loop-Befehl, ein Abbruch-Befehl und ein Hilfe-Befehl. Im Loop-Befehl muss der wiederkehrende Prompt spezifiziert werden, der dem Agenten kontinuierlich zugeführt wird. Eine wichtige Sicherheitsmaßnahme ist das Festlegen einer maximalen Iterationsanzahl, da der Agent bei unmöglichen Aufgaben sonst in einer Endlosschleife feststecken könnte. Das zugehörige Repository enthält wertvolle Best Practices für die Prompt-Gestaltung. Der Sprecher fokussiert sich in diesem Video speziell auf den UI-Workflow und kündigt an, zwei konkrete Features zu implementieren: eine Befehlspalette zum Durchsuchen der App und eine Board-Ansicht für die Datenbank ähnlich wie bei Notion.

Der testgetriebene Entwicklungsansatz (TDD) wird als fundamentale Methodik erklärt, bei der Tests vor der eigentlichen Code-Implementierung geschrieben werden. Claude Code kann die komplette TDD-Struktur einrichten, inklusive End-to-End-Testordner, Screenshot-Ordner zur UI-Verifizierung und entsprechenden Testdateien. Bei der Implementierung des Befehlspaletten-Features werden zuerst ausführliche Tests geschrieben, die initial naturgemäß fehlschlagen. Dann wird die minimal notwendige Code-Menge implementiert, um diese Tests zu bestehen. Anschließend erfolgt Refactoring mit zusätzlicher Funktionalität, wobei bei jeder Ergänzung sichergestellt wird, dass alle Tests weiterhin bestehen. Die Tests sind automatisiert und importieren Playwright für visuelle Verifizierung, wobei Screenshots bei jedem funktionalen Verhalten erstellt werden, die der KI-Agent zur UI-Überprüfung nutzen kann.

Die Implementierung der Befehlspalette wird durch den RALPH-Slash-Befehl mit einem detaillierten Prompt gestartet, der das Feature mit grundlegenden Anforderungen und einem klar definierten Workflow beschreibt. Der Workflow beginnt mit dem Ausführen der Tests, wobei erwartet wird, dass diese initial fehlschlagen, gefolgt von der Komponentenimplementierung zum Bestehen der Tests. Bei umfassenderen Aufgaben würde Claude bei vollem Kontextfenster oder Verwirrung automatisch stoppen, aber niemals das Completion-Promise ausgeben, wodurch der Prompt erneut zugeführt wird und iteratives Weiterarbeiten ermöglicht wird. Da die Befehlspalette eine kleinere Aufgabe war, konnte Claude tatsächlich alles in einem einzigen Durchgang implementieren, alle Komponenten ausschreiben und sämtliche Tests zum Bestehen bringen, was zunächst als Erfolg erschien.

Bei der Implementierung der Board-Ansicht mit demselben Prompt-Ansatz wurde ein fundamentaler Systemfehler offenbart, der beim einfacheren Befehlspaletten-Feature nicht aufgefallen war. Obwohl Claude alle Anforderungen in einem Durchgang abschloss und alle Tests bestanden wurden, gab es Fälle, in denen die Anzahl erfolgreicher Tests tatsächlich abnahm, weil durch die Änderung einer Komponente andere Teile kaputt gingen. Dies demonstriert die Bedeutung von TDD mit rekursivem Testen. Das Hauptproblem manifestierte sich nach der vermeintlichen Fertigstellung: Trotz korrekter Implementierung der meisten Elemente wurden einige UI-Fehler komplett übersehen, die sogar in den Screenshots sichtbar waren. Bei der Analyse wurde klar, dass dies ein Prozessfehler war, speziell in der UI-Behebungsphase.

Die detaillierte Fehleranalyse zeigte, dass Claude zwar alle funktionalen Tests bestanden hatte, aber bei der UI-Verifizierung versagte. Außer den Screenshots gab es keine spezifischen UI-Tests, und Claude warf nur einen oberflächlichen Blick auf einige Bilder, ignorierte UI-Fehler die es sah, und übersprang sogar einige Dateien komplett. Das Kernproblem lag darin, dass Claude seine Promise-Anweisung vorzeitig ausgab, ohne tatsächlich zu verifizieren, ob die UI korrekt behoben war. Die Situation führte zu einer umfassenden Brainstorming-Sitzung über Lösungsansätze, bei der sogar die Best Practices für Prompt-Schreiben aus dem Repository herangezogen wurden. Letztendlich wurden spezifische Regeln und eine Prozessänderung entwickelt, die unabhängig von den laufenden Tests die korrekte UI-Implementierung sicherstellen sollten.

Die entwickelte Lösung umfasste mehrere zentrale Änderungen am Haupt-Prompt, beginnend mit einem Screenshot-Verifizierungsprotokoll, das jedem Bild ein 'verified'-Präfix hinzufügt, sobald Claude es gelesen hat. Die erste Implementierung reichte nicht aus, da Claude weiterhin nur einige Bilder las und vorzeitig stoppte. Die entscheidende Verbesserung bestand darin, Claude zu instruieren, nach dem Umbenennen aller Screenshots das Versprechen noch nicht auszugeben, sondern mindestens zwei Schleifen-Durchläufe zu erzwingen. Die Bildverifizierung wurde von den funktionalen Tests getrennt. In der zweiten Iteration überprüft Claude, ob alle Dateien das 'verified'-Präfix haben, und falls Screenshots verpasst wurden, werden diese nachträglich analysiert und korrigiert. Diese Änderung führte dazu, dass die kleinen UI-Fehler endlich behoben wurden und Claude die Features korrekt implementieren konnte, wobei es in der zweiten Schleife noch gefundene Fehler behob und mit einem finalen Test abschloss.

Der Sprecher stellt Automata vor, ein Unternehmen, das nach dem Unterrichten von Millionen Menschen im Umgang mit KI nun selbst diese Workflows in der Produktentwicklung einsetzt. Automata bietet sich als technischer Co-Pilot für Unternehmer und Gründer an, die großartige Ideen haben, aber kein Tech-Team zur Umsetzung besitzen. Das Unternehmen wendet die gleichen Workflows an, die sie gelehrt haben, und transformiert Konzepte in echte, funktionierende Lösungen ohne die Komplexität der Einstellung und Verwaltung eines Entwicklerteams. Interessenten können sich unter hello@automata.dev melden. Der Sprecher bittet Zuschauer, den Kanal durch den Super-Thanks-Button zu unterstützen, um die Produktion weiterer derartiger Videos zu ermöglichen, und verabschiedet sich mit einem Dank fürs Zuschauen bis zum nächsten Video.