스크립트
00:00:00Ein gutes Design ist extrem wichtig, denn wenn man Kunden will, ist die Optik das Erste,
00:00:05was beurteilt wird. Es gibt viele Tools, die dabei helfen, und Claude Design gehört aktuell zu den
00:00:09stärksten. Ein gutes Design entsteht jedoch nicht allein durch einfache Prompts. Daher gehen wir
00:00:14in diesem Video einen fünfstufigen Prozess durch, den ihr selbst mit Claude Design
00:00:18ausführen könnt. Ganz egal, ob ihr Claude Design noch nie geöffnet habt oder es schon seit Monaten nutzt,
00:00:22hier ist für jeden etwas dabei. Falls ihr es noch nie geöffnet habt, macht das gar nichts, da wir
00:00:27bei den Grundlagen anfangen. Und wenn ihr bereits damit designt habt, zeigen wir, wie man Claude Design
00:00:32mit Claude Code kombiniert, um es noch viel mächtiger zu machen. Nutzt also die Timestamps unten, um direkt dorthin zu springen.
00:00:37Falls ihr neu auf dem Kanal seid, erst einmal willkommen. Wir sind tatsächlich ein Softwareunternehmen und haben
00:00:41basierend auf unseren internen Prozessen ein vollständiges System rund um Claude Design für euch entwickelt. Ohne weitere
00:00:47Zeit zu verlieren, steigen wir direkt ins Video ein. Dieser Abschnitt ist nur für diejenigen gedacht, die nicht wissen, was Claude Design ist.
00:00:52Wenn ihr es also schon kennt, könnt ihr zum nächsten springen. Es erschien zuerst als Research Preview,
00:00:57als Claude ihr Modell Opus 4.7 veröffentlichte. Im Grunde ist es ein Design-Tool mit einer sehr benutzerfreundlichen
00:01:02Oberfläche, die es jedem – selbst Personen ohne technische Vorkenntnisse – ermöglicht, durch einfache Prompts gute Designs zu erstellen.
00:01:07Und es ist in allen kostenpflichtigen Tarifen verfügbar. Es hört auch nicht bei Websites auf: Man kann damit
00:01:12auch Präsentationen, Dokumente und sogar Animationen gestalten. Zudem ist Claude Design
00:01:17sowohl in der Claude Desktop-App als auch auf der Claude-Website verfügbar. Man muss die Desktop-App also nicht zwingend installieren.
00:01:22Wer sie nutzen möchte, lädt sie einfach herunter, führt die Installation aus und meldet sich im Konto an.
00:01:27Dann öffnet man die Seitenleiste, klickt auf Design, und die Oberfläche öffnet sich, sodass man loslegen kann.
00:01:32Claude Design bietet alle Claude-Modelle zur Auswahl, sogar Fable, das leistungsstärkste Modell,
00:01:37wobei der Zugriff darauf allerdings begrenzt ist. Das Aushängeschild für die allgemeine Nutzung ist nach wie vor Opus,
00:01:42und es eignet sich nach wie vor am besten zum Gestalten. Das Problem bei diesen Opus-Modellen ist jedoch, dass sie
00:01:46enorm viele Token verbrauchen. Haiku hingegen verbraucht bei Weitem nicht so viele, erfordert aber eventuell mehr
00:01:51Feinschliff, um ein gutes Design zu erhalten. Darüber hinaus lässt sich für jedes Modell auch
00:01:55die Aufwandsebene einstellen. Die Aufwandsebene steuert im Wesentlichen, wie intensiv das Modell nachdenkt, bevor es etwas tut. Wir verwenden
00:02:01Opus 5, das derzeit neueste Modell, mit mittlerem Aufwand für unsere Designaufgaben, weil wir damit
00:02:06unkompliziert designen können, ohne zu viele Token zu verschwenden. Außerdem lassen sich sämtliche MCPs und Skills einbinden,
00:02:12was es wesentlich einfacher macht, das eigene System direkt darin zu nutzen. Zur Erklärung: MCPs sind im Grunde dafür da,
00:02:18dass sich ein Agent mit externen Dingen verbindet, wie anderen Tools und Diensten, während Skills
00:02:23Anweisungssammlungen sind, die dem Agenten beibringen, eine Aufgabe durch Schritt-für-Schritt-Anleitungen und Referenzen besser zu erledigen.
00:02:28Bevor ihr startet, solltet ihr jedoch eine Sache beachten: Es gibt ein Limit für die Anzahl an Designs,
00:02:33die ihr erstellen könnt. Claude Design unterliegt einem Fünf-Stunden-Limit, das sich allerdings nicht nur auf eure Designs bezieht. Alles andere,
00:02:38was ihr auf Claude macht, zählt dazu. Innerhalb dieses Fünf-Stunden-Fensters gibt es eine Obergrenze für die verbrauchbaren Token,
00:02:44und sobald diese aufgebraucht ist, müsst ihr das Ende dieser fünf Stunden abwarten, bevor ihr es wieder
00:02:49verwenden könnt. Und obwohl es viel besser geworden ist als bei seiner Einführung, ist Claude Design
00:02:53nach wie vor sehr token-hungrig. Wer es also intensiv nutzt, muss damit rechnen, dass das Limit schneller erreicht ist.
00:02:59Um diesem hohen Token-Verbrauch entgegenzuwirken, müsst ihr einige Schritte ausführen, bevor ihr direkt zu den Prompts übergeht.
00:03:04Diese Schritte sind wichtig, da sie sicherstellen, dass ihr das gewünschte Design ohne große Verschwendung
00:03:09von Token erhaltet. Als Erstes müsst ihr die Datei design.md erstellen. Das ist ein Format,
00:03:15das von Google ins Leben gerufen wurde und alle Details zum Design eurer Marke enthält. Euer KI-Coding-Agent liest diese Datei,
00:03:20bevor er irgendetwas schreibt, sodass jeder Bildschirm, den er ausgibt, perfekt zum Markenauftritt passt. Er muss niemals raten,
00:03:25weshalb er auch nie vom Corporate Design abweicht. Nun bietet Claude Design eine Funktion zum Erstellen von Design-Systemen.
00:03:30Ein Design-System ist im Grunde eine Sammlung von Stilvorgaben, die auf eurer gesamten Website auftauchen. Es umfasst eure Schriften,
00:03:35eure Farben und alle weiteren Details eures Designs und ermöglicht es euch, darauf aufbauend weitere Designs zu erstellen.
00:03:40Alle mit einem Design-System erstellten Designs folgen somit demselben Stil und wirken wie Teil derselben Website.
00:03:46Der Hauptgrund, warum man mit einer vordefinierten design.md beginnen sollte, ist jedoch, dass alle diese Modelle
00:03:51identisch aussehende Designs ausgeben. Überlässt man den Aufbau des Design-Systems Claude Design ganz alleine,
00:03:57greift es auf die generischen Farben und Stile zurück, die Opus-Modelle überall verwenden,
00:04:02wodurch eure Website am Ende genau wie jede andere KI-generierte Seite aussieht. Übergebt ihr jedoch
00:04:07eine design.md als Grundlage für das Design-System, teilt diese Datei genau mit, was ihr wollt. Das Ganze ist also
00:04:12viel kontrollierter und greift nicht auf diese Standardwerte zurück. Wie bereits erwähnt,
00:04:17ist der andere Aspekt die Konsistenz. Da das gesamte Design-System auf dieser einen Datei beruht, folgt jede Seite
00:04:22exakt demselben Stil, wodurch eure mehrseitige Website einheitlich wirkt. Dafür haben wir einen Skill erstellt,
00:04:27der die design.md für euch plant. Dieser Skill wird in Claude Code ausgeführt. Claude
00:04:33Code ist im Grunde ein weiteres Tool von Anthropic – ein KI-Programmier-Tool für das Terminal,
00:04:39das komplette Apps für euch erstellen kann. Zur Installation ruft ihr einfach deren offizielle Website auf, kopiert den Installationsbefehl
00:04:45und führt diesen im Terminal aus. Danach tippt man claude ins Terminal
00:04:49und kann es durch Eingabe eines Prompts verwenden. Da wir die App in Claude
00:04:54Code bauen wollten, haben wir diesen Skill einfach in den Ordner skills innerhalb des Ordners .claude abgelegt,
00:04:59wo sich im Wesentlichen alle Einstellungen und Konfigurationen von Claude Code befinden. Diesen Ordner habt ihr wahrscheinlich noch nicht, aber ihr könnt
00:05:05Claude Code einfach im Eingabefeld sagen, dass ihr Skills im Projekt installieren müsst, woraufhin es alles
00:05:10von selbst einrichtet und den Skill dort platziert. Der Ordner .claude ist beim Öffnen im Finder
00:05:15nicht sichtbar, da sein Name mit einem Punkt beginnt. Dateien mit führendem Punkt werden als
00:05:20Systemdateien behandelt und vom Finder standardmäßig ausgeblendet. Um dorthin zu gelangen, benötigt man einen Code-Editor,
00:05:25also eine App, mit der man alle Projektdateien an einem übersichtlichen Ort einsehen kann. Wir verwenden
00:05:31VS Code von Microsoft, das von den meisten Entwicklern wegen seiner einfachen Handhabung bevorzugt wird.
00:05:36Zur Installation geht man auf deren offizielle Website, lädt das Installationsprogramm für das jeweilige Betriebssystem
00:05:40herunter und führt die Installation aus. Danach öffnet man darin einfach den Projektordner und sieht
00:05:45alles, einschließlich der versteckten Dateien. Wenn man dann eine App bauen möchte, ruft man einfach
00:05:49diesen Skill über seinen Slash-Befehl auf – eine Tastenkombination beginnend mit einem Schrägstrich,
00:05:54um ihn zu aktivieren, gefolgt von einem Prompt mit dem Bauwunsch. Er befragt euch und plant die
00:05:59visuelle Identität des Produkts detailliert mit euch durch. Sobald alles vorliegt, schreibt er
00:06:03die gesamte design.md und validiert diese durch Ausführen von Skripten gegen die Standards von Google. Dieser Skill
00:06:09enthält außerdem Anti-Slop-Referenzen, welche alle gängigen Muster abdecken, die eine Website als KI-generiert entlarven.
00:06:15Das Vorab-Planen einer design.md ist also wirklich die beste Wahl. Falls ihr euch fragt, wo man
00:06:21diesen Skill bekommt: Keine Sorge, das verraten wir euch später im Video. Die App, die wir in diesem Video bauen,
00:06:26ist eine Projektmanagement-App, in der man all seine Programmierprojekte an einem Ort verwaltet. Um zu starten,
00:06:31gibt man Claude Code zunächst einen Prompt mit dem Slash-Befehl für den Skill, beschreibt die zu bauende App
00:06:36in groben Zügen und nennt ihren Verwendungszweck. Daraufhin wird als Erstes die visuelle Identität
00:06:41eurer Idee analysiert. Danach beginnt das Tool, euch Fragen zu stellen, zum Beispiel ob ihr bereits
00:06:46eine bestimmte Farbe für eure Website im Kopf habt. Wenn eure Markenfarben bereits feststehen, könnt ihr sie angeben
00:06:51oder das Tool selbst wählen lassen. Da ihr den Skill nutzt, greift es nicht auf generische Standardfarben zurück,
00:06:55sodass ihr diesen typischen Look nicht befürchten müsst. Dennoch ist es besser, sie im Vorfeld
00:07:00festzulegen. Normalerweise nutzen wir Coolors – eine Website zum Generieren und Visualisieren
00:07:05von Farbpaletten –, um zu sehen, wie die Farben miteinander harmonieren. Habt ihr eine Farbkombination gefunden,
00:07:09die euch gefällt, könnt ihr auf Exportieren klicken, die Code-Option wählen und erhaltet einen Text,
00:07:14den ihr einfach kopieren und in Claude Code einfügen könnt. Claude Code fügt das Ganze
00:07:18dann automatisch in eure design.md ein. Anschließend wird die design.md erstellt und einige
00:07:24Verifizierungsschritte werden ausgeführt. Die Designdatei entspricht dabei exakt dem von Google vorgegebenen Format.
00:07:29Dieses Google-Format ist zwar leicht für das KI-Modell zu verstehen, aber für euch ist es schwierig, euch
00:07:33die daraus generierten Designs bildlich vorzustellen. Daher könnt ihr nicht direkt beurteilen, ob es euren Vorstellungen entspricht
00:07:38oder geändert werden muss. Testet das jedoch nicht in Claude Design. Ihr generiert eure Designs dort,
00:07:43und nehmen wir an, sie gefallen euch nicht. Dann müsst ihr zurück in die design.md gehen,
00:07:48Änderungen vornehmen und alles erneut generieren. Jeder dieser Durchläufe kostet Token. Es gibt jedoch viele
00:07:53Tools, die eine design.md für euch visualisieren; eines davon, das wir verwendet haben, ist design.md.space.
00:07:59Dort seht ihr, wie eure Designdatei aussieht und wie die für verschiedene Bereiche ausgewählten Farben
00:08:04zusammenwirken. Zudem werden alle Elemente visualisiert, was Entscheidungen deutlich erleichtert. Das ist
00:08:10nur ein Weg, um eine design.md zu erstellen, aber es gibt noch weitere. Wer keine eigene erstellen möchte,
00:08:15kann einfach das Design einer beliebigen Website als Muster kopieren. Das Kopieren als Vorlage
00:08:19wird ohnehin von vielen so gemacht. Man nimmt es als Ausgangspunkt und passt es an,
00:08:24genau wie viele den schlichten Look von Notion übernommen und nach einigen Anpassungen für ihre
00:08:29eigenen Designs genutzt haben. Dafür gibt es eine Website namens getdesign.md, die zahlreiche
00:08:34viele Marken und deren Stile als design.md-Dateien auflistet, die du dir herunterladen kannst. Da wir
00:08:39bereits unsere eigene design.md haben, können wir mit Claude Design fortfahren und ein neues
00:08:44Design-System daraus erstellen. Wenn du ein neues erstellst, wird nach Produktdetails gefragt. Da du aber
00:08:49eine design.md hast, lädst du diese einfach als Asset hoch. Danach beginnt die Generierung des neuen Systems,
00:08:55indem die Datei gelesen, To-Dos erstellt und diese nacheinander abgearbeitet werden. Nach kurzer Zeit erstellt
00:09:00Claude Design das Design-System, visualisiert alles für dich und baut die verschiedenen Elemente auf,
00:09:06die Teil der App sein werden. Damit du diesem Arbeitsablauf folgen kannst, benötigst du diesen
00:09:10Skill. Wir haben ihn auf GitHub hochgeladen und in der Beschreibung verlinkt, sodass du ihn kostenlos erhältst.
00:09:14Um ihn zu nutzen, gibst du diesen Link einfach Claude Code und sagst ihm, er soll ihn für dich einrichten.
00:09:19Dadurch wird er automatisch installiert und im .claude-Ordner abgelegt, ohne dass du etwas tun musst.
00:09:24Sobald das Design-System steht und es an der Zeit ist, es zu nutzen, gibt es noch einen sehr wichtigen
00:09:29Schritt vor dem eigentlichen Website-Bau: Das Erstellen von Wireframes für das, was du bauen möchtest.
00:09:34Ein Wireframe ist im Grunde eine grobe Skizze, mit der du siehst, wo die Elemente hinmüssen und
00:09:39ob sie richtig platziert sind. Du könntest die Website natürlich auch sofort direkt bauen, aber das führt
00:09:43zu Problemen. Du müsstest lange warten, da Claude Design für die Erstellung etwas braucht, und wenn
00:09:48das Design danach nicht deinen Vorstellungen entspricht, müsstest du alles von vorne machen. Wähle
00:09:53daher in Claude Design das erstellte Design-System aus, nimm die Wireframe-Option und gib einen Prompt
00:09:58mit den Details dazu ein, wie viele Bildschirme du haben möchtest. Anschließend kannst du auch
00:10:03mehrere Optionen für jeden Bildschirm erstellen lassen, damit Claude dir ein paar verschiedene Stile
00:10:08zur Auswahl gibt. Die Generierung dauert nicht lange und du kannst dir die Struktur ansehen und
00:10:12alle Variationen für dieselbe Seite durchgehen. Es gibt auch eine Kommentarfunktion: Um eine Sache zu
00:10:18ändern, hinterlässt du einfach einen Kommentar dazu. Ein Kommentar sendet im Grunde die genauen Details
00:10:23dieses Elements zusammen mit deinem Prompt, sodass Claude genau weiß, welcher Bereich wie geändert werden
00:10:28muss. Das ist viel besser, als nur einen Prompt einzugeben und Claude selbst raten zu lassen, welchen
00:10:33Bereich du meinst. Du wählst einfach das Kommentar-Tool, klickst auf das Element und tippst die Änderung ein.
00:10:38Du kannst so viele Kommentare hinzufügen, wie du brauchst. Du kannst sie einzeln abschicken, aber es ist
00:10:42besser, sie zu bündeln und gesammelt zu senden, damit alles auf einmal gelöst wird. Das hält die Wartezeit
00:10:48auf ein Minimum. Passe es einfach so lange an, bis dir die Struktur gefällt, und gehe dann zum nächsten
00:10:52Schritt über. Wenn dir das Video bis hierhin gefallen hat, abonniere den Kanal und klicke auf den Daumen
00:10:57nach oben. Diese kleine Geste der Unterstützung hilft uns sehr. Nach dem Wireframe kommt das eigentliche
00:11:03Design an die Reihe. Du kannst auch das Design nutzen, um ein paar Variationen zu erstellen.
00:11:06Da du Claude meistens bittest, mehrere Varianten zu erstellen, wählst du zuerst die gewünschte aus.
00:11:10Jede dieser Seiten ist durch eine Code-Nummer gekennzeichnet, sodass du sie darüber auswählen kannst.
00:11:15Danach gibst du ihm einen Prompt, in dem du sagst, dass diese Bildschirme in das vollständige,
00:11:20detaillierte Design umgewandelt werden sollen, und bittest darum, Layout und Struktur beizubehalten.
00:11:26Claude Design liest dann alle Elemente ein, die während des Design-Systems erstellt wurden.
00:11:31Mithilfe dieser Elemente baut es die gesamte Website auf, sodass sie exakt dem System und Wireframe entspricht.
00:11:36Genau wie beim Wireframe kannst du auch hier Kommentare nutzen, um Dinge anzupassen und zu korrigieren.
00:11:41Du wirst wahrscheinlich viele Änderungen brauchen, da Farben für Buttons manchmal nicht optimal gewählt werden.
00:11:46Manche Schaltflächen müssen Aufmerksamkeit erregen und sollten eine kräftige Farbe haben, damit sie auffallen.
00:11:50Da es auf dem Wireframe aufbaut, wirkt die Website anfangs etwas leer und zeigt nur die Grundelemente.
00:11:55Du kannst also fragen, ob Texturen und weitere Elemente für einen vollständigeren Look hinzugefügt werden.
00:12:00Du kannst Bearbeitungen auch direkt am Design vornehmen. Bei kleineren Änderungen wie dem Löschen
00:12:05eines Elements geht das direkt im Design, ohne dass du dafür extra Claude prompten musst.
00:12:10So wird die Änderung übernommen, ohne dass du warten musst oder Tokens für eine Kleinigkeit verschwendest.
00:12:15Wenn du fertig bist, kannst du Claude Design bitten, den Gesamtlook zu polieren, woraufhin es
00:12:20subtile, sinnvolle Anpassungen vornimmt. Damit ist die erste Version der App im Grunde fertig,
00:12:25aber es fehlt noch etwas: die Animationen. Diese sind wichtig, weil sie die Bedienung angenehmer
00:12:29machen und den Blick auf das Wesentliche lenken. Elemente wie Einblendungen beim Scrollen
00:12:35oder andere kleine Details lassen die Website lebendiger wirken. Dafür haben wir Claude Design
00:12:40den Befehl gegeben, Animationen für alle Bildschirme hinzuzufügen, wie etwa beim Scrollen in den Viewport.
00:12:45Wir haben ihm gesagt, sie dezent zu halten und nichts zu federnd zu machen, da das unnatürlich wirken kann.
00:12:50Sobald Claude Design fertig war, sah man die Animationen, die die gesamte Seite interaktiver wirken ließen.
00:12:55Wenn du mit dem Design zufrieden bist, kannst du zum nächsten Schritt übergehen: der Übergabe.
00:13:00Das Design in Claude Design ist nun abgeschlossen, und es wird Zeit, es in ein echtes Produkt zu verwandeln.
00:13:05Früher ging das in Claude Design nicht, aber jetzt kannst du deine Designs direkt nach Claude Code exportieren.
00:13:10Dazu wird das Claude Design MCP genutzt, welches die Kommunikation zwischen Claude Design und Claude Code ermöglicht.
00:13:15Das Ganze funktioniert sogar in beide Richtungen: Du kannst Designs von Claude Design zu Claude Code bewegen und umgekehrt.
00:13:21Du öffnest Claude Code erneut und fügst diesen Prompt ein, den du aus Claude Design erhalten hast.
00:13:26Es liest zuerst die Metadaten – also die Zusammenfassungs-Infos zum Design – und listet dann die Projektdateien auf.
00:13:31Zuerst wird das Design-System gelesen, da dort das Design definiert ist, und danach alle Elemente nacheinander.
00:13:36Sobald das gesamte Design vorliegt, baut es das Projekt mit allen Animationen auf, die aus Claude Design bekannt sind.
00:13:42Wir mussten diese Konvertierung jedoch überprüfen, um sicherzugehen, dass alles korrekt abgelaufen ist.
00:13:47Optisch sah alles gut aus, aber bei der Umwandlung von Rohcode aus Claude Design in eine echte App
00:13:52kann es interne Probleme geben. Wir baten daher um ein tiefgehendes Review und prüften die design.md
00:13:57gegen das tatsächliche Ergebnis. Dabei wurden mehrere Probleme aufgedeckt, wie zum Beispiel
00:14:02Responsivitätsschwierigkeiten – das bedeutet einfach, dass die App auf verschiedenen Bildschirmgrößen
00:14:08wie Handys oder Tablets nicht optimal aussah. Von Claude Design erstellte Entwürfe neigen dazu,
00:14:12da dies noch eine frühe Version ist. Ein für Websites gemachtes Design sieht dort toll aus, aber
00:14:17nicht zwingend auf anderen Bildschirmgrößen. Wir haben die Korrekturen durchgeführt, und danach
00:14:22lief der visuelle Teil der App einwandfrei und responsiv. Um die App nun funktionsfähig zu machen,
00:14:27mussten wir sie mit einer sogenannten Datenbank verbinden. Das Problem im Moment ist nämlich,
00:14:32dass die App zwar voll funktionsfähig ist und beim Klick auf Buttons Details zu einem neuen Projekt
00:14:36hinzuzufügen scheinen, aber beim erneuten Öffnen sämtlicher Fortschritt wieder verschwunden ist.
00:14:41Aus diesem Grund brauchen wir eine Datenbank, damit alle Daten in der App gespeichert werden und
00:14:46Nutzer sie tatsächlich verwenden können. Dafür haben wir Supabase genutzt – einen der beliebtesten
00:14:51Backend-Provider auf dem Markt und eine der besten Möglichkeiten, Benutzer und sämtliche Daten zu verwalten.
00:14:57Supabase ist für uns nichts Neues. Wir verwenden es in fast jeder App, die wir bauen, egal für wen,
00:15:02und selbst viele unserer internen Tools basieren vollständig darauf. Das liegt daran, dass es uns viel
00:15:08Arbeit abnimmt, die wir sonst manuell erledigen müssten. Es ist zudem eine der am häufigsten
00:15:12genutzten Datenbanken, allein wegen der einfachen Anbindung an KI-Agenten wie Claude Code.
00:15:17Supabase besitzt ebenfalls einen Agenten-Skill, der Anweisungen, Skripte und Ressourcen enthält,
00:15:22damit der Agent zuverlässiger mit Supabase arbeiten kann. So weiß er alles Notwendige, um das
00:15:28Maximum aus den Tools herauszuholen. Zur Installation kopierst du einfach den Installationsbefehl
00:15:33und übergibst ihn dem Agenten. In diesem Paket befinden sich zwei Skills: Einerseits der Supabase-Skill,
00:15:39der im Grunde eine Anleitung zur Nutzung darstellt, und andererseits der Best-Practices-Skill,
00:15:43welcher die besten Methoden zur Leistungsoptimierung deiner App bereithält. Nach Abschluss der
00:15:48Installation siehst du beide neuen Skills in deinem Projekt. Der Supabase-Skill wird ausgelöst,
00:15:53sobald eine Datenbank- oder Login-Aufgabe ansteht, und der Best-Practices-Skill greift, wenn du
00:15:58Claude Code bittest, die App schneller zu machen, indem du die Worte „optimize performance“ im Prompt nutzt.
00:16:04Das Ganze wird durch eine riesige Referenzbibliothek für alle möglichen Probleme gestützt.
00:16:08Sobald diese Skills installiert sind, kannst du Claude Code anweisen, das Backend zu bauen und
00:16:13das bestehende Design anzubinden, damit die gesamte App schließlich funktioniert.
00:16:18Da wir nicht wollten, dass der Agent an der Struktur der Datenorganisation arbeitet, hatten wir diese
00:16:22bereits im Voraus selbst erstellt und im Hauptordner des Projekts abgelegt.
00:16:27Da der Skill lediglich ein Bündel von Anweisungen ist, kann er nicht auf dein Projekt auf den
00:16:32Supabase-Servern zugreifen und dort Änderungen vornehmen. Es ist reiner Text, der dem Agenten sagt, was
00:16:36zu tun ist, und enthält keine Tools für Dinge außerhalb des Agenten. Deshalb fordert dich der
00:16:41Supabase-Skill auf, entweder ihre CLI zu verbinden – das ist das Tool, das du vom Terminal aus ausführst –
00:16:46oder das MCP. Beide geben dem Agenten die Werkzeuge an die Hand, direkt an deinem Supabase-Projekt
00:16:51zu arbeiten, sodass du nichts manuell machen musst. Wir haben uns für das MCP entschieden, da es einfacher
00:16:56einzurichten ist und wir uns nicht mit den Schlüsseln herumschlagen mussten, mit denen sich die CLI
00:17:01in deinem Konto anmeldet. Für die Verbindung gehst du auf ihre offizielle Website, kopierst den
00:17:05und führst ihn im Terminal aus, das in deinem Projektordner geöffnet ist. Danach gibst du den Befehl /mcp ein
00:17:10in ClaudeCode ein und siehst, dass er verbunden ist, aber du kannst ihn nicht sofort nutzen, da er
00:17:15aber du kannst es nicht sofort nutzen, da du nicht eingeloggt bist. Sobald du Authenticate auswählst,
00:17:20wirst du zum Browser weitergeleitet, um dich einzuloggen, und danach wird das MCP verbunden.
00:17:25Sobald das MCP aktiv war, lud Claude Code den Skill und machte sich an die Arbeit an der App.
00:17:30Es nahm viele Änderungen vor und führte Tests für diese Datenbankanfragen aus, um sicherzustellen,
00:17:34dass die beste Version entsteht. Dank der Richtlinien im Skill wurden zudem alle Bereiche abgesichert,
00:17:39die nicht für jeden Nutzer zugänglich sein sollten. Auf diese Weise übernimmt Supabase das komplette
00:17:44Backend für dich, und das alles über den Skill. Nun ist die gesamte App gebaut und funktioniert.
00:17:49Es bleibt nur noch ein Schritt: das Deployment, also das Online-Stellen, damit jeder da draußen
00:17:53sie nutzen kann. Darauf gehen wir hier jedoch nicht ein – halte also Ausschau nach kommenden Videos,
00:17:59in denen wir das im Detail besprechen. Der bereitgestellte Skill ist übrigens Teil eines größeren
00:18:04Design-Systems, das wir intern in unseren Projekten nutzen. Wenn du Zugriff darauf möchtest,
00:18:08erhältst du ihn in AI Labs Pro, unserer Community. Dort findest du auch andere Skills und Ressourcen,
00:18:14die wir in unseren Videos zeigen, sowie einen Ort, um mit unserem Team zu interagieren.
00:18:18Wenn du unsere Arbeit schätzt und den Kanal unterstützen willst, ist dies der beste Weg dazu.
00:18:23Der Link steht in der Beschreibung. Damit sind wir am Ende dieses Videos angelangt. Wenn du den Kanal
00:18:28unterstützen möchtest, kannst du das über den Super-Thanks-Button tun. Danke fürs Zuschauen!
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기