NOCH EIN Open-Source-Repo hat das Claude-Design geklont
CChase AI
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Leute, ein zweiter Klon von Claude Design ist gerade auf GitHub erschienen. Ja, genau,
00:00:06wir haben noch einen weiteren Klon, aber dieses Mal mit einer echten grafischen Benutzeroberfläche.
00:00:13Anfang der Woche habe ich ein Video über Huwashu Design gemacht, den ersten Klon auf dem Markt.
00:00:20Es war wirklich gut. Wir haben gezeigt, wie es sich direkt mit dem Standard-Claude-Design-Format misst,
00:00:24aber ohne die typischen Nutzungsprobleme. Doch ein Problem bei Huwashu Design war,
00:00:30dass es nur im Terminal lief. Es hatte keine grafische Oberfläche, wie ihr sie hier seht,
00:00:36bei diesem brandneuen Open-Source-Tool, das Claude Design fast perfekt kopiert. Seht euch das an:
00:00:43Diese beiden Tools hier: Wir haben Open Design, worüber wir heute sprechen werden,
00:00:48und hier Claude Design – extrem ähnlich. Das Coole an Open Design ist,
00:00:54dass es auf Huwashu Design aufbaut. Und wie ihr im letzten Video gesehen habt, ist Huwashu
00:00:59wirklich gut. Wir haben damit tolle Inhalte und Frontend-Designs erstellt. Und nun
00:01:06legen wir einfach eine schicke grafische Ebene darüber, damit die Interaktion viel einfacher wird
00:01:11und wir den Feinschliff erhalten, den wir ursprünglich von Claude Design kannten.
00:01:16Noch besser: Open Design können wir mit jedem Coding-Tool nutzen, nicht nur mit Claude Code.
00:01:22Wir können Gemini oder Codex nutzen und haben wieder nicht diese Nutzungsprobleme wie bei Claude.
00:01:28Heute schauen wir uns Open Design an. Ich zeige euch, wie es funktioniert, wie man es installiert,
00:01:34was wichtig ist – denn es gibt auch unnötigen Ballast – und wir machen Vergleiche mit Claude Design.
00:01:39Spoiler-Alarm: Es ist ziemlich gut. Ich finde es solide und freue mich riesig,
00:01:43dass all diese Spin-offs von Claude Design erscheinen. Ich mag Claude Design sehr,
00:01:49nur die Nutzungseinschränkungen sind schrecklich. Je mehr solcher Tools kommen,
00:01:53desto eher wird Anthropic reagieren und dieses Nutzungs-Chaos endlich beheben.
00:02:00Open Design ist also die Open-Source-Alternative zu Claude Design. Wir können es mit
00:02:05Claude Code oder Codex verbinden oder unseren eigenen API-Key für andere Schnittstellen nutzen.
00:02:12Es erkennt automatisch, welche Coding-Agents auf eurem Rechner sind, und bietet 31 Skills
00:02:16sowie 72 hochwertige Designsysteme, die bereits integriert sind. Als ich sagte,
00:02:24es basiere auf Huwashu Design, war das kein Scherz; sie erwähnen es sogar selbst.
00:02:28Es ist eine Mischung aus Huwashu Design, dem Guzheng PowerPoint Skill, Open Code Design
00:02:34und Multica. Alles zusammengefasst ist es quasi Huwashu Design mit einer schicken Oberfläche.
00:02:40Der Rest des Repos geht tief ins Detail, was unter der Haube passiert, mit Beispielen und Demos.
00:02:45Alles, was ihr wissen müsst: Das ist Open-Source-Claude-Design, so nah wie es nur geht.
00:02:49Bevor wir zur Installation kommen, ein kurzes Wort von unserem heutigen Sponsor:
00:02:53mir selbst! Ich habe gerade meine Claude Code Masterclass veröffentlicht – der beste Weg,
00:02:58um zum KI-Entwickler zu werden, besonders ohne technischen Hintergrund. Ich aktualisiere sie wöchentlich
00:03:04und wir konzentrieren uns auf echte Anwendungsfälle, um euer Business oder Projekt
00:03:09wirklich voranzubringen. Ihr findet sie in Chase AI Plus. Der Link ist im fixierten Kommentar.
00:03:14Hoffentlich sehen wir uns dort! Zur Installation gibt es zwei Wege: Ihr geht ins Repo,
00:03:18öffnet das Terminal und fügt alles dort ein. Die zweite Option:
00:03:23Kopiert diesen Link (Link in der Beschreibung), fügt ihn in Claude Code oder Codex ein
00:03:28und sagt: "Installiere das in einem neuen Verzeichnis". Dann wird es eingerichtet.
00:03:32Sobald es installiert ist und läuft, sollte es euch einen Link zum lokalen Dev-Server geben.
00:03:36Falls nicht, sagt einfach Claude Code: "Starte den Dev-Server für Open Design".
00:03:42Dann seht ihr eine Seite wie diese. Wahrscheinlich öffnet sich ein Fenster mit der Frage,
00:03:46ob ihr die lokale CLI, die Anthropic API oder ein anderes KI-System nutzen wollt.
00:03:51Wählt am besten "Local CLI". Dann greift es auf Claude Code oder Codex zu.
00:03:56So zahlt ihr keine API-Gebühren; alles läuft über euren bestehenden Account.
00:04:01Als Modell wählt ihr "Default" (CLI-Konfiguration). Zudem können wir Media-Provider hinzufügen,
00:04:06denn wie ihr hier seht, kann ich nicht nur Prototypen, Slides und Templates erstellen,
00:04:13sondern auch Bilder und Videos. Ich kann das direkt über dieses UI generieren,
00:04:18brauche dafür aber einen API-Key für ein entsprechendes Modell.
00:04:24Man kann Dinge wie Minimax, OpenAI oder ElevenLabs hinzufügen. Das ist nützlich
00:04:30und in Claude Design so nicht zu finden. Oben haben wir Designs, Beispiele, Designsysteme,
00:04:36Bild- und Videovorlagen. Was sind das für Templates bei den Designsystemen?
00:04:40Es ist ähnlich wie "awesomedesigns.md". Sie haben sich Webseiten wie
00:04:46Airbnb vorgenommen und analysiert, was dort passiert: Palette, Typografie,
00:04:52Komponenten, visuelles Thema und Atmosphäre. Die Idee dahinter: Wenn ich eine Seite
00:04:58im Stil von Airbnb erstellen will, nutze ich diesen Prompt und erhalte
00:05:06ein ähnliches Ergebnis. Die Resultate variieren allerdings. Der Bereich für Designsysteme
00:05:13sieht cool aus, aber wie effektiv er wirklich ist, bleibt fraglich. Bei den Bild-Vorlagen
00:05:18ist es ähnlich: Es werden Beispielbilder und JSON-Prompts gezeigt, um ähnliches zu erhalten.
00:05:23Ich halte das für Ballast. Genauso bei den Video-Vorlagen: Sieht nett aus,
00:05:29bringt euch aber keinen echten Mehrwert. Dann gibt es hier Beispiele, auch ganz cool,
00:05:35aber versteht bitte: Das ist nur das Ergebnis eines einfachen, einzeiligen Prompts.
00:05:42Da steckt kein komplexer Prompt dahinter. Der Prompt steht buchstäblich direkt hier.
00:05:47Wenn ich auf "Diesen Prompt nutzen" klicke, wird er übernommen. Es ist nur eine Zeile:
00:05:53"Design Mutuals, eine Dating-Seite für X-Nutzer, Dashboard mit Statistiken und Community-Ticker".
00:06:00Lasst euch also nicht zu sehr von den Beispielen hier beeindrucken. Es ist nur
00:06:07ein einzeiliger Prompt, nichts Verrücktes. Konzentrieren wir uns auf das Wesentliche:
00:06:12Das Erstellen von Prototypen, Slide-Decks und diesen Standard-Ergebnissen,
00:06:16die man auch in Claude Design selbst sieht. Es funktioniert fast identisch:
00:06:22Ihr benennt die Demo, wählt ein Designsystem aus – man kann eines oder mehrere nehmen,
00:06:28die Liste ist ja bereits integriert. Wir entscheiden uns für Wireframe oder High Fidelity
00:06:32und können sogar eine Claude-Design-ZIP-Datei importieren. Falls ihr also
00:06:37ein Designsystem in Claude Design erstellt habt, könnt ihr daraus eine ZIP-Datei machen,
00:06:44hier einfügen und auf "Erstellen" klicken. Ich zeige euch zuerst dieses Beispiel:
00:06:51Hier habe ich Open Design gebeten, das Gleiche zu erstellen wie im Huwashu-Video:
00:06:57Eine Landingpage für ein fiktives SaaS-Produkt namens "Lighthouse", gedacht für
00:07:03kleine Teams und Solo-Gründer. Ich wollte drei Varianten zum Vergleich.
00:07:11Ich habe das klassische Design, etwas Redaktionelleres und etwas Auffälligeres.
00:07:17Im direkten Vergleich zu Claude Design sieht man viele Gemeinsamkeiten:
00:07:21ähnliche Schriftarten, ähnliche Farben, besonders im Hintergrund und beim redaktionellen Stil.
00:07:26Man sieht hier links bei Open Design auch, dass es dasselbe Q&A-Briefing durchläuft,
00:07:32das man von Claude Design kennt. Es stellt mir Fragen, gibt mir Buttons zur Auswahl usw.
00:07:37Es ist praktisch das exakt gleiche Produkt. Ein Unterschied, der mir aufgefallen ist,
00:07:43im Vergleich von Open Design zu Claude Design: Open Design war etwas langsamer.
00:07:49Es dauerte etwa 10 Minuten, während Claude Design nur die Hälfte der Zeit brauchte.
00:07:56Wichtig: Obwohl Optionen wie "Kommentieren", "Editieren" und "Zeichnen" sichtbar sind,
00:08:01sind diese in Open Design noch nicht verfügbar, stehen aber auf der Roadmap.
00:08:06Wenn ihr wollt, dass Anpassungs-Optionen erscheinen, müsst ihr Open Design direkt anweisen:
00:08:13"Erstelle ein Panel für Anpassungen", wo ich Dinge schnell selbst ändern kann,
00:08:18indem ich sie einfach an- und ausschalte – genau wie bei Huwashu. Open Design ist langsamer,
00:08:24es fehlen Komfort-Funktionen, aber ansonsten ist es sehr nah an Claude Design.
00:08:30Reden wir darüber, wie ihr ein eigenes Designsystem nutzen könnt, denn das ist
00:08:35einer dieser Punkte, die man umgehen muss. Wenn ich ein Slide-Deck erstellen wollte,
00:08:40das mein "Agentic Dashboard OS"-Designsystem nutzt – hier als Referenz,
00:08:46das ist die visuelle Ästhetik, die ich anstrebe – in Claude Design habe ich
00:08:51dafür ein System. Wie kann ich das in Open Design nachbauen? Wie gesagt,
00:08:56es muss nicht mein Dashboard sein, vielleicht habt ihr eine eigene Seite mit eigenen Assets,
00:09:01Typografie usw., die ihr hier nutzen wollt. Es gibt keinen direkten Weg,
00:09:08man kann das nicht einfach unter Designsysteme anlegen; es gibt keinen Button dafür.
00:09:14Stattdessen solltet ihr eine Claude-Design-ZIP-Datei importieren. Wenn ich
00:09:20dieses System bereits in Claude Design erstellt habe, gehe ich einfach zu diesem
00:09:25Projekt (da bin ich gerade), klicke auf "Teilen" und dann auf "Projekt als .zip herunterladen".
00:09:32In Open Design wähle ich dann diese ZIP-Datei aus und lade sie hoch. Ihr seht dann
00:09:39hier alle Designdateien, die gerade hochgeladen wurden. Wenn ihr etwas Ähnliches
00:09:45versucht, es aber noch nicht in Claude Design als System angelegt habt, empfehle ich,
00:09:51das zu tun. Das ist der einfachste Weg. Oder ihr baut das Designsystem-Setup
00:09:55selbst in Codex oder Claude Code nach. Das ist aber etwas umständlich – ein Nachteil
00:10:00von Open Design. Hier macht es Huwashu Design etwas einfacher, denn
00:10:04wenn wir das im Terminal machen statt über ein Interface, kann ich in Claude Code
00:10:08einfach sagen: "Schau dir dieses Verzeichnis an, nimm alles, was drin ist,
00:10:14und erstelle dieses Slide-Deck in diesem Stil". Das ist ein Nachteil der UI-Pflicht.
00:10:20Ich habe also im Prompt gesagt: "Erstelle ein Slide-Deck über mein fiktives Produkt
00:10:25Lighthouse, Analysetools für kleine Teams. Stell mir alle nötigen Fragen".
00:10:29Wir zoomen mal rein: Hier sind die Fragen an mich. Für wen ist das Deck?
00:10:34Sagen wir, für einen Produktlaunch. Wer ist im Raum? Produkt-Leute.
00:10:44Wie viele Slides? Wir halten es kurz. Fidelity? High Fidelity. Notizen? Nein.
00:10:51Visueller Stil? Brutalistisch. Nutze das Agentic-OS-Designsystem. Überlass ihm
00:11:00die Story-Struktur und schick die Antwort ab. Wie bei Claude Code üblich,
00:11:04erstellt es eine To-do-Liste und arbeitet sie ab. Hier ist das Ergebnis
00:11:08für die erste Folie. Sieht gut aus und passt definitiv zum Designsystem.
00:11:13Aber wie ihr merkt, kann ich nicht zwischen den Folien wechseln. Entweder das,
00:11:20oder alle Folien sind gleich. Ich sagte Open Design: "Ich sehe nur die erste Folie,
00:11:25es wechselt nicht". Mal sehen, ob es das beheben kann. Hier ist das finale
00:11:29Slide-Deck von Open Design. Ich habe es auch nach PowerPoint exportiert, damit ihr
00:11:34den Export-Prozess seht. In Claude oder Open Design sieht oft alles gut aus,
00:11:39aber in PowerPoint kann dann manches verschoben sein. Die erste Folie ist gut,
00:11:43die zweite ist okay, bei den Zahlen könnte man noch etwas nachbessern.
00:11:52Folie drei ist nicht ganz stimmig; wir müssten die Abstände und Trennungen anpassen.
00:11:58Folie vier sieht gut aus, ebenso Folie fünf. Folie sechs müsste man
00:12:04etwas nach oben schieben. Bei Folie sieben gibt es wieder kleine Formatierungsprobleme,
00:12:13um alles in den Boxen zu halten. Aber ich betrachte das als eine 90-Prozent-Lösung.
00:12:18Es würde fünf Minuten dauern, das zu fixen, und es passt zum gewählten System.
00:12:24Man sieht aber bei diesem Slide-Deck, dass es im Vergleich zum polierten
00:12:29Claude Design noch etwas ungeschliffen ist. Das ist aber auch zu erwarten,
00:12:33da Open Design erst diese Woche erschienen ist. Hoffentlich wird weiter daran gearbeitet.
00:12:37Insgesamt ist Open Design für eine erste Iteration ein wirklich solides Tool,
00:12:42wenn man Claude Design mit einer grafischen Oberfläche nutzen möchte,
00:12:48aber von den Nutzungslimits genervt ist. Wer kein Interface braucht, aber die Basis
00:12:54von Claude Design schätzt, für den ist Huwashu Design wohl immer noch besser. Es ist schneller
00:13:00und durch die Arbeit im Terminal meiner Meinung nach flexibler. Aber wer sagt:
00:13:05"Ich brauche unbedingt dieses Interface", für den ist das eine echte Alternative.
00:13:10Versteht mich nicht falsch, ich liebe Claude Design, aber diese Nutzungslimits sind absurd.
00:13:15Wie gesagt: Hoffentlich kommen morgen 10 Millionen solcher Tools raus,
00:13:21damit Anthropic endlich Feuer unterm Hintern bekommt und dieses Problem löst.
00:13:26Das ist lächerlich. Hier belasse ich es. Es ist ein cooles Tool, schaut es euch an.
00:13:31Einfach einzurichten und sehr flexibel bei den unterstützten Coding-Agents.
00:13:34Schreibt mir eure Meinung in die Kommentare. Schaut bei Chase AI Plus vorbei,
00:13:40wenn ihr euch die Masterclass holen wollt. Wir sehen uns!
00:13:43Macht's gut.