00:00:00Claude Code ist wirklich großartig, aber unser Team nutzt es mittlerweile für alles.
00:00:03Anthropic hat das bemerkt und vor einer Weile das Konzept der „Skills“ eingeführt.
00:00:07Aber mit dem Release von Nano Banana Pro schlugen die Leute eine ganz andere Richtung ein,
00:00:12indem sie Google-Produkte wie Anti-Gravity nutzten, um bessere Websites zu bauen.
00:00:15Wir haben Anti-Gravity ausprobiert, aber unserer Meinung nach ist es aktuell noch zu fehlerhaft.
00:00:19Wir wissen, dass uns die Anti-Gravity-Fans dafür an die Gurgel gehen werden.
00:00:21Aber das ist ein Thema für ein anderes Video; jedenfalls sind die generierten Bilder kostenlos.
00:00:25Also dachten wir: Warum lassen wir Claude nicht das Coding übernehmen und Anti-Gravity nur die Bilder?
00:00:30Aber die Sache ist die:
00:00:31Für diese verschiedenen Anwendungsfälle sollte man Claude nicht jedes Mal neu prompten.
00:00:35Man sollte es trainieren und einen dedizierten Skill erstellen.
00:00:37Claude hat vor Kurzem einen Guide veröffentlicht, wie Skills eigentlich aufgebaut sein sollten.
00:00:41Und der wichtigste Teil dabei ist das Testen und Iterieren.
00:00:44Ehrlich gesagt hat dieser Guide unsere Denkweise über diese Skills grundlegend verändert.
00:00:48Vielleicht habt ihr schon vom „Skill Creator“ gehört.
00:00:50Das ist der offizielle Skill von Claude Code, der Anleitung zur Erstellung effektiver Skills bietet.
00:00:55Aber eines unserer Teammitglieder stellte fest, dass dieser immer noch veraltet ist,
00:00:58gemessen an dem neuen Guide, den wir veröffentlicht haben.
00:01:00Also haben wir ihn aktualisiert, und er hat gemäß den neuen Richtlinien viele Dinge geändert
00:01:02und wirklich gute Verbesserungen erzielt.
00:01:05Mit diesem aktualisierten Skill Creator und viel mühsamer Iteration
00:01:09haben wir diesen neuen Nano Banana UI Skill erstellt.
00:01:12Aber der Skill, mit dem wir begannen, und der, mit dem wir endeten, waren zwei völlig verschiedene Dinge.
00:01:16Beide Skills werden in AI Labs Pro verfügbar sein.
00:01:19Für alle, die es nicht wissen: Das ist unsere neu gestartete Community,
00:01:22in der ihr fertige Templates bekommt, die ihr direkt in eure Projekte einbinden könnt,
00:01:26sowohl für dieses Video als auch für alle vorherigen.
00:01:28Wenn euch unsere Arbeit gefällt und ihr den Kanal unterstützen wollt,
00:01:31ist das der beste Weg. Den Link findet ihr in der Beschreibung.
00:01:34Wir hatten den Koordinationsprozess zwischen Claude Code und Anti-Gravity bereits ausgearbeitet.
00:01:38Also öffneten wir dasselbe Verzeichnis sowohl in Claude Code als auch in Anti-Gravity.
00:01:42Claude initialisierte das Projekt, und Anti-Gravity musste sich nur um diesen „public“-Ordner kümmern,
00:01:47der alle Bilder enthalten würde.
00:01:49Claude lieferte uns die Prompts und die Dateinamen für die Bilder, die
00:01:53Anti-Gravity produzieren sollte. Diese Prompts gingen direkt in Anti-Gravity.
00:01:56Es startete sein Bildgenerierungstool und erzeugte mittels Parallelverarbeitung
00:02:00mehrere Bilder gleichzeitig.
00:02:03Wie ihr seht, wurden drei Bilder generiert und alle drei in diesem Bilderordner abgelegt.
00:02:08Sobald sie dort lagen, wusste Claude automatisch Bescheid und konnte problemlos damit arbeiten.
00:02:12Doch in dem Moment, als wir anfingen, die Bilder tatsächlich zu generieren, ging einiges schief.
00:02:17Ihr habt es wahrscheinlich schon oft gehört, aber „Description Engineering“ ist einer der
00:02:21wichtigsten Aspekte beim Aufbau dieser wiederholbaren Workflows. Diese Beschreibungen sind der
00:02:26YAML-Frontmatter, der beim Öffnen immer in den Kontext von Claude Code geladen wird.
00:02:30Darüber entscheidet Claude letztlich, ob ein Skill geladen werden muss oder nicht.
00:02:34Viele Nutzer berichten jedoch, dass Skills geladen werden, obwohl sie gar nicht benötigt werden.
00:02:38Das liegt daran, dass die meisten Beschreibungen nur sagen, was der Skill tut.
00:02:41Eine gute Beschreibung beantwortet eigentlich zwei Fragen:
00:02:44Was macht der Skill? Und wann sollte Claude ihn verwenden?
00:02:46Hier kommen Trigger-Phrasen ins Spiel. Das sind die Begriffe, die den Skill tatsächlich aufrufen,
00:02:51wie „Landingpage bauen“ oder wenn wir „Nano Banana“ erwähnen. Aber es geht nicht nur darum, wann er genutzt werden soll.
00:02:57Der Guide erwähnt auch negative Trigger, die Claude sagen, wann er den Skill auf keinen Fall nutzen darf.
00:03:01Zum Beispiel legen wir fest, dass er nicht bei einfachen Bugfixes oder Datenbankarbeiten geladen wird.
00:03:05Der Unterschied zwischen einer guten und einer schlechten Beschreibung ist also deutlich.
00:03:08Man sieht, dass dieser Skill aus dem neuen Skill Creator mehrere Trigger-Phrasen und negative Trigger hat,
00:03:13während der vom alten Creator lediglich beschreibt, was der Skill macht.
00:03:17Es gibt auch Anweisungen, die rein quantitativ sind und sich auf die Syntax beziehen,
00:03:21aber die müsst ihr nicht im Detail kennen.
00:03:23Übrigens: Wenn euch unser Content gefällt, drückt gerne den Hype-Button,
00:03:27denn das hilft uns dabei, mehr solcher Inhalte zu erstellen und mehr Menschen zu erreichen.
00:03:31Normalerweise mussten die verschiedenen generierten Bilder unterschiedliche
00:03:35Dimensionen haben, um für die jeweiligen Anwendungsfälle zu passen.
00:03:39Und genau das gab der Prompt vor, bevor wir die Änderungen vornahmen.
00:03:42Aber jedes Mal, wenn wir versuchten, diese benutzerdefinierten Maße zu verwenden,
00:03:46erzeugte das Bild-Tool in Anti-Gravity trotzdem nur quadratische Bilder.
00:03:50Bei dem einfachen Modell in der Gemini-App oder im Google AI Studio ist das normalerweise kein Problem.
00:03:55Aber hier mussten wir den Prozess umstellen und den Skill entsprechend anpassen.
00:03:58Dies wurde überall in der skill.md in den entsprechenden Phasen referenziert,
00:04:02und auch in den Prompting-Regeln wurde festgelegt: Wenn ein Prompt geschrieben wird,
00:04:06sollen keine Maße oder Seitenverhältnisse angegeben werden, da dies keine Rolle spielte.
00:04:10Und falls das Bild für einen speziellen Zweck zugeschnitten werden muss,
00:04:12sollte das später mit dem eigenen Crop-Tool erledigt werden.
00:04:15Und genau deshalb ist der „scripts“-Ordner so wichtig.
00:04:18Er enthält diese ausführbaren Tools, die Claude mit spezifischen Argumenten aufrufen kann,
00:04:22und man entdeckt diese Tools passend zu den jeweiligen Anwendungsfällen.
00:04:25Ein gutes Skript verfügt über CLI-Argumente mit verschiedenen Modi,
00:04:29damit Claude es einfach aufrufen kann.
00:04:31Einer von uns fand heraus, dass auch Vorschau-Modi sehr wichtig sind,
00:04:35damit Claude das Ergebnis prüfen kann, bevor destruktive Operationen ausgeführt werden.
00:04:40Machen wir eine kurze Pause für unseren heutigen Sponsor.
00:04:42Danach schauen wir uns den einen strukturellen Fehler an,
00:04:45den die meisten beim Erstellen ihrer Skills machen.
00:04:47CREAM
00:04:47Für Entwickler und SaaS-Gründer ist das größte Problem nicht das Bauen an sich.
00:04:50Es ist der Albtraum der globalen Steuern und der Umsatzsteuer-Compliance.
00:04:53CREAM ist ein „Merchant of Record“, der euch diese Last komplett abnimmt, damit ihr euch auf die Entwicklung konzentrieren könnt.
00:04:58Entwickelt für die nächste Welle digitaler Unternehmen,
00:05:00bietet CREAM ein blitzschnelles Setup, um ab Tag eins Zahlungen aus über 100 Ländern zu akzeptieren.
00:05:05Sie haben das Chaos der versteckten Gebühren beseitigt
00:05:07und bieten eine transparente Flatrate von 3,9 % + 40 Cent an.
00:05:11Das ist alles.
00:05:11Derselbe Tarif, egal ob der Kunde in Tokio oder Texas sitzt, mit American Express oder Google Pay zahlt.
00:05:16Ihr erhaltet leistungsstarke Funktionen wie automatisierte Revenue-Splits für einen reibungslosen Start.
00:05:20Nutzt immer den isolierten Testmodus und das dedizierte TypeScript-SDK.
00:05:23Zudem bietet CREAM offizielle KI-Agent-Skills für Claude Code, Cursor und WinSurf an.
00:05:28Sagt eurem KI-Assistenten einfach, er soll CREAM integrieren,
00:05:30und er wird sofort produktionsreifen, sicheren Code basierend auf den neuesten API-Best-Practices generieren.
00:05:36Wichtig: Übertragt eure API-Keys niemals in die Versionsverwaltung.
00:05:39Wenn ihr bereit für einen Payment-Stack seid, klickt auf den Link im angepinnten Kommentar.
00:05:42Hört auf, euch um Steuern zu sorgen, und fangt an zu skalieren mit CREAM.io.
00:05:45Ihr habt uns vielleicht schon in früheren Videos über „Progressive Disclosure“ sprechen hören,
00:05:50denn das betrifft nicht nur Skills, sondern ist auch extrem wichtig für das Kontextfenster.
00:05:55Das bedeutet, dass der Agent nur dann etwas wissen sollte, wenn er es gerade wirklich braucht.
00:05:59Ihr wisst bereits, dass die Beschreibung immer in den Kontext von Claude Code geladen wird.
00:06:03Und deshalb nutzen diese Skills eine dreistufige Struktur,
00:06:06bei der sich die erste Ebene immer in Claudes Kontext befindet.
00:06:09Die zweite Ebene ist der Hauptteil der skill.md, der Verweise auf Ebene 3 enthalten sollte,
00:06:14einschließlich des kompletten Workflows und Anweisungen zur Nutzung der Referenzen.
00:06:18Innerhalb dieser Struktur definiert der offizielle Guide einen sogenannten „kritischen Bereich“.
00:06:23Man sollte die wichtigsten Informationen direkt am Anfang auflisten,
00:06:26und sie nicht unter all den verschiedenen Anweisungen verstecken.
00:06:29Man sieht deutlich, dass dieser Skill nur die skill.md besitzt und keine Ebene-3-Struktur hat.
00:06:34Das liegt daran, dass der gesamte Workflow, die Tipps, die verschiedenen Empfehlungen
00:06:38und Troubleshooting-Richtlinien in einer einzigen Datei untergebracht sind.
00:06:41So sollte es nicht strukturiert sein,
00:06:43da Claude diese Richtlinien im aktuellen Moment vielleicht gar nicht benötigt.
00:06:45Es sollte zuerst nur den Workflow laden
00:06:47und die Prompting-Regeln erst dann heranziehen, wenn es Zeit ist, diese zu schreiben oder anzuwenden.
00:06:51Andererseits ist dieser Skill klar strukturiert, mit Referenzen
00:06:54und den verschiedenen Skripten, die er benötigt.
00:06:56Zusammen mit dem Workflow enthält die Datei klare Trigger, wann welches Skript ausgeführt
00:07:01und wann die Referenzen für die verschiedenen Richtlinien geprüft werden sollen.
00:07:04In der skill.md steht also nur der Workflow für den Nano Banana Skill.
00:07:08Danach folgen im Referenzbereich die verschiedenen Richtlinien,
00:07:12wobei die Prompting-Regeln die 13 verschiedenen Testregeln enthalten,
00:07:15die wir nach unseren Iterations-Tests ermittelt haben.
00:07:17Doch trotz all dieser Struktur fand Claude Code immer noch Wege, Schritte zu überspringen.
00:07:22Nachdem die erste Ladung Bilder generiert worden war,
00:07:24mussten diese zwangsläufig neu generiert werden,
00:07:26da Nano Banana nicht immer das präziseste Ergebnis liefert.
00:07:29Überraschenderweise hat Claude das nicht von sich aus überprüft.
00:07:33Wir mussten explizit fragen, ob die Bilder dem Design entsprachen, das es entwerfen wollte.
00:07:37Andernfalls hätte es einfach mit den produzierten Bildern weitergearbeitet.
00:07:41Wie gesagt: Iteration ist das A und O beim Erstellen dieser Skills.
00:07:45Wir hatten zwar schon einen Schritt zur Asset-Validierung mit dem „validate images“-Skript,
00:07:49aber das prüfte nur die strukturelle Integrität der Bilder,
00:07:52nicht aber, ob sie ästhetisch korrekt waren.
00:07:55Mit der Ästhetik hatte das Tool nichts zu tun.
00:07:57Für die Ästhetik musste Claude selbst ein visuelles Review durchführen
00:08:00und anhand spezifischer Fragen entscheiden, ob das Bild besteht oder durchfällt.
00:08:04Falls es durchfällt, musste auch ein Grund angegeben werden.
00:08:07Denn wenn ein Bild das visuelle Review nicht bestand,
00:08:09musste Claude dieses Bild löschen und einen neuen, korrigierten Prompt schreiben.
00:08:13Abhängig vom Modus – wenn man im Anti-Gravity-Modus war –
00:08:16lieferte es einen neuen Prompt inklusive des Grundes für das Scheitern des vorherigen,
00:08:20damit Anti-Gravity neue und bessere Bilder generieren konnte.
00:08:23Deshalb meldet Anti-Gravity hier auch, dass das Glas-Bild neu generiert wurde
00:08:27und diesmal den Anforderungen entspricht.
00:08:29Wenn ihr einen Workflow baut, sind solche „Validation Gates“ also extrem wichtig.
00:08:34Validation Gates sind explizite Blocker, die festlegen, was abgeschlossen sein muss,
00:08:39bevor es zum nächsten Teil des Workflows gehen kann.
00:08:41Wie ihr gesehen habt: Überlässt man es Claude, baut es munter UIs um fehlende oder kaputte Bilder herum,
00:08:46ohne irgendetwas zu verifizieren, sofern man es nicht anweist.
00:08:48In diesem Skill hier zum Beispiel
00:08:50sieht man deutlich, dass der Workflow mehrere Schritte vorsieht.
00:08:54Neben anderen Fehlern
00:08:55wurde hier kein Validation Gate eingebaut, bevor der nächste Schritt erfolgt.
00:08:59Diese Validation Gates sind immer noch Prompts.
00:09:01Es sind keine magischen Bash-Befehle.
00:09:04Aber wenn etwas jedes Mal identisch wiederholt werden muss,
00:09:08sollte man ein Tool erstellen und dieses Tool als Validation Gate listen.
00:09:11In unserem Fall haben wir zwischen den Schritten diese Validation Gates,
00:09:15die nicht nur den Übergang zwischen Prozessabschnitten kontrollieren,
00:09:19sondern auch Miniprozesse innerhalb jedes Workflows bilden.
00:09:22Wenn ihr mit eurem Prozess experimentiert und iteriert,
00:09:26werdet ihr auf viele Fehler stoßen, von denen ihr einige schon gesehen habt.
00:09:30Zum Beispiel fehlende oder korrupte Bilder, unvollständige API-Outputs
00:09:34oder Skripte, die aufgrund eines Teilfehlers abbrechen.
00:09:36Während man am Skill arbeitet,
00:09:39sollte ein guter Skill Creator das Error-Handling für jeden Fall notieren und klar definieren.
00:09:44Denn was einmal passiert ist, kann wieder passieren.
00:09:46Und es sollte in diesem Format gehandhabt werden:
00:09:48Den Fehler definieren, dann die Ursache (damit Claude Bescheid weiß),
00:09:51und schließlich die Schritte zur Behebung des Problems.
00:09:54Nochmal: Wenn wir den Befehl zum Bau einer Landingpage geben, lädt es den Skill und liest die Dateien.
00:09:58Wenn bereits ein Next.js-Projekt existiert, erkennt es das und stellt Fragen,
00:10:02etwa wofür die Seite ist und ob KI-generierte Bilder gewünscht sind.
00:10:06Wenn man die Bilder ablehnt, nutzt es einfach seine Front-End-Ressourcen für den Aufbau.
00:10:11Das liegt daran, dass wir Claude während der Entwicklung auch angewiesen haben,
00:10:16diesen Front-End-Design-Skill fertigzustellen, der viele tolle Richtlinien
00:10:19für die Implementierung wirklich gut aussehender Seiten enthält.
00:10:22Nach all den Experimenten ist das hier das Ergebnis für uns.
00:10:27Hier seht ihr das generierte Bild,
00:10:29und es hat diesen dezenten Animationseffekt.
00:10:32Ansonsten ist es eine sehr saubere Landingpage, und die Bilder sind nicht überladen.
00:10:36Sie werden nur dort eingesetzt, wo sie wirklich Sinn ergeben.
00:10:39Aber bei der ersten Generierung gab es Probleme mit der Schriftart.
00:10:43Es sah einfach nicht gut aus.
00:10:44Also haben wir diese spezielle Typografie-Schriftart genommen, mit der experimentiert wurde,
00:10:48und das hat die typografischen Probleme für uns gelöst.
00:10:51Wir ziehen also verschiedene Ressourcen heran,
00:10:54die eigentlich gar nichts mit dem Nano Banana Design Skill zu tun haben,
00:10:57und fügen sie dort ein, damit Claude die nötigen Fähigkeiten genau dort hat, wo sie gebraucht werden.
00:11:00Bei „Progressive Disclosure“ haben wir bereits über zusätzliche Dateien mit Referenzen und Skripten gesprochen.
00:11:06Jetzt gehen wir tiefer in die Referenzen ein – sie sind quasi die domänenspezifische Intelligenz.
00:11:09Und während euer Skill für eine bestimmte Domäne bereit ist,
00:11:12kann er diese kleinen Wissenspakete als separate Komponenten enthalten.
00:11:16In diesen Referenzen haben wir beispielsweise Design-Patterns,
00:11:19Front-End-Ästhetik und Prompting-Regeln aufgelistet.
00:11:21So können wir die Wissensbasis des Skills ständig erweitern, ohne das Kontextfenster zu überlasten.
00:11:26Bisher haben euch alle Tipps gezeigt, wie ihr Claude trainiert, Aufgaben besser zu erledigen.
00:11:31Aber sie sagen euch nicht, wie ihr es wirklich richtig einsetzt.
00:11:33Dafür haben wir ein weiteres Video, in dem wir euch die 10 aktuellsten Wege zeigen,
00:11:36um mit Claude Code einen echten Vorteil zu erlangen.
00:11:39Ihr seht das Video gleich im Endscreen,
00:11:41klickt also am besten direkt darauf, statt danach zu suchen.
00:11:43Damit sind wir am Ende dieses Videos angelangt.
00:11:45Wenn ihr den Kanal unterstützen und uns helfen wollt, weiterhin solche Videos zu machen,
00:11:49könnt ihr das über den „Super Thanks“-Button unten tun.
00:11:51Wie immer: Danke fürs Zuschauen und wir sehen uns im nächsten Video!