Open Design: Warum 40.000 Entwickler Claude Design den Rücken gekehrt haben
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Das ist OpenDesign, eine Open-Source-Alternative zu Claude Design, mit der Sie jeden Agenten
00:00:05oder jedes Modell, das Sie bereits installiert haben, nutzen können, um vollständige Web-Prototypen, mobile Apps und sogar Folien-
00:00:11präsentationen in HTML zu erstellen. Mit 72 integrierten Designsystemen auf Markenniveau bleibt jedes Projekt auf Ihrem Rechner,
00:00:17sodass nichts in die Cloud gesendet wird. Wir wissen aber bereits, dass Claude Opus 4.7 wirklich gut im Front-End-
00:00:23Design ist, also ergibt es keinen Sinn, dem Benutzer zu erlauben, jedes beliebige Modell zu wählen, da die meisten davon
00:00:27vielleicht wirklich schlecht im Design sind. Abonnieren Sie und lassen Sie es uns herausfinden.
00:00:33Claude Design von Anthropic wurde letzten Monat veröffentlicht und war ein sofortiger Erfolg. Es gab den Leuten
00:00:38die Möglichkeit, mit einem beeindruckenden Modell wirklich gut aussehende Designs zu erstellen; es gab den Leuten eine
00:00:43Alternative zu Lovable v0 und ähnlichen Tools. Aber es ist ein proprietäres Cloud-only-Tool, das an ein
00:00:49einzelnes Modell gebunden ist und Sie 20 Dollar im Monat kostet, was im Grunde bedeutet, dass es nicht für jeden etwas ist.
00:00:54Also brachte Tom mit dem Nexa-Team 11 Tage später eine Open-Source-Alternative heraus, die sehr beliebt war.
00:01:00Es erinnert mich ein wenig an OpenCode, das von Claude Code kommt, und jetzt kommt OpenDesign von Claude
00:01:05Design. Was ist das nächste, das Anthropic machen wird, und bei dem jemand “Open” davor setzen wird?
00:01:09Aber wie ist dieses Open-Source-Tool in der Lage, Designs zu erstellen, die so gut wie Claude Design sind? Nun,
00:01:14das liegt daran, dass zwei Dinge zusammenarbeiten. Das erste sind Designsysteme. OpenDesign enthält viele
00:01:18davon mit vollständigen Markenspezifikationen, Typografie, Abständen und Farbtokens, inspiriert von Marken wie Linear,
00:01:24Stripe und Spotify. Das zweite sind Skills. Sehr viele Skills für jeden Ausgabetyp. Ein Dashboard-
00:01:30Skill weiß, wie man Diagramme anordnet, und ein Deck-Skill weiß, wie man Folien strukturiert. Es gibt sogar eine Anti-KI-
00:01:35Checkliste in jedem Prompt, und bevor es irgendetwas generiert, fragt es Sie nach Ihrer Zielgruppe,
00:01:41dem Tonfall und den Markeninhalten. Wenn Sie mein Video über Impeccable gesehen haben, wird Ihnen das sehr bekannt vorkommen,
00:01:45aber es ist anders, und wir werden die Unterschiede später im Video durchgehen. Aber für den Moment,
00:01:49lassen Sie uns eine einfache Demo durchgehen. Um anzufangen, können Sie entweder OpenDesign für macOS oder
00:01:54Windows herunterladen, das Repo klonen und mit Docker installieren oder es aus der Quelle ausführen, was ich beschlossen habe zu tun.
00:01:59Wenn das Projekt also läuft, kann ich diesen Port in meinem Browser besuchen, was mich zu dieser Benutzeroberfläche bringt,
00:02:04die für jemanden, der nicht an Claude Design gewöhnt ist, ziemlich überwältigend aussieht, aber lassen Sie uns einfach durchgehen.
00:02:08Wenn ich hier unten klicke, sehen Sie, dass es die Agent-Harnesses erkannt hat, die ich bereits installiert habe,
00:02:13also Claude Code, Codex und OpenCode. Und wenn ich auf Claude Code klicke und nach unten scrolle,
00:02:17können wir das Modell auswählen. Standardmäßig wird das ausgewählt, das im CLI eingestellt ist, aber ich kann hier
00:02:21eines auswählen. Ich kann das Gleiche auch mit Codex tun, aber Codex erlaubt es mir, den “Reasoning Effort” zu ändern,
00:02:26was eine nette Sache ist. Ich entscheide mich aber für OpenCode. Ich scrolle nach unten und ändere das
00:02:31Modell auf GLM 5.1. Hier drüben kann ich auch den Speicher auswählen, also die Anweisungen, die jedem Prompt hinzugefügt werden,
00:02:36die Medienanbieter, und standardmäßig wurde mein OpenAI-Key erkannt, und es wird GPT Image 2 verwenden,
00:02:41um Bilder zu generieren. Ich könnte aber auch meinen 11-Labs-API-Key verbinden, um Dinge wie Text-to-Speech
00:02:46oder verschiedene Soundeffekte für Animationen zu machen, die Sie vielleicht auf Ihrer Website haben. Dann
00:02:50kann ich hier drüben alle verfügbaren Skills sehen. Ich kann mir alle Designsysteme ansehen,
00:02:54die wir uns später noch ansehen werden. Und ich kann sogar ein Haustier auswählen, was etwas ist, das Codex tut.
00:02:58Im Grunde haben wir hier eine Menge Optionen, aber ich werde das schließen und anfangen zu designen. Ich
00:03:03gebe meinem Projekt einen Namen und wähle dann ein Designsystem. Nun, wenn Sie keine Ahnung haben, was diese
00:03:08Designsysteme sind, können Sie auf den Designsystem-Tab klicken, um sie alle anzusehen, und es gibt eine
00:03:13Menge. Ich habe sie mir vor der Aufnahme des Videos angesehen und ich glaube, ich mag das von Miro, das so
00:03:17aussieht und Details zu Designtokens sowie Informationen in der Design-MD-Datei enthält.
00:03:22Beachten Sie, dass ich mich im Prototypen-Tab befinde, aber es gibt auch Live-Artefakte für Dinge, die Sie aktualisieren möchten,
00:03:27basierend auf sich ändernden Daten, ein Folien-Deck, um HTML-basierte Folien zu generieren, oder das Bauen aus einer Vorlage.
00:03:33Ich könnte also auf den Vorlagen-Tab hier klicken und eine Vorlage auswählen. Wir bleiben einfach
00:03:38beim Prototyp und klicken auf “Erstellen”. Von hier aus gelangen wir auf eine andere Seite, auf der wir eine
00:03:42Eingabeaufforderung geben können. Ich werde jetzt etwas Einzigartiges versuchen. Ich habe gerade meine YouTube-Kanal-
00:03:47Such-App laufen und wollte eine viel besser aussehende Version davon erstellen. Was ich also tun werde,
00:03:52ist, ihr diese URL zu geben und zu sehen, ob GLM in der Lage ist, die Tabs und die
00:03:57Eingaben zu durchsuchen und das für sein Design zu verwenden. Also habe ich hier die Anweisung gegeben, mir eine gut designte, einfache
00:04:02Website für ein Produkt zu erstellen, mit dem ich YouTube-Kanäle suchen kann. Ich habe ihr auch den Link der
00:04:07Website gegeben, damit sie ihn mit dem Agent-Browser oder einem Tool ihrer Wahl besuchen kann. Auf diese Weise kann sie
00:04:12die Eingaben sehen und alle Seiten durchgehen. Mal sehen, was sie macht. Sie hat mir gerade einige
00:04:15Fragen zum visuellen Tonfall, zum Markenkontext und einigen anderen Dingen gestellt, die ich beantworten werde.
00:04:20Und dann machen wir mit dem Designprozess weiter und sehen uns das an. Es konnte einen Curl-Befehl ausführen,
00:04:24um die Seite mit Chrome zu öffnen. Und jetzt nutzt es den Agent-Browser, um eine Verbindung zur Seite herzustellen. Also habe ich
00:04:29nichts davon geöffnet oder die URL besucht, und es geht die Seite im Browser durch. Wir können einige
00:04:34weitere Befehle des Agent-Browsers sehen, um zu verstehen, wie es funktioniert. Okay, an diesem Punkt läuft es immer noch.
00:04:38Es ist noch nicht ganz fertig. Es hat noch ein paar Dinge zu tun, aber ich mag die Richtung, in die sich die Dinge
00:04:43entwickeln. Ich mag die Suchseite, die es erstellt hat, mit den erweiterten Filtern hier unten, und ich kann
00:04:48zwischen Videotiteln und Kanalnamen für die Suche umschalten. Wir haben die Suchergebnisse, die sehr
00:04:52beeindruckend aussehen und tatsächliche Daten von der Website verwenden. Ich bin mir also nicht sicher, was es getan hat,
00:04:57ob es die Daten gescrapt und irgendwo gespeichert hat, aber das sind tatsächliche Daten, abgesehen von fehlenden Miniaturansichten. Wir haben auch
00:05:01die Favoritenseite. Wenn ich also jemanden hier favorisiere, wird er hier landen und ich kann eine
00:05:06E-Mail generieren, um sie zu kontaktieren, oder sie entfernen. Und es gibt auch eine versteckte Seite hier. Zum Beispiel,
00:05:11wenn ich X drücke, würde eine Person auf dieser Seite landen. Und es sieht so aus, als ob nach etwa 20 Minuten. Ja.
00:05:17GLM 5.1 ist nicht das schnellste Modell. Alles ist fertig. Und das hat es mir gesagt.
00:05:23Es hat mir alle fünf Dateien gegeben, die es erstellt hat. Und ich glaube, es hat alles an einen temporären
00:05:28Speicherort exportiert. Was ich jetzt tun kann, ist, ihr eine weitere Aufforderung zu geben. Wenn ich also einen Dark Mode hinzufügen wollte,
00:05:33könnte ich das tun, aber ich könnte auch auf “Designpaket fertigstellen” klicken, was alles
00:05:37in einer einzigen Design-MD-Datei synthetisieren wird. Also die Abschrift, das Designsystem und alle Artefakte,
00:05:42die generiert wurden, im Grunde diese fünf Seiten. Ich kann auch auf “Teilen” klicken, um in verschiedenen Formaten zu exportieren.
00:05:48Und ich kann sogar eine eigenständige HTML-Datei exportieren und sie Claude Code geben, um sie in meinem tatsächlichen Projekt zu implementieren,
00:05:53und sie sogar auf Vercel oder Cloudflare Pages bereitstellen, was eine sehr nette Sache ist.
00:05:57Das war also ein kurzer Überblick über OpenDesign. Lohnt es sich, es zu verwenden? Nun, wenn Sie bereits einen Coding-
00:06:02Agent installiert haben und Sie für ein Abonnement von VanClaude bezahlen, dann ist es keine Frage,
00:06:07es zu versuchen. Die Kombination aus Designsystemen und Skills bedeutet, dass es tatsächlich etwas
00:06:12ziemlich Anständiges produzieren kann, unabhängig vom Harness oder Modell. Aber wie ist es im Vergleich zu etwas wie Impeccable?
00:06:16Nun, persönlich bevorzuge ich die Art und Weise, wie Impeccable seine Planung durchführt. Es fragt Sie alles vorab,
00:06:22und entwirft verschiedene Mockups mithilfe eines Bildmodells, die Sie auswählen und von dort aus iterieren können.
00:06:27Sie können also am Anfang so gut wie keine Ahnung haben, wie das Design aussehen soll,
00:06:32und am Ende bei etwas ziemlich Anständigem landen. Während Sie bei OpenDesign ein bisschen
00:06:37etwas über Design wissen müssen, bevor Sie anfangen. Ich meine, es fragt Sie zwar, welches Designsystem Sie wollen, bevor
00:06:42Sie beginnen, und ich weiß, dass das Modell eines generieren kann, aber die Tatsache, dass es Sie fragt, bedeutet, dass es sich an jemanden richtet,
00:06:48der ein bisschen mehr über Design weiß. Aber ich muss zugeben, OpenDesign hat eine großartige Benutzeroberfläche,
00:06:53die Ihnen die Möglichkeit gibt, responsive Ansichten zu sehen, überall hin zu exportieren, Skills, MCP-Tools
00:06:58und sogar Haustiere hinzuzufügen, was nett für jemanden ist, der an die Verwendung der Codex-UI oder der Claude-Desktop-App gewöhnt ist.
00:07:04Und es hat einen tollen Job gemacht, eine App mit GLM 5.1 zu entwerfen, was nicht das beste Designmodell
00:07:10da draußen ist. Wenn ich also relativ schnell etwas entwerfen möchte und eine ungefähre Vorstellung
00:07:15davon hätte, in welche Richtung ich gehen möchte, dann würde ich definitiv OpenDesign ausprobieren. Aber wenn Sie nichts
00:07:19dagegen haben, ein wenig Geld auszugeben, ist Claude Design ziemlich gut. Ich meine,
00:07:22sehen Sie sich an, was es mit der exakt gleichen Eingabeaufforderung machen konnte.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video