In Claude-Design-Qualität gestalten, ohne Tokens zu verbrennen

Dieser Leitfaden packt den Kostenaspekt direkt an: Wenn du schon ein geschlossenes Cloud-Designtool benutzt hast, kennst du die Magie – und du weißt, wie schnell die Tokens ausgehen. Open Design lässt dich in ähnlicher Qualität gestalten, indem es die Arbeit über jedes Modell deiner Wahl laufen lässt – den Agenten, für den du ohnehin schon zahlst, oder deinen eigenen Key – sodass du kein separates Design-Budget rationieren musst. Es folgt dem Build, den Roy Shavit in seinem Walkthrough durchgeht, ins Englische übertragen und auf den aktuellen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die schriftliche Fassung.

Die HyperFrames-Galerie: code-getriebene Motion- und Video-Stücke, die du forken und remixen kannst.

Was ist Open Design?

Open Design ist eine quelloffene, lokal-zuerst arbeitende Designplattform. Wie beim geschlossenen Cloud-Tool gibst du einen Prompt ein und bekommst ein echtes Artefakt zurück – eine Landingpage, App oder ein Deck – als editierbares HTML, an dem du in VS Code oder deinem Editor weiterarbeiten kannst. Drei Dinge heben es ab, und die ersten beiden sind der Grund, warum der Betrieb günstiger ist:

• Es ist quelloffen (Apache-2.0) – lies den Code, forke ihn, hoste ihn selbst.
• Es läuft auf deinem Computer – Dateien bleiben auf deiner Maschine; nichts geht in eine Drittanbieter-Cloud.
• Es nutzt jedes Modell deiner Wahl – Codex, Claude oder über 15 weitere Modelle über deine vorhandene CLI, oder deinen eigenen API-Key (BYOK).

Die Kostengeschichte: Hör auf, Tokens zu rationieren

Roys Formulierung ist unverblümt, und genau darum geht es: Ein geschlossenes Cloud-Designtool verbraucht sein Token-Kontingent sehr schnell, sodass du am Ende deine Designarbeit rationierst. Open Design beseitigt diese Decke, weil die Generierung über den Agenten/das Abo läuft, das du bereits hast, oder über einen Key, den du kontrollierst. Du entscheidest den Kosten-Qualitäts-Kompromiss pro Projekt – ein günstiges Modell für Entwürfe, ein Top-Modell für den finalen Durchgang – statt von einer fremden, separaten Design-Obergrenze getaktet zu werden. Selbst-Hosting bedeutet außerdem, dass die Arbeit auf deiner Maschine stattfindet, was alles schlank hält.

Schritt 1 – Installieren und deine Modelle erkennen

Der einfachste Weg ist die Desktop-App: Geh auf open-design.ai/download, wähle dein Betriebssystem, lade sie herunter und zieh sie hinein. Lieber aus dem Quellcode:

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

Öffne die lokale URL, die ausgegeben wird (ein dynamischer Port – keinen fest hineincodieren). In den Einstellungen erkennt Open Design sofort die lokal installierten Modelle – Roy hat Codex und Claude, und es würde auch OpenCode oder andere aufgreifen. Lege ein Standardmodell fest oder bring deinen eigenen Key von einem beliebigen Anbieter mit, sodass du nicht einmal eine CLI installiert haben musst. Das ist die Besonderheit: Du wirst nicht zu einem einzigen Anbieter gezwungen.

Folien-Modus: Wähle eine Deck-Kategorie und forke ein Beispiel als Ausgangspunkt.

Schritt 2 – Eine Landingpage bauen, günstig iterieren

Roy baut eine Landingpage für einen Game-Streaming-Dienst. Er schickt das Briefing, Open Design liefert ein Discovery-Formular zurück (Ausgabetyp, Zielgruppe, Markenrichtung, Umfang, Bewegungsgrad), er beantwortet es, und es baut – hier läuft es auf Claude Opus, weil seine CLI darauf eingestellt ist. Das Ergebnis ist eine solide erste Version: Hero, Demo-Zahlen, Plattform-Unterstützung, eine Preisseite, Testimonials, FAQ – responsiv über Desktop, Tablet und Telefon.

Die Iterationswerkzeuge halten die Kosten von Änderungen niedrig: einen Bereich auswählen und eine Notiz hinzufügen, einen Kommentar hinterlassen oder per Inline-Bearbeitung Text direkt ändern. Wechsle in die Code-Ansicht, um das generierte HTML und die Designdateien zu sehen. Wenn du zufrieden bist, exportiert die Schaltfläche Teilen als PDF oder deployt direkt zu Vercel oder Cloudflare Pages (gib deinen Token ein, und die Seite geht live), oder du klickst zum Quellcode durch und arbeitest in VS Code, Cursor oder deinem Editor weiter.

Ein echter generierter Prototyp in der Vorschau – eine dunkle, cineastische Agentur-Landingpage.

Schritt 3 – Über Seiten hinaus: ein Video erzeugen

Open Design ist nicht auf statisches Design beschränkt. Roy nutzt die hyperframes-Motion-Skill, um ein animiertes Balkendiagramm im Stil der New York Times zu erzeugen – das dauert ein paar Minuten und produziert ein echtes MP4, das du in ein längeres Video einfügen oder als gebrandeten Schnipsel verwenden kannst. Es gibt außerdem über 170 Designsystem-Plugins zur Auswahl (Apple, PlayStation und mehr), und weil die Bibliothek offen ist, ergänzt die Community sie laufend.

Wann was nutzen (die ehrliche Einschätzung)

Roy bleibt dabei fair. Greif zu Open Design, wenn du Modellflexibilität, niedrigere Kosten oder Selbst-Hosting willst – die Arbeit bleibt auf deiner Maschine und läuft auf dem Modell deiner Wahl, einschließlich eines Drittanbieter-Modells. Greif zum geschlossenen Cloud-Tool, wenn du ein minimales Setup ohne Installation und den geringsten Aufwand zum Einstieg willst – und beachte, dass es ab Werk noch etwas geschliffener ist. Gleicher Inhalt, dort eine etwas höhere Politur; hier deutlich mehr Kontrolle und niedrigere Betriebskosten.

Tipps

• Lass es über den Agenten laufen, für den du ohnehin schon zahlst (oder BYOK), um einer separaten Token-Obergrenze zu entkommen.
• Entwirf auf einem günstigen Modell, finalisiere auf einem starken – du steuerst den Kosten-Qualitäts-Regler pro Projekt.
• Nutze Inline-Bearbeitung und Bereichskommentare für günstige, chirurgische Änderungen statt kompletter Neugenerierungen.
• Exportiere zu Code oder deploye zu Vercel/Cloudflare direkt aus „Teilen“, wenn du fertig bist.
• Probier die hyperframes-Skill, wenn du Bewegung/Video brauchst, nicht nur statische Seiten.

FAQ

Wie spart das im Vergleich zu einem geschlossenen Cloud-Tool Tokens? Die Generierung läuft über deinen eigenen Agenten/dein Abo oder deinen eigenen API-Key, also gibt es kein separates getaktetes Design-Budget, das man aufbrauchen müsste – du wählst das Modell und die Kosten.

Kann ich an der Ausgabe in meinem Editor weiterarbeiten? Ja – die Ausgabe ist editierbares HTML/Dateien. Klick zum Quellcode durch und mach in VS Code, Cursor oder einem beliebigen Editor weiter, oder deploye zu Vercel/Cloudflare Pages.

Kann es mehr als Webseiten? Ja – Prototypen, Decks, Bilder und Video (über die hyperframes-Motion-Skill), plus eine große Bibliothek von Designsystemen.

Ist es kostenlos? Die App ist unter Apache-2.0 quelloffen und lokal kostenlos zu betreiben. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und Keys, die du verbindest.

---

Dieser schriftliche Leitfaden basiert auf dem Walkthrough von Roy Shavit. Sieh dir oben das vollständige Video an und abonniere Roy Shavit für mehr praxisnahe AI-Build-Inhalte.