Dieses Open-Source-Repo hat gerade das Claude-Design geklont (es ist GUT)
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Claude Design muss das großartigste Tool sein, das ich je benutzt habe.
00:00:02Das ist eigentlich völlig unbrauchbar.
00:00:05Obwohl ich Anthropic 200 Dollar im Monat für ihren 20x-Plan zahle.
00:00:10Ich erreiche die wöchentlichen Nutzungslimits bei Claude Design in weniger als einer Stunde.
00:00:14Das ist mehr als frustrierend, aber zum Glück für dich und mich
00:00:17gibt es Hoffnung, denn ein brandneues Open-Source-Repo wurde gerade
00:00:22veröffentlicht,
00:00:23das im Grunde Claude Design klont und es einfach in eine Fähigkeit verwandelt, die wir nutzen können.
00:00:28Es heißt Huashu Design und basiert auf denselben System-Prompts,
00:00:32die Claude Design verwendet.
00:00:33Und heute werden wir es in einem direkten Test gegen Claude Design antreten lassen,
00:00:37um zu sehen, ob dieses Ding tatsächlich unsere Zeit wert ist. Denn wenn es das ist,
00:00:41haben wir vielleicht einen Ausweg aus dem Nutzungskäfig von Claude Design.
00:00:45Huashu Design löst das Problem, dass Claude Design zwar ein tolles Tool ist,
00:00:50man es aber wirklich nicht länger als eine Stunde nutzen kann, bevor man auf Nutzungs-
00:00:54limits stößt.
00:00:55Sie haben also alle System-Prompts und Design-Philosophien von
00:00:58Claude Design genommen und sie in ein Open-Source-GitHub-Repo verwandelt,
00:01:02das im Grunde nur eine Fähigkeit ist, die wir in Claude Code oder Codex oder
00:01:07eigentlich jeden Coding-Agenten laden können, genau wie Claude Design.
00:01:10Es kann interaktive Prototypen für Web- oder Mobile-Apps erstellen.
00:01:13Wir können Präsentationen, Motion Design, Infografiken und vieles mehr machen.
00:01:17Und es ist in der Lage, all dies mit nur einer Fähigkeit zu tun, weil unter der Haube
00:01:21tatsächlich viel passiert. Zum Beispiel
00:01:24hat es Zugriff auf 20 Deep-Dive-Markdown-Dateien, die erklären, was man bei Präsentationen,
00:01:28verschiedenen Designstilen und Animations-Best-Practices tun muss.
00:01:31Obwohl es an der Oberfläche eine Fähigkeit ist,
00:01:33hat es so ziemlich Zugriff auf 20 Minifähigkeiten.
00:01:35Es hat auch Zugriff auf eine Reihe von Komponenten, Medien und Assets, auf die es
00:01:40zugreifen kann, wenn es Dinge für dich entwirft.
00:01:42Und es verfügt über eine komplette ausführbare Toolchain.
00:01:44Das gibt ihm die Fähigkeit, eine HTML-Datei zu nehmen und sie in MP4 umzuwandeln oder
00:01:50Playwright zu verwenden, um sicherzustellen, dass das, was es für dich auf
00:01:53dem Papier entworfen hat, auch in der Realität funktioniert. Und genau wie bei Claude Design
00:01:56können wir verschiedene Variationen sehen. Wir haben das vollständige Optimierungssystem.
00:02:00Und das Beste ist: Da es eine Fähigkeit ist, wenn ich mich innerhalb von Claude Code befinde,
00:02:05basiert es auf dieser Nutzung, egal ob ich Pro 5x oder 20x bin,
00:02:08ich bin nicht durch dieses scheinbar willkürliche Claude
00:02:13Design-Nutzungslimit eingeschränkt, aber lassen Sie uns es tatsächlich testen.
00:02:16Was wir also tun werden, ist zu sehen, wie gut dieses Ding tatsächlich
00:02:18funktioniert, wenn es darum geht, eine Landingpage von Grund auf zu entwerfen.
00:02:22Dann werden wir uns ansehen, wie es so ziemlich das Gleiche tut,
00:02:24aber wenn wir ihm Assets geben, auf denen es aufbauen kann, ähnlich wie bei Claude Designs Designsystem,
00:02:29und dann werden wir sehen, wie gut es sich bei Präsentationen schlägt, und auf dem Weg dorthin
00:02:33werden wir es direkt mit Claude Design vergleichen.
00:02:36So können wir sehen, ob sich das tatsächlich lohnt. Aber bevor wir das tun,
00:02:39ein kurzes Wort von jedermanns Lieblingssponsor: mir. Erst letzten Monat
00:02:43habe ich die Claude Code Masterclass herausgebracht und sie ist der beste Weg,
00:02:46um vom Anfänger zum KI-Entwickler zu werden, besonders wenn man keinen technischen Hintergrund hat.
00:02:51Ich aktualisiere diesen Kurs jede einzelne Woche.
00:02:53Und ich habe gerade die Claude Code Agentic iOS Module herausgebracht.
00:02:56Wenn du also jemand bist, der lernen möchte, wie man dieses Tool am besten nutzt,
00:03:01dann musst du es dir ansehen. Du kannst es dir innerhalb von Chase AI holen.
00:03:04Außerdem wird es einen Link dazu im angepinnten Kommentar geben. Also, fangen wir an.
00:03:08Also, der Prompt, den ich Claude Code gebe,
00:03:09und er wird diese Huashu-Design-Fähigkeit durchgehend verwenden, ist: Verwende die
00:03:13Design-Fähigkeit, um eine Landingpage für mein fiktives SaaS-Produkt Lighthouse zu erstellen,
00:03:17und stelle alle Fragen, die du brauchst, bevor wir beginnen. Nun,
00:03:21ich habe genau denselben Prompt auch Claude Design gegeben.
00:03:24Also kommt Huashu zurück mit sechs Fragen: Was macht Lighthouse, Ziel-
00:03:29käufer, Vibe, benötigte Sektionen, Variationen. Und weißt du,
00:03:34soll es einfach fiktive Inhalte erstellen oder habe ich Texte?
00:03:37Es sollte Claude Design verwenden, es hatte ähnliche Fragen,
00:03:40obwohl es ein wenig tiefer geht und offensichtlich aufgrund seiner grafischen Natur
00:03:44gibt es mir einige Dinge, aus denen ich tatsächlich wählen kann, im Hinblick auf die visuelle Richtung,
00:03:48die ich tatsächlich sehen kann. Also sage ich Huashu:
00:03:50Lass uns einen Analyse-Ansatz wählen. Wir zielen auf den Solo-Entwickler ab.
00:03:54Ich sagte, ich möchte mehrere Vibes und Stile sehen,
00:03:57und auf diese Weise kann ich die Varianten tatsächlich vergleichen.
00:03:59Und ich möchte auch, dass es den Text von selbst erstellt. Und für Claude Design
00:04:02habe ich so ziemlich das Gleiche gesagt und dass ich auch drei Varianten wollte, die ich
00:04:05nebeneinander betrachten könnte.
00:04:06Also hier ist, was Claude Design im Vergleich zu dem, was Huashu sich ausgedacht hat, entworfen hat.
00:04:11Und ich werde meine Kamera ausschalten, damit wir uns das besser ansehen können.
00:04:16Schauen wir uns also an, was Huashu auf eine Seite gestellt hat.
00:04:19Wir hätten drei separate Seiten machen müssen,
00:04:22aber das lässt uns alles auf einmal sehen. Nun, eigentlich nehme ich das zurück.
00:04:25Wir haben oben rechts die Möglichkeit, alle drei zu durchsuchen.
00:04:29Also das haben wir mit dieser Fähigkeit bekommen.
00:04:31Also diese Ledger-Variante sieht tatsächlich ziemlich cool aus. Weißt du,
00:04:35sie liefert uns die ganze Webseite. Wir haben die Terminal-Varianten,
00:04:40ähnlich wie die Papierversion.
00:04:44Und dann kann ich alle drei auf einmal sehen. Und ehrlich gesagt, auf Anhieb ziemlich gut.
00:04:49Das ist weitaus besser, als wenn wir nur Claude Code alleine verwenden würden.
00:04:52Wir haben sogar mit der Front-End-Design-Fähigkeit gesagt: Hey, großartig,
00:04:55drei Varianten, ziemlich solide. Und jetzt schauen wir uns Claude Design an. Bemerkenswert:
00:04:59Design gab uns die Optimierungen direkt von Anfang an. Wir schauen uns das jetzt nicht an,
00:05:03aber hier ist die Terminal-Version, weißt du,
00:05:07sie geht alles durch. Editorial, wieder,
00:05:11ziemlich ähnlich wie die redaktionelle dort drüben.
00:05:15Sehr, sehr ähnlich, räumlich.
00:05:19Das ist sehr scheußlich. Das versprüht definitiv diese typischen
00:05:24KI-Slot-Vibes. Ich denke, das hat viel mit dem Gradienten zu tun.
00:05:28Und dann kann ich alle drei vergleichen. Nun,
00:05:32was ich möchte, dass du jetzt tust, ist nicht zu denken: Oh,
00:05:34eines sieht im luftleeren Raum unbedingt besser aus als das andere, sondern wirklich nur zu sehen, wie
00:05:37nah diese Fähigkeit, die wir hier sehen, an Design heranreicht. Sehr,
00:05:42sehr ähnlich, was ein riesiger Daumen nach oben für Huashus Fähigkeit ist.
00:05:46Was ich jetzt gerne tue, nachdem ich diese Makro-Varianten gesehen habe, ist, mich auf eine
00:05:51bestimmte zu konzentrieren, die mir gefällt, und dann damit zu beginnen, Optimierungen dafür vorzunehmen.
00:05:54Um es einigermaßen ähnlich zu halten, damit wir einen besseren Vergleich haben,
00:05:59werde ich die redaktionelle Variante von Design wählen,
00:06:03die hier in der Fähigkeit als Ledger-Variante bekannt ist.
00:06:06Und wir werden sehen, wie gut sie die Optimierungen umsetzen. Nun, bei Claude Design,
00:06:09die Optimierungen sind bereits da. Also für das Editorial,
00:06:11können wir zwischen hell und dunkel wechseln. Ich kann den Akzent ändern.
00:06:15Es gibt mir so ziemlich jede Farbe, die ich mir vorstellen kann, was ziemlich cool ist.
00:06:18Ich kann die eigentliche Schlagzeile ändern,
00:06:21aber dann ist es zwischen räumlich und global aufgeteilt.
00:06:25Also werde ich es anweisen, die Optimierungen zu erweitern und es
00:06:29nur für das Editorial zu haben. Und während das passiert,
00:06:31bin ich in Claude Code gehüpft und habe gesagt:
00:06:33Lass uns die Ledger-Variante nehmen und ihr eine aggressive Menge an Optimierungen geben.
00:06:36Damit wir sie an dieser Front vergleichen können.
00:06:38Claude Design hat also eine Menge Optimierungen für uns hinzugefügt. Und bemerkenswert:
00:06:42an diesem Punkt, nur von dem, was du in diesem Video gesehen hast,
00:06:44habe ich bereits etwa 15 % meiner Claude Design-Nutzung verbraucht. Nun,
00:06:49auf der Seite der Fähigkeit
00:06:49haben wir nur 13 % des Kontextfensters einer einzigen Sitzung verbraucht.
00:06:54Also 130 K Tokens, alias nicht einmal 1 % meiner wöchentlichen Nutzung,
00:06:59zugegeben, ich bin auf 20x, aber der Unterschied ist erstaunlich. Obwohl wir wissen sollten,
00:07:03dass dies immer noch an den Optimierungen für diese eine Sache arbeitet.
00:07:05Es ist also ein bisschen langsamer und die Claude Design-Optimierungen funktionieren wie erwartet.
00:07:10Die Optimierungen sind ehrlich gesagt
00:07:12einer meiner Lieblingsteile von Claude Design im Allgemeinen.
00:07:16Ich denke, die Stärke von Claude Design ist nicht unbedingt: Oh,
00:07:20die Designs sind erstaunlich. Und ich denke schon, dass sie einen Schritt voraus sind.
00:07:22Versteh das nicht falsch,
00:07:24aber es ist die Tatsache, dass ich so schnell eine Menge verschiedener
00:07:28Sachen durchgehen und sehen kann, wie sie aussehen, und einfach iterieren, iterieren, iterieren kann.
00:07:31Und eine Sache, die wir hier festhalten wollen, ist: Aufgrund der Art und Weise, wie Claude Design
00:07:36funktioniert,
00:07:36die Fähigkeit, auf bestimmte Dinge wie diese zu klicken und an der
00:07:40Typografie herumzuspielen oder bestimmte Kommentare zu hinterlassen.
00:07:43Das ist nicht wirklich etwas, das wir innerhalb der Design-Fähigkeit tun können.
00:07:47Ich kann sicherlich nicht auf der Design-Fähigkeit zeichnen und sagen: Hey, schau dir das an.
00:07:51Lass uns, weißt du, daran herumbasteln, das ein Stück nach links verschieben,
00:07:54das ein wenig nach rechts verschieben. Diese Art von Dingen.
00:07:57Dafür braucht man ein grafisches Interface,
00:07:58was der Punkt ist, an dem Claude Design offensichtlich die Nase vorn haben wird.
00:08:01Vergleichen wir das also mit den Optimierungen, die wir mit Huashu Design erhalten.
00:08:05Bemerkenswert:
00:08:07Die Optimierungen passen irgendwie zum gleichen Stil wie die Seite selbst.
00:08:10Ich kann die Presets ändern.
00:08:13Ich kann so etwas wie die Display-Familie ändern, ein wenig anderer Dark Mode.
00:08:18Ich kann die Akzente ändern und es sieht so aus, als könnte ich eine Reihe von Dingen wie
00:08:22Layout-Dichte ändern. Haben wir den Trust-Strip?
00:08:26Verschwindet der Trust-Strip? Ja. So etwas in der Art. Also definitiv vergleichbar.
00:08:30Gibt es hier so viele Optimierungen wie in Claude Design? Nein,
00:08:32aber ich bin einfach einen Prompt davon entfernt, mehr zu bekommen.
00:08:34Und ich denke, der große Takeaway hier ist: Claude Code mit dieser Design-Fähigkeit
00:08:38konkurriert definitiv mit dem, was man innerhalb von Claude Design nativ bekommen kann, und
00:08:42die gesamte Token-Nutzung ist an diesem Punkt 170 K, hat im Grunde nichts von
00:08:47meiner wöchentlichen Nutzung verbraucht und ich habe 15 % von Claude Design verbrannt. Also für dieses Beispiel,
00:08:51das rohes Prompting ist, kein Designsystem, keine Assets,
00:08:56sieh selbst, was dabei herauskommen kann. Ich denke, die Fähigkeit hat sich großartig geschlagen.
00:08:59Also lass uns zur nächsten Demo übergehen und sehen, wie gut sie abschneiden kann.
00:09:02Wenn wir ihr tatsächlich etwas zum Aufbauen geben, eine Art Designsystem,
00:09:06eine Art Designbeispiele, und die Fähigkeit auf die Probe stellen,
00:09:10denn ich weiß bereits, dass Claude Design das ziemlich gut kann.
00:09:13Wenn wir uns Claude Design und seine Designsysteme ansehen,
00:09:16macht es einen ziemlich guten Job, in der Lage zu sein, was auch immer wir ihm geben,
00:09:19und das kann einfach eine Codebasis oder ähnliches sein, und eine Tonne an
00:09:23Informationen herauszuziehen, alles von Abständen bis hin zu Komponenten, Anzeigen, Buttons, Hero,
00:09:27all diese Dinge. Wenn ich dieses Designsystem also in Claude Design lade,
00:09:31weiß ich, dass es in der Lage sein wird, das über verschiedene Arten von
00:09:34Ergebnissen hinweg beizubehalten. Zum Beispiel,
00:09:36ist dieses Agentic-OS-Design etwas, das ich in ein Designsystem verwandelt habe.
00:09:39Und während wir es hier als Dashboard innerhalb von Claude Design sehen,
00:09:42ist es sehr einfach, dieses Design-Thema zu replizieren.
00:09:45Wenn du das also zum Beispiel innerhalb einer Präsentation siehst,
00:09:47sieht es so aus, als käme alles von derselben Stelle, und das liegt daran, dass das Claude
00:09:50Design-Designsystem ziemlich mächtig ist. Der Nachteil ist, dass die Erstellung dieser Art von
00:09:55Designsystem etwa 30 % deiner wöchentlichen
00:10:00Nutzung auffrisst.
00:10:00Also habe ich Claude Design gerade angewiesen, diese Lighthouse-Landingpage
00:10:04mit diesem Agentic-OS-Dashboard nachzubauen.
00:10:07Ich sagte dann zu Claude Code so ziemlich das Gleiche:
00:10:11Ich möchte die Ästhetik bzw. das Designsystem verwenden, das zu diesem Dashboard passt.
00:10:14Und dann sagte ich ihm, wo es all diese Informationen innerhalb eines separaten
00:10:18Verzeichnisses oder einer Referenz finden kann. Das ist so ziemlich das, was es als
00:10:22Inspiration für seine Ästhetik verwendet.
00:10:25Also flippt der Sprite hier drüben offensichtlich aus,
00:10:28aber der Rest davon ergibt so ziemlich Sinn. Ähm,
00:10:33es ist hingegangen und hat hier auch ein Dashboard nachgebaut,
00:10:37das diesem sehr ähnlich ist. Ich denke, das sieht ziemlich süß aus.
00:10:41Äh, was die Schriftarten, Farben angeht,
00:10:44alles sehr im Einklang mit dem, was es tun sollte.
00:10:47Die einzige wirkliche Beschwerde, die ich habe, ist der kleine Charakter hier.
00:10:52Ich weiß einfach nicht, was da los ist,
00:10:54aber das ist wahrscheinlich eine relativ einfache Korrektur.
00:10:56Lass uns jetzt sehen, wie sich die Huashu-Fähigkeit als Referenz geschlagen hat.
00:10:59Die Fähigkeit brauchte 11 Minuten und etwa 70.000 Token. Claude Design
00:11:04brauchte etwa drei Minuten, aber es verbrauchte 10 % seiner wöchentlichen Nutzung.
00:11:08Und hier ist, was wir bekommen haben. Ich werde meine Kamera ausschalten, damit wir besser sehen können.
00:11:10Also haben wir ein kleines Claude,
00:11:15ein kleines Icon-Logo-Typchen hier drüben, bemerkenswert.
00:11:18Dieses Logo ist ein kleines bisschen anders als der Sprite da oben,
00:11:22aber hey, es passt. Die Farben und Schriftarten scheinen auf den ersten Blick Sinn zu ergeben.
00:11:26Und wir haben auch unseren kleinen Sprite hier oben neben Lighthouse.
00:11:30Das sieht ziemlich cool aus. Es ist wie ein kleiner Ticker.
00:11:35All diese Dinge kommen einem vom Dashboard her ziemlich bekannt vor,
00:11:40was das allgemeine Design angeht. Das hier fühlt sich ein wenig daneben an.
00:11:43Ich wünschte, dieser Terminal-Abschnitt wäre einfach ein Stück nach oben gerückt,
00:11:47um mit dem hier auf der linken Seite zu zentrieren, aber das ist leicht zu beheben. Und insgesamt,
00:11:51ziemlich gut. Ich würde sagen, mir haben die Claude-Designs ein wenig besser gefallen,
00:11:56vor allem, weil es sein eigenes Dashboard erstellt und dort eingefügt hat.
00:12:00Aber hey, es hat die Design-Sachen erledigt, oder? Es hat die Kriterien erfüllt.
00:12:04Es hat dieselbe Schriftart, dieselben Farben.
00:12:06Es fühlt sich definitiv so an, als käme es aus derselben Designfamilie. Also für diesen Test,
00:12:11denke ich, ist es ein weiterer großer Sieg für diesen Skill, ein großes Daumen hoch. Ja.
00:12:14Hat es ein bisschen länger gedauert? Sicher.
00:12:15Aber es hat im Grunde das Designsystem von alleine erstellt.
00:12:18Es hatte keines vorinstalliert. Ist es so gut wie das Design? Hmm. Vielleicht nicht,
00:12:22aber es kommt ziemlich nah dran und ist unendlich viel günstiger. Also sehr, sehr,
00:12:27sehr beeindruckt. Jetzt kommen wir zu unserem letzten Test, wir sehen uns Präsentationen an.
00:12:29Ich habe Claude Design das bereits erledigen lassen.
00:12:31Und ihr seht euch gerade den ersten Entwurf an.
00:12:33Es verwendet dasselbe Designsystem und spricht über unser fiktives SaaS-Produkt.
00:12:37Also was die Fähigkeit betrifft, beim Design zu bleiben,
00:12:41hat es offensichtlich einen ziemlich guten Job gemacht und all das sieht ziemlich
00:12:46gut aus. Einziger Kritikpunkt: das kleine Sprite hier oben ist ein wenig gestreckt.
00:12:50Aber auch das ist keine schwierige Sache.
00:12:52Was mich hier wirklich beschäftigt, ist: Sieht es cool aus? Das ist ein bisschen cool.
00:12:56Es passt nicht zum Designsystem, wenn es um Claude Design geht. Ja,
00:13:00es konnte das in nur ein paar Minuten erledigen, bei einer Auslastung von 6 Prozent.
00:13:04Jetzt sehen wir uns an, wie Claude Code diesen Skill verwendet.
00:13:07Und hier ist das Ergebnis. Also gleich auf Anhieb sehr an die Website erinnernd.
00:13:11Es konnte es einfach erstellen, hat dasselbe Sprite-Ding,
00:13:15das da oben läuft.
00:13:16Und wir haben unser kleines Claude Code-Logo hier auf der rechten Seite.
00:13:20Das ist also die Titelseite. Nummer zwei,
00:13:23es sieht so aus, als würde sich hier ein Teil des Textes überlagern, aber kein großes Problem.
00:13:27Seite drei sieht gut aus. Folie vier. Das ist hier ein bisschen abgeschnitten,
00:13:32aber das könnte durchaus eine Designentscheidung sein.
00:13:34Ein bisschen Scroll-Text sieht gut aus. Und auf der letzten Folie,
00:13:38haben wir hier wieder ein bisschen Überlappung,
00:13:40aber das sind kleine Probleme, die wir leicht mit einem einzigen Prompt beheben könnten.
00:13:44Also insgesamt, wenn wir diese beiden vergleichen, Design gegenüber dem, was wir mit dem Skill bekommen haben,
00:13:49wieder sehr ähnlich,
00:13:50das sind wirklich drei Dinge hintereinander, die wir getestet haben, bei denen der Skill in der Lage ist,
00:13:54mit dem zu konkurrieren, was wir im Design bekommen.
00:13:56Und ich denke, das ist die große Erkenntnis aus diesem Video.
00:13:58Wir haben jetzt eine Option, Claude Design-Ausgaben zu erhalten, ohne an diese
00:14:03wilden Nutzungslimits gebunden zu sein, was für den Durchschnittsanwender großartig ist.
00:14:07Nun, halte ich Claude Design im Vakuum betrachtet immer noch für besser? Ja, natürlich.
00:14:12Der Skill ahmt einfach alles nach, was Claude Design tut.
00:14:15Und Claude Design hat den Vorteil bei bestimmten Dingen wie Zeichnen, Bearbeiten, Kommentieren,
00:14:19und das gesamte Team dazu bringen zu können, dieses Ding zu nutzen.
00:14:21Also durch die Art seiner grafischen Benutzeroberfläche,
00:14:24kann es Dinge tun, die der Skill niemals leisten können wird. Aber für viele Leute,
00:14:29ist das, was ihr hier gerade gesehen habt, mehr als genug. Und es ist ein riesiger Fortschritt gegenüber,
00:14:34nun ja, zum Beispiel dem Frontend-Design-Skill. Und denkt dran,
00:14:37der Skill kann mehr als nur Webseiten und Präsentationen.
00:14:40Er kann Dinge wie Motion Design, Infografiken und alles Mögliche.
00:14:43Also schaut euch das Ding definitiv mal an. Ihr habt wirklich nichts zu verlieren.
00:14:46Also das ist der Punkt, an dem ich euch für heute verlasse. Ich hoffe, mit diesem Video,
00:14:50konnte ich eurer ständig wachsenden Toolbox ein weiteres Werkzeug hinzufügen. Wie immer,
00:14:54lasst mich wissen, was ihr darüber denkt.
00:14:55Stellt sicher, dass ihr euch Chase AI Plus anschaut, wenn ihr Zugriff auf die Claude
00:14:58Masterclass haben wollt, und wir sehen uns.