스크립트
00:00:00Loop-Engineering ist im Grunde essenziell geworden für die Art und Weise, wie wir KI-Agenten jetzt nutzen, und zwar deshalb,
00:00:04weil Agenten tatsächlich viel länger eigenständig laufen und einfach weiterarbeiten können. Wir werden euch also
00:00:09drei verschiedene Loops zeigen, die wir zur besseren Übersicht in Stufen unterteilt haben.
00:00:13Stufe eins zeigt euch die Basiseinheit und wie man sie effizient nutzt. Stufe zwei zeigt euch, wie man diese
00:00:18Einheit zu einer Fabrik ausbaut, und Stufe drei schließlich entlastet euch weitgehend und macht das Ganze wirklich
00:00:23agentenbasiert. Da dieses Video so viele Informationen enthält, haben wir unten Zeitstempel eingefügt, damit
00:00:28ihr zu jedem beliebigen Moment springen könnt, solltet ihr jemals zu diesem Video zurückkehren müssen. Außerdem werden wir
00:00:33in diesem Video Claude Code verwenden, aber die Systeme, die wir euch zeigen, funktionieren auch mit Codex,
00:00:38und was die Tools angeht, nutzen wir Warp und VS Code. Beide sind einfach zu installieren und ihr müsst lediglich
00:00:43in beiden einen einzigen Ordner öffnen und uns folgen. Bevor wir dazu übergehen, wie man
00:00:48Loop-Engineering beim Vibe Coding anwendet, müssen wir erklären, was ein Loop ist. Bisher war es so, dass ihr,
00:00:53wenn ihr etwas gebaut habt, euch bereits in einem Loop befandet. Ihr habt dem Agenten einen Prompt gegeben und er hat angefangen
00:00:57zu bauen. Wenn er fertig war, hat er euch im Grunde gebeten, das Ergebnis zu überprüfen, und wenn es falsch war, habt ihr dem
00:01:02Agenten einen weiteren Prompt gegeben und er hat wieder angefangen zu bauen. Ihr wart also bereits in einem Loop. Nun ist ein Agenten-Loop
00:01:07wenn Sie sich selbst aus diesem Prozess herausnehmen und dieser Verifizierungsteil ebenfalls auf den Agenten übergeht. Und
00:01:12das ist ganz natürlich der Weg, den wir eingeschlagen haben, denn wenn man darüber nachdanekt, ist das Entwickeln mit Agenten nicht das,
00:01:17was die meiste Zeit beansprucht. Das erledigen sie autonom im Hintergrund. Was tatsächlich
00:01:21eure Aufmerksamkeit erfordert, ist die Prüfung, ob der Agent erfolgreich war oder nicht. Euer Agent kann die
00:01:26Verifizierung jedoch nur dann durchführen, wenn er weiß, wie das korrekte Ergebnis aussieht. Das ist der Kern des Loops. Aber es gibt
00:01:30auch noch andere Teile. Erstens gibt es etwas, das den Loop starten muss. Dann gibt es den Loop selbst.
00:01:35Und am Ende jedes Loops muss im Grunde eine Verifizierungsprüfung stattfinden, die entscheidet, ob der
00:01:41Agent fertig ist oder nicht. Und diese Verifizierungsprüfung muss von euch festgelegt werden. In einem Agenten-Loop
00:01:46ist der Teil, den ihr behaltet, derjenige, der ohnehin immer eurer bleiben sollte. Das ist der Teil, der
00:01:50entscheidet, ob ihr den Agenten ausschaltet oder ob er weiterarbeiten muss. Das kann man nicht wirklich abgeben. Nun,
00:01:55vielleicht fragt ihr euch: Warum wechseln wir plötzlich zum Loop-Engineering und warum hat das vor einem Jahr
00:01:59noch nicht funktioniert? Die Antwort ist, dass die Modelle damals noch nicht so lange laufen konnten. Und jetzt, mit den neuen
00:02:04Modellen, die auf den Markt kommen, können sie im Grunde stundenlang ohne euch arbeiten. Also, hier ist das, worauf
00:02:08wir das Ganze ausführen: Es ist eine Termin-App für einen Salon. Jemand kommt auf die Website,
00:02:13wählt einen Stylisten aus und kann dann die freien Zeiten dieses Stylisten an verschiedenen Tagen sehen und einen Termin
00:02:17buchen. Dazu kommt der Mitarbeiter-Login, denn jeder Salon, der das nutzt, hat eine
00:02:22Empfangsperson, die das bedient. Sie genehmigen oder leeren eingehende Anfragen ab und verwalten den Kalender
00:02:27für die verschiedenen Stylisten im Salon. Im Moment fehlt hier noch einiges. Es gibt keine Landingpage
00:02:31und es gibt andere wichtige Funktionen, die wir noch hinzufügen müssen. Das hier ist die Claude Code-
00:02:36Sitzung, in der wir das gebaut haben. Wir haben diesen Ordner für das Loop-Engineering erstellt und darin Claude
00:02:41Code gebeten, das Projekt aufzusetzen. Die App selbst liegt in diesem Loop-Salon-Ordner und ist einfach eine Next.js-App.
00:02:46Falls ihr das zum ersten Mal hört, macht euch keine Sorgen. Ihr sagt dem Modell einfach, dass ihr
00:02:51eine Next.js-App erstellen wollt und von dort aus mit dem Aufbau beginnen möchtet, und es kümmert sich darum. Es ist eine
00:02:55der beliebtesten Methoden, um echte Websites wie die zu bauen, die wir hier erstellen. Nun gibt es
00:03:00einige Dinge, die ihr in eurem Ordner haben müsst. Als Erstes haben wir unsere Claude.md und darin steht im Grunde nur, dass man
00:03:04sich die Agents.md ansehen soll. Das liegt daran, dass wir in diesem Repo möglicherweise mehr als einen Agenten ausführen müssen,
00:03:09nicht nur Claude Code. Wir nutzen diese Datei, weil fast jeder andere Agent die Anweisungen in
00:03:14der Agent.md als Regeln dafür verwendet, was bei jeder neuen Sitzung zu tun ist. Nur Claude Code verwendet Claude.md.
00:03:21Und in der Agents.md mussten wir eigentlich nichts selbst schreiben. Dann haben wir diese Datei
00:03:27namens design.functional.md, die alle anklickbaren Teile der App abdeckt, mit denen der Benutzer tatsächlich
00:03:33arbeiten muss. Das Design für diese Teile stammt aus dieser Datei. Und falls es euch aufgefallen ist:
00:03:36Die App sieht aus wie Duolingo. Das liegt daran, dass wir das Design von Duolingo übernommen haben.
00:03:41Dann gibt es einige Fähigkeiten, die ihr kennen solltet. Die erste ist Grill Me, die wir verwendet haben, während wir
00:03:45diese erste Version bauten. Sie stellt euch so lange Fragen, bis dem Agenten tatsächlich klar ist,
00:03:50was ihr wollt. Es gibt hier auch noch andere Fähigkeiten, auf die wir später zu sprechen kommen. Ihr werdet feststellen,
00:03:55dass dieses Projekt bereits gebaut ist. Das haben wir mit Absicht gemacht. Wenn man etwas Neues beginnt,
00:03:59ist das Erste, was man erstellt, ein MVP. Das ist im Grunde die gröbste funktionierende Version eures
00:04:04Produkts, die nur die Hauptfunktion und sonst nichts tut. Und das möchte man nicht mit einem Loop aufbauen.
00:04:08Ein MVP ist sowieso schnell erstellt. Um aber einen Loop darauf anzuwenden, müsste man festlegen, wie das fertige Ergebnis
00:04:13aussehen soll, noch bevor der Agent überhaupt anfängt. Und zu diesem Zeitpunkt weiß man oft noch gar nicht genau, wohin sich das Produkt
00:04:18entwickelt. Das im Voraus zu klären, dauert am Ende länger, als einfach selbst die erste Version zu bauen.
00:04:23Bevor wir jedoch mit Stufe eins beginnen, wäre es großartig, wenn ihr den Kanal abonniert und den
00:04:27Daumen-nach-oben-Button drückt. Diese kleine Geste der Unterstützung bedeutet uns sehr viel. Das bringt uns zu Stufe eins des
00:04:33Loop-Engineerings. Hier arbeiten wir mit einem Loop, der ein Ziel hat, und die Überprüfung
00:04:37wird im Grunde von euch auf den Agenten verlagert. Der Bereich, in dem wir das tun, ist die Landingpage,
00:04:42was sich eigentlich nach dem falschen Ort dafür anhört, da eine Landingpage nur aus einem Bildschirm besteht.
00:04:47Der Agent kann sie im Grunde in einem Durchlauf erstellen, und wenn etwas nicht stimmt, lässt sich das mit einem einzigen
00:04:51Prompt korrigieren und nicht mit mehreren. Einen Loop um eine Landingpage zu legen, wäre mehr Arbeit als die Seite selbst.
00:04:57Hier wollen wir jedoch eine bewegungsintensive Landingpage unter Verwendung der GSAP-Fähigkeit. Alles animiert sich ein,
00:05:02und wenn man darüber nachdanekt, ist das genau der Teil, den man nicht wirklich überprüfen kann, indem man ihn sich einmal ansieht. Bei Animationen
00:05:07gibt es so viele Stellen, an denen der Agent Fehler machen kann, und das erfordert viel Hin und Her. Das ist
00:05:12tatsächlich eine sehr gute Methode, um zu prüfen, ob etwas einen Loop benötigt: wenn es viel Hin und Her
00:05:16mit dem Agenten erfordert. Bevor wir nun einen einrichten, gibt es eine Namenskonvention, die die Leute verwirrt und
00:05:21auf die ihr in dem Moment stoßen werdet, in dem ihr das Slash-Menü in Claude Code öffnet. Es gibt einen Befehl namens
00:05:25Loop und einen Befehl namens Goal, und Loop-Engineering ist im Grunde das mit dem Goal-Befehl. Der Loop-Befehl
00:05:30führt einen Prompt nach einem Zeitplan aus, das heißt, alle fünf Minuten oder jede Stunde wird er erneut ausgelöst, egal ob sich etwas geändert
00:05:35hat oder nicht. Der Goal-Befehl hingegen ist derjenige, der solange weiterarbeitet, bis das verlangte Ergebnis tatsächlich
00:05:40erzielt ist. Wenn wir also von Loop-Engineering sprechen, verwenden wir den Goal-Befehl. Der Loop-Befehl wird ebenfalls in
00:05:45einigen Formen von Loop-Engineering-Workflows verwendet, aber wir werden ihn hier nicht nutzen. Der Goal-Befehl selbst ist ziemlich
00:05:51einfach. Man tippt slash goal und schreibt dann das Ziel auf, das erreicht werden soll, und teilt dem
00:05:56Modell außerdem mit, wie es überprüfen kann, ob es dieses Ziel erreicht hat oder nicht. Am Ende jedes Durchlaufs liest dann
00:06:00ein kleineres Modell die Unterhaltung durch und entscheidet, ob der Agent weiter daran arbeiten muss oder ob die
00:06:05Bedingung erfüllt ist oder nicht. Um also mit der Landingpage zu beginnen, nutzten wir erneut die Grill-Me-Fähigkeit und teilten ihr mit, dass wir eine
00:06:11Spezifikationsdatei für dieses Feature benötigten. Bevor wir nun darauf eingehen, was wir ihr gesagt haben, müsst ihr den
00:06:16Features-Ordner im Projekt betrachten. Jeder Ordner darin entspricht einem Feature, das der Agent fertigstellen muss, und
00:06:21jeder dieser Ordner enthält zwei Dinge: Eine Spezifikationsdatei, in der alles zu diesem
00:06:25Feature niedergeschrieben wird, und einen Verifizierungsordner, der anfangs leer ist und sich füllt, während der
00:06:31Agent den Loop für dieses Feature ausführt. Dann haben wir ihm gesagt, welche Fähigkeiten es nutzen soll. Die erste ist
00:06:35die GSAP-Fähigkeit, die diese wunderschön animierten Landingpages ermöglicht, aber so intensive Animationen
00:06:41verlangsamen die Seite erheblich. Deshalb haben wir ihm aufgetragen, zusätzlich die Optimierungsfähigkeit zu nutzen, die
00:06:45noch einmal über die Seite geht und die Geschwindigkeit wiederherstellt, ohne die Animationen zu entfernen. Wir haben ihm auch eine
00:06:50Bildreferenz zur Orientierung gegeben, nämlich diese Landingpage mit den Illustrationen darauf. Und das Letzte, was wir
00:06:55ihm mitgeteilt haben, betraf die Überprüfung. Normalerweise ist das der Teil, in dem ihr und der Agent euch hin und her austauscht,
00:06:59indem ihr euch die Seite anseht, ihm sagt, was falsch ist, und er es daraufhin behebt. Also haben wir ihm gesagt, dass er
00:07:04zur eigentlichen Überprüfung des Designs das spezifische Tool verwenden muss, das in unserer globalen Claude.MD benannt ist, also
00:07:11der Datei, die für jedes Projekt auf dem Rechner gilt und nicht nur für dieses. Was es also geschrieben hat, war
00:07:15beides auf einmal: die Spezifikation für den Aufbau der Seite und die Verifizierungs-Checkliste, die gegen
00:07:20diese Seite ausgeführt wird. Und genau deshalb landete das Screenshot-Tool aus der globalen Datei dort,
00:07:25denn dieses Tool erstellt Screenshots viel schneller als das jedes Mal Öffnen eines vollständigen Browsers.
00:07:30Ihr könnt hier anhalten und den gesamten Prompt lesen, wenn ihr möchtet. Das macht das Ganze viel verständlicher.
00:07:34Danach ging Grill.me seine Fragen durch und stellte uns eine ganze Reihe davon zur Landingpage.
00:07:39Dann sagten wir ihm noch eins, und das ist der Punkt, der die Spezifikation in ein Ziel verwandelte: Wir trugen ihm auf, die Spezifikationsdatei
00:07:45als Ziel zu schreiben, damit wir sie mit dem Goal-Befehl ausführen konnten, und es nahm daraufhin einige weitere
00:07:50Änderungen vor, was bedeutete, dass wir von da an nur noch den Goal-Befehl ausführen und ihm die Spezifikationsdatei der Landingpage
00:07:55übergeben mussten. Und genau das alles für jedes Feature noch einmal zu tun, ist die Arbeit, die man nicht wiederholen möchte.
00:08:00Daher haben wir die Goal-Writer-Fähigkeit entwickelt. Sie enthält alles, was wir gerade durchgegangen sind, einschließlich dieser einen Zeile.
00:08:06Und was sie tut, ist, die Ordner im Features-Ordner zu erstellen, wobei die Spezifikationsdateien bereits als Ziele verfasst sind.
00:08:11Dann fing es an zu arbeiten und durchlief einen ersten Durchlauf und anschließend einen zweiten, in dem es die
00:08:16die Checkliste wieder durchgegangen und hat sich immer und immer wieder selbst daran gemessen. Danach hat es angehalten und bis dahin
00:08:21war es 38 Minuten lang gelaufen und mit einem einzigen Fehler zurückgekommen, nämlich dem Blinzeln bei einem der Maskottchen.
00:08:26Das ist also dabei herausgekommen. Nach einem weiteren Korrektur-Prompt blinken die Maskottchen jetzt so,
00:08:31wie wir es wollten, und dieser eine Fehler ist genau das Ding, das die Überprüfung niemals hätte finden können, weil ein
00:08:36Screenshot eben immer nur einen einzigen Moment einfängt und die Lücke zwischen einem Blinzeln und dem nächsten zu kurz ist, als
00:08:42dass zwei Screenshots das erfassen könnten. Abgesehen davon sind die Illustrationen echt gut geworden und sie
00:08:46passen voll zum Duolingo-Stil, den wir anstreben – genau derselbe Stil, der sich auch schon in der
00:08:50Haupt-App befindet. Es hat sich auch nah an die Vorlage gehalten, und ein Klick auf „Jetzt buchen“ bringt dich direkt in die
00:08:55App, sodass du sie sofort nutzen kannst. Nun gibt es ein paar Dinge, auf denen von hier an alles aufbaut.
00:09:00Diese App benötigt drei Dinge, die dein eigener Computer nicht von allein erledigen kann, und du wirst
00:09:05keinen davon selbst bedienen müssen, also mach dir darum keine Sorgen. Bisher liegt alles, was du gebaut hast,
00:09:10in einem einzigen Ordner auf deinem Computer, und das ist die einzige Kopie davon überhaupt. Wenn dein Computer abstürzt oder
00:09:15du das Falsche löschst, ist das ganze Projekt mit weg. Das ist das Erste, das sich ändern
00:09:20muss, und GitHub ist das, was das behebt. Claude schreibt den Code des Projekts in deinen Ordner, und GitHub nimmt diesen
00:09:25Code ins Internet und bewahrt ihn in einem Repo auf, was im Grunde genau dieser Ordner ist, der auf deren Website statt
00:09:31nur auf deinem Rechner lebt. Das Zweite ist, dass sich die App bisher noch nichts merken kann. Echte Menschen werden
00:09:36das hier nutzen, also müssen diese Buchungen irgendwo gespeichert werden, da sonst jemand einen
00:09:41Termin bucht, die Seite aktualisiert und einfach alles weg ist. Du brauchst also eine Datenbank, und die, die wir
00:09:45verwenden, ist Supabase. Und das Letzte ist, dass sonst niemand auf deine App zugreifen kann, weil sie im Moment
00:09:50nur auf deinem eigenen Computer läuft. Sie muss also bereitgestellt werden, was einfach bedeutet, dass sie irgendwo ins Internet gestellt wird,
00:09:55wo andere Leute sie öffnen können, und Vercel ist das, was das übernimmt. Eigentlich musst du auf diesen drei
00:09:59Plattformen zu tun ist, einen Account zu erstellen, indem man auf die jeweiligen Websites geht und auf Mit Google anmelden klickt.
00:10:04Es gibt nichts zu konfigurieren und nichts einzurichten. Alles danach läuft über den Agenten,
00:10:08und der Grund, warum das funktioniert, ist, dass alle drei ein CLI besitzen. Dein Agent kann nicht auf einer Website herumklicken,
00:10:14so wie du es machst. Das CLI ist also eine App, damit der Agent die Plattform nutzen kann. Normalerweise müsstest du
00:10:20ein Repo in GitHub sowie ein Projekt in Supabase und Vercel erstellen, aber Claude kann das einfach über die CLIs erledigen.
00:10:26Wenn du also deine Konten auf allen drei erstellt hast, kommst du zum Agenten zurück und sagst ihm,
00:10:31dass du möchtest, dass der Agent alle drei über das CLI nutzt. Er gibt dir für jedes einen Befehl, und du musst
00:10:37diese in einem anderen Terminal ausführen. Dein Agent befindet sich bereits in deinem Terminal, also öffnest du ein
00:10:41zweites und fügst diesen Befehl dort ein. Er installiert dann das CLI für dich und sorgt dafür, dass du dich
00:10:46in deinem Konto anmelden kannst. Dazu öffnet er eine Seite in deinem Browser. Du bestätigst das Ganze, und damit ist
00:10:51die Authentifizierung abgeschlossen. Von da an kann dein Agent alles auf dieser Plattform tun, und du musst
00:10:56diese Seiten nie wieder öffnen. Du musst dir davon eigentlich auch nichts merken, denn wir haben eine
00:11:00kostenlose Setup-Datei unten in die Beschreibung gepackt. Du übergibst diese Datei einfach dem Agenten, und er richtet im Grunde die
00:11:05Next.js-App für dich ein und führt dich anschließend durch alles Weitere, was du brauchst, um diese drei
00:11:10zu verbinden. Da sich die Regeln auf diesen Plattformen außerdem ständig ändern, haben diese Plattformen
00:11:16Fähigkeiten für den Agenten veröffentlicht. GitHub braucht eigentlich keine Fähigkeit. Es hat sich kaum verändert
00:11:21und verändert sich nach wie vor nicht, weshalb wir dafür keine haben. Aber wir haben diese Bereitstellen-für-Vercel-Fähigkeit, die dem Agenten im Grunde
00:11:26erzählt, wie er das Vercel-CLI verwendet, um dein Projekt automatisch bereitzustellen. Und dann haben wir noch
00:11:31die Supabase-Fähigkeit und die für die Best Practices von Supabase. Und auch diese werden automatisch aufgerufen, sodass immer dann, wenn dein Agent
00:11:37eine dieser beiden Plattformen nutzen muss, er sie einfach von allein verwendet und du dich im Grunde um
00:11:42nichts kümmern musst. Diese Supabase-Datenbank füllt sich dann mit Daten, und dein Projekt
00:11:47geht auf Vercel live. Wir verlinken diese Fähigkeiten unten in der Beschreibung. Bevor wir jedoch
00:11:52zum nächsten Level übergehen, wollen wir kurz auf unseren Sponsor Hedra eingehen. Es ist leicht, ihn mit
00:11:57Agenten wie Manus in einen Topf zu werfen, die Dinge recherchieren und ein Projekt planen. Hedra tut das auch. Der Unterschied ist jedoch,
00:12:02was passiert, nachdem er dir ein fertiges Video übergibt – kein Dokument, keine Präsentation. Denk an Claude im Mix mit Canva.
00:12:08Du sprichst mit ihm und er baut an deiner Seite. Wir haben es in einem Workspace ausprobiert und nach einem kurzen Werbevideo
00:12:13für eine App gefragt. Das Interessante war dabei nicht das Video, sondern zu beobachten, wie der Agent dorthin gelangt ist.
00:12:18Zuerst kamen ein paar Klärungsfragen, gefolgt von einem vorgeschlagenen Plan. Anstatt zu raten, hat Hedra
00:12:23das Thema selbst recherchiert und echte Ergebnisse geliefert. Von da an landete das komplette Skript auf der Canvas,
00:12:28der Agent hat uns durchgelehrt und heraus kam das fertige Werbevideo. Das hier ist wirklich für jeden gedacht,
00:12:33der sein Marketing im Alleingang betreibt, ohne Cutter und ohne Texter im Rücken. Mit Hedra kann im Grunde eine einzige Person
00:12:38das tun, wofür früher ein ganzes Team nötig war. Du kannst es unter Hedra.com kostenlos ausprobieren und unseren Code für 50 % Rabatt
00:12:43auf deinen ersten Monat nutzen. Der Link und der Code stehen unten in der Beschreibung. Das bringt uns also zum nächsten
00:12:48Level. Level zwei nennt sich die Software-Factory-Schleife. In diesem Level plant ihr gemeinsam mehrere
00:12:53Funktionen und lasst sie in einer Schleife laufen, damit dein Agent über Nacht an einer Liste von Funktionen weiterarbeiten kann und
00:12:59nicht nach einer einzigen erledigten Funktion stoppt. Da diese Schleifen sehr lang werden können, braucht es einen Tracker, der ihm
00:13:04sagt, ob die Liste der ihm zugewiesenen Funktionen abgeschlossen ist oder nicht. Die Zielschleife ist erst dann beendet,
00:13:09wenn alle Funktionen auf der Liste abgehakt wurden. Wenn du nun neue Funktionen planst,
00:13:13solltest du nicht nur aufschreiben, was erstellt werden soll, sondern tatsächlich das UI anfertigen. Das wird als
00:13:18Prototyp bezeichnet und ist eine vollständig anklickbare Version der App, die jedoch noch nicht wirklich funktioniert. Es gibt zwei riesige
00:13:23Gründe, vor dem eigentlichen Bauen einen UI-Prototypen zu erstellen. Der erste Grund ist, dass du mit einem
00:13:28Prototypen herausfinden kannst, ob das Ding, das du dir vorzustellen versuchtest, tatsächlich das ist,
00:13:33was du bauen wolltest. Und der zweite Grund ist, dass dieser Prototyp für den Agenten,
00:13:37der in einer Schleife arbeitet, zu einer Möglichkeit wird, zu überprüfen, ob das, was er gebaut hat, korrekt ist oder nicht. In der Factory
00:13:42hast du nun die Liste, und der Agent arbeitet diese Liste in einer Schleife ab, indem er sich jeden Punkt einzeln vornimmt. Aber wie
00:13:48arbeitet er an den einzelnen Punkten? Wenn der Hauptagent einen Punkt auswählt, baut er ihn nicht
00:13:53selbst. Er übergibt die Aufgabe an einen Subagenten, und dieser Subagent setzt die Funktion um. Was passiert jedoch, wenn
00:13:58der Subagent beim Bauen Mist baut und deine App ruiniert wird? Aus diesem Grund erstellt der Hauptagent eine Kopie
00:14:03des Ordners, einen sogenannten Branch, und der Agent arbeitet an diesem. Wenn der Agent fertig ist, überprüft er sich
00:14:07nicht selbst. Das führt uns zu einer weiteren sehr wichtigen Regel im Loop-Engineering: Der Agent, der die Arbeit erledigt,
00:14:13sollte sie niemals selbst überprüfen. Die Überprüfung sollte stets an einen anderen Agenten mit einem frischen Kontextfenster übergeben werden.
00:14:18Da Subagenten genau so funktionieren, übergibt der Hauptagent den Branch an einen adversarialen Review-Agenten.
00:14:24Das bedeutet, dass dieser Agent immer davon ausgehen muss, dass sich irgendwo in der geleisteten Arbeit ein Fehler befindet.
00:14:29Auf diese Weise ist er nützlich, um Bugs aufzuspüren. Wenn also vonseiten des adversarialen Review-Agenten
00:14:34ein Problem festgestellt wird, muss der Hauptagent den Build-Agenten erneut starten, und das geht so lange in einer Schleife weiter, bis die Funktion
00:14:39auf der Liste abgehakt wurde. Nachdem er diese Funktion fertiggestellt hat, muss er die Arbeit dieses Branches
00:14:44in die bereitgestellte App einfließen lassen, damit die Nutzer die neue Funktion verwenden können. Falls du es noch nicht wusstest:
00:14:48Die Hauptversion des Codes auf GitHub ist das, was tatsächlich auf der bereitgestellten App auf Vercel angezeigt wird.
00:14:53Wenn also der Branch mit der Hauptversion zusammengelegt wird, landet die Funktion dieses Branches in der bereitgestellten
00:14:58App. Hier kommt deine finale Freigabe ins Spiel. Wenn eine Funktion fertig ist, wird ein Pull Request erstellt.
00:15:03Ein Pull Request ist eine Anfrage, den Funktions-Branch mit dem Haupt-Branch zusammenzuführen. Bei diesem Pull Request
00:15:08fügt der Agent auch Screenshots bei. Wenn du jedoch absolut sichergehen willst, kannst du testen, ob die Funktion
00:15:13in dem Ordner auf deinem Computer tatsächlich funktioniert, indem du Claude bittest, zu diesem Branch zu wechseln und sie
00:15:18dann zu testen. Wenn alles stimmt, kannst du den Pull Request mergen. Wenn wir uns unsere Fähigkeiten also noch einmal ansehen,
00:15:22wirst du feststellen, dass wir jetzt diese neue Funktionsfähigkeit haben. Wenn du diese Fähigkeit aufrufst, wird sie dem Agenten im Grunde
00:15:27sagen, dass hier ein Ordner erstellt werden muss und jeder Ordner eine spec.md sowie weitere Dinge für
00:15:33die Überprüfung enthalten muss. Wie du siehst, haben wir hier im Grunde zwei Funktionen definiert.
00:15:38Eine Funktion, bei der es nun eine Serviceseite geben soll, auf der jede Person im Salon zu finden ist. Und als
00:15:43Zweites soll es so sein, dass, wann immer eine Person einen Termin mit einem Salon-Stylisten hat, sie im Grunde
00:15:48über die Rezeptionistin (also den Admin) eine Bewertung abgeben kann. Anstatt hier die Fähigkeit für neue Funktionen zu nutzen,
00:15:53verwenden wir direkt den Goal Writer. Nun sind all diese Fähigkeiten miteinander verknüpft. Wenn wir
00:15:58also nicht möchten, dass eine Funktion zu einem Ziel wird – wenn wir einfach nur ohne Schleife an der Funktion arbeiten wollen –,
00:16:03setzen wir den Goal Writer nicht ein. Wenn wir ihn aber verwenden, löst er diese Fähigkeit für neue Funktionen aus und
00:16:08fügt auch die Regeln hinzu, um eine Spec-Datei in ein ausführbares Ziel zu verwandeln. Wie wir bereits
00:16:13besprochen haben, solltest du das UI der Funktion vor der eigentlichen Implementierung erstellen. Aus diesem Grund
00:16:18ruft die Fähigkeit für neue Funktionen die Fähigkeit für ein funktionales UI auf, was im Grunde vorgibt,
00:16:23dass sich in der App ein Ordner namens mocks befinden muss und dass die HTML-Datei in diesem Mocks-Ordner
00:16:29ein vollständig funktionsfähiger Prototyp der gesamten App sein wird. Dieser enthält dann Ansichten
00:16:33sowohl für die Rezeptionistin als auch für den Kunden. Nun soll es davon in jedem Ordner nur
00:16:37genau eine geben, und die Fähigkeit für das funktionale UI erstellt diese nur dann, wenn sie nicht bereits existiert. Und
00:16:42da sie offensichtlich immer dann ausgelöst wird, wenn eine neue Funktion erstellt wird, wird sie in jedem Funktionsordner
00:16:47fügt es ebenfalls eine HTML-Datei hinzu. Nun wird die bereits geklonte App genommen und nur der Teil,
00:16:53den das Feature verändert, ausgeschnitten und angezeigt. Wir haben zum Beispiel dieses Services-Feature
00:16:58hier. Wenn wir dessen Mock öffnen, sehen wir, dass der App eine vollständige Services-Seite hinzugefügt wird,
00:17:04die über diesen Button erreichbar ist. Wenn man auf „Jetzt buchen“ klickt und einen Stylisten wählt,
00:17:08wird zuerst gefragt, welchen Service man bei dem Stylisten beanspruchen möchte. Das wurde in der App
00:17:13selbst eigentlich noch nicht implementiert und auch nicht im Klon, aber es ist in diesem Feature-Prototypen
00:17:19enthalten. Es hilft also zu visualisieren, ob das, was man baut, tatsächlich dem Gewünschten entspricht. Zudem wird
00:17:24dies zu einer Möglichkeit für die Schleife, tatsächlich zu überprüfen, ob das Gebaute korrekt ist oder nicht. Danach
00:17:29haben wir ihm gesagt, dass es die beiden Features schreiben soll, und es hat im Grunde die Ordner für Sitzungsbewertungen
00:17:33und Services geschrieben. Das hier ist die Benutzeroberfläche für die Sitzungsbewertungen. Und auch diese kann man sich sowohl als
00:17:38Kunde als auch als Rezeptionist ansehen. Der Rezeptionist fügt die Bewertungen im Namen des Kunden hinzu,
00:17:43weil wir uns die Funktionsweise der Website im Moment so vorstellen. Auf einer echten Website würde das so nicht passieren,
00:17:47aber da dies eine Demo-Website ist, denken wir uns einfach Features aus. Da wir nun mit mehreren Features arbeiten,
00:17:52brauchen wir im Grunde eine Liste, um den Überblick zu behalten. Aus diesem Grund haben wir diesen Feature-Batch-Skill,
00:17:57der im Grunde nur diese Q-Markdown-Datei verwendet, bei der es sich um eine einzige Tabelle handelt,
00:18:02in der die Features aufgelistet sind. Derzeit läuft die Schleife beispielsweise noch und baut
00:18:06das erste, während das zweite noch auf „To-Do“ steht und nacheinander markiert wird. Man muss also nur
00:18:11den Skill aufrufen und ihm sagen, welche Features man hinzufügen möchte. Und wie man sehen kann,
00:18:16sagte er, dass er beide Dateien schreibt und diese Features hinzugefügt hat. Sobald er sie hinzugefügt hat,
00:18:21gibt er einem im Grunde den Goal-Befehl zum Ausführen. Wir haben das ein wenig geändert und die Queue-Datei
00:18:26in einem Goal ausgeführt, und es sollte erst anhalten, wenn keine Zeile mehr auf „To-Do“ oder „Building“ steht, was bedeutet,
00:18:31dass sie alle abgeschlossen und auf „Done“ gewechselt sind. Im Grunde hat es mit der Arbeit begonnen. Es läuft
00:18:36immer noch am ersten Feature und wie wir bereits erwähnt haben, wird zuerst ein Sub-Agent verwendet, um die Sachen
00:18:41tatsächlich zu bauen, und um die Arbeit zu prüfen und zu verifizieren, wird dann ein gegnerischer Agent gestartet. Es läuft noch,
00:18:46es dauert jetzt schon etwa drei Stunden und wir zeigen euch das Endergebnis, sobald es fertig ist. Wie ihr also
00:18:51sehen könnt, haben wir GitHub geöffnet und unser Loop-Salon-Projekt direkt hier. Falls ihr es nicht finden könnt,
00:18:55könnt ihr dem Agenten einfach sagen, dass er euch diesen Link geben soll, damit ihr es öffnen könnt. Hier seht
00:19:00ihr dann diesen Pull-Request-Reiter und nach dem Öffnen seht ihr den Pull-Request, den der
00:19:04Agent zur Überprüfung erstellt hat. Wenn man sich das ansieht, liefert er uns die gesamte Zusammenfassung und dann
00:19:09sogar Screenshots der Seiten als Beweis dafür, dass die erforderliche Arbeit
00:19:13tatsächlich erledigt wurde. Sobald wir das alles überprüft haben, können wir den Pull-Request einfach mergen. Und wie
00:19:18ihr sehen könnt, haben wir hier die live gehostete Version. Sie hat keine eigene Domain, weshalb sie
00:19:23auf Vercel endet. Aber wie ihr seht, wollten wir dieses Services-Feature hinzufügen. Wenn wir nun
00:19:27in das Services-Feature gehen, erhalten wir alle Dienstleistungen, die der Salon anbietet. Und wenn wir zu der Option
00:19:33„Jetzt buchen“ gehen, sehen wir tatsächlich, dass jeder Stylist seine eigenen Services bekommt. Und bevor man sie buchen kann,
00:19:37muss man im Grunde den Service auswählen. Dasselbe passiert dann auch, wenn wir diesen
00:19:42zweiten Pull-Request mergen. Alles, was wir hier durchgegangen sind, haben wir im Grunde so erklärt,
00:19:47dass ihr es selbst nachbauen könnt. Ein Skill besteht im Wesentlichen nur aus schriftlichen Anweisungen in
00:19:51einer Datei. Es ist also nichts dabei, was man nicht auch selbst erstellen könnte. Wer das aber
00:19:56nicht alles durchgehen möchte – das gesamte Repository befindet sich in AI Labs Pro, unserer Community.
00:20:01Das ist im Grunde das gesamte System, so wie ihr es gerade gesehen habt, wobei jeder Skill bereits dort
00:20:05hinterlegt ist. Wenn ihr also unseren Wert schätzt und den Kanal unterstützen möchtet, ist das der
00:20:10richtige Weg dafür. Der Link befindet sich in der Beschreibung. Es gibt also nur noch zwei Dinge,
00:20:14die ihr in diesem ganzen Prozess tun müsst. Ihr müsst das Feature nur noch planen und die finale
00:20:19Erlaubnis erteilen, bevor das Feature oder die Änderung an eure Benutzer gesendet wird. Für keine dieser Aufgaben
00:20:24müsst ihr tatsächlich an eurem Laptop sein, vor allem nicht für die Planungsphase. Ihr beschreibt, was ihr wollt, es stellt euch
00:20:28Fragen, bis es alles versteht, baut euch den Prototypen und all das kann direkt von eurem
00:20:33Smartphone aus erledigt werden. Bei einer kleinen Änderung könnt ihr auch die finale Freigabe vom Handy aus erteilen.
00:20:37Hier kommt Level 3 ins Spiel, dessen Hauptziel es ist, eure Abhängigkeit vom Laptop zu beseitigen.
00:20:43Zu diesem Zweck haben wir eine wirklich gute App namens Paseo gefunden. Sie lässt euren Agenten auf dem eigenen Laptop laufen und
00:20:48ermöglicht euch den Zugriff darauf vom Smartphone aus. Euer Agent sitzt also weiterhin auf eurem Rechner mit allen
00:20:52eurem Dateien, all euren Skills und sämtlichen CLIs, bei denen ihr bereits angemeldet seid. Und alles, was ihr in
00:20:57diesem Video aufgebaut habt, funktioniert einfach weiter. Claude Code kann dies ebenfalls über die integrierte Remote-Control-Funktion tun,
00:21:03aber vieles daran ist fehlerhaft. So hat man beispielsweise kein echtes Menü, um die Skills
00:21:07in der Remote-Control-Funktion von Claude auszuführen. Dies ist also die kostenlose App und wir werden sie unten verlinken.
00:21:12Wir werden nicht allzu tief auf jede Funktion eingehen, sondern nur auf das Wesentliche, damit ihr direkt
00:21:17damit starten könnt. Die App verfügt über ein Workspace-System, bei dem jeder Workspace im Grunde ein Ordner ist, und
00:21:22man darin verschiedene Chats öffnet. Sie führt Claude Code selbst aus, sodass man kein separates,
00:21:26zusätzliches Abonnement dafür benötigt. Ein weiterer sehr interessanter Aspekt ist, dass sie nicht nur
00:21:31auf eurem Laptop läuft, sondern auch auf einem angeschlossenen Mac mini. So könnt ihr von eurem Laptop aus
00:21:35euren Mac mini steuern und von eurem Handy aus diesen Mac mini ebenfalls bedienen. Und anstelle
00:21:40der reinen Terminal-Oberfläche ist das Ganze viel ausgefeilter. Es sieht aus wie Cursor, aber alle Funktionen sind
00:21:45trotzdem da. Der Goal-Befehl funktioniert und ebenso alle anderen von uns erstellten Slash-Befehle. Wir haben also
00:21:49den Loop-Engineering-Ordner hier geöffnet, eine Sitzung darin gestartet und definieren nun ein neues Feature.
00:21:54Es gibt hier auch einen neuen Skill, nämlich den Mobile-Preview-Skill, auf den wir gleich zu sprechen kommen.
00:21:59Um euch zu zeigen, wie das auf dem Smartphone aussieht, haben wir das Telefon hier gespiegelt, und das ist
00:22:03genau dieselbe Benutzeroberfläche, die ihr auch auf dem Computer bekommt. Ihr habt alle Claude-Code-Funktionen und eure
00:22:09Slash-Befehle einsatzbereit – um also ein neues Feature zu starten, führt ihr einfach den entsprechenden Befehl
00:22:14direkt auf dem Smartphone aus. Wir haben den Anmelde-Flow für die Kundenseite implementiert, der vorher
00:22:18noch nicht umgesetzt war. Und hier kommt ein wirklich interessanter Teil. Natürlich schreibt er
00:22:22die gesamte Feature-Datei, aber um euch zu zeigen, wie die Mocks aussehen, kann er Bilder direkt in
00:22:27der Benutzeroberfläche ausgeben, und diese Bilder erscheinen auch auf eurem Smartphone, sodass ihr die Benutzeroberfläche direkt vor Ort
00:22:32auf dem Handy verifizieren könnt. Der Grund, warum wir diesen Mobile-Preview-Skill ausgeführt haben, ist jedoch, dass er die HTML-Mocks als Links bereitstellt,
00:22:37bei denen es sich um kostenlose Deployments auf Vercel handelt. Der Vorteil dabei ist, dass ihr beim Klick auf den Link
00:22:42zu dem eigentlichen Mockup gelangt und herumklicken sowie die App richtig nutzen könnt, anstatt nur
00:22:47Bilder anzusehen. Genau das ist es doch, was man will, wenn man diese Fabrik vom Handy aus steuert.
00:22:51Damit sind wir am Ende dieses Videos angelangt. Wenn ihr den Kanal unterstützen und uns helfen möchtet,
00:22:56weiterhin solche Videos zu machen, könnt ihr das über den „Super Thanks“-Button unten tun. Wie immer vielen Dank fürs Zusehen
00:23:01und bis zum nächsten Mal.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기