← Leitfäden Vorschau: Open Design für Agenturen — kommerziell sicher, kostenkontrolliert, kundenfertig
Vorschau

Open Design für Agenturen — kommerziell sicher, kostenkontrolliert, kundenfertig

Ein Playbook für Agenturen/Freelancer zu Open Design — warum die Apache-2.0-Lizenz es für Kundenarbeit sicher macht, wie man Ausgaben durch Modellwechsel steuert (die Struktur mit einem starken Modell aufbauen, dann über OpenRouter mit günstigen oder kostenlosen Modellen iterieren) und wie man Kunden-Dashboards schnell ausliefert. Basierend auf dem Walkthrough von Dylan Michael.

Dylan Michael | AI Automation 3. Mai 2026 12:21 YouTube ↗

Wer für Kunden baut, für den machen die wöchentliche Obergrenze und das einzelne Modell eines geschlossenen Design-Tools skalierbares Arbeiten schwer. Dieser Leitfaden ist ein Playbook für Agenturen/Freelancer zu Open Design: warum es kommerziell sicher ist, wie man Ausgaben durch Modellwechsel steuert und wie man Kundenarbeit schnell ausliefert. Er folgt dem Walkthrough, den Dylan Michael in seinem Video gibt, neu geschrieben und auf den aktuellen Release gebracht. Sieh dir das Video oben an oder lies weiter für die schriftliche Fassung.

Der Open-Design-Arbeitsbereich — beschreibe, was du willst, und wähle einen Modus. Der Open-Design-Arbeitsbereich: Beschreibe, was du bauen willst, wähle einen Modus, und dein Agent erledigt den Rest.

Warum es sich für Kundenarbeit eignet

Open Design ist eine quelloffene, lokal-first arbeitende Design-Plattform, die auf dem Coding-Agenten läuft, den du ohnehin schon nutzt — und für Agenturen sind drei Eigenschaften am wichtigsten:

  • Apache-2.0 = kommerziell sicher. Du kannst es in Kundenprojekten einsetzen, das Gebaute verkaufen und musst nie um Erlaubnis fragen oder Lizenzgebühren zahlen — anders als manche restriktiv lizenzierten Klone.
  • Lokal-first = dir gehört alles. Projekte liegen auf deinem Rechner, sodass Kundenarbeit nicht in jemand anderes Cloud liegt.
  • Beliebiges Modell = gesteuerte Ausgaben. Claude, ChatGPT, Gemini, DeepSeek oder kostenlose Modelle — du bist nicht gezwungen, für jede Aufgabe die Credits eines Premium-Modells zu verbrennen.

Dylans schonungslose Einordnung: Ein geschlossenes Tool kann 20–200 $/Monat kosten und dich trotzdem auf ein paar Designs pro Woche drosseln, was unbrauchbar ist, wenn du Kunden bedienst. Open Design beseitigt die Obergrenze und den Lock-in.

Schritt 1 — Installieren und Engine auswählen

Bitte den Agenten deines Editors, es zu klonen und einzurichten (füge die Repo-URL ein und lass Claude Code / Codex es ausführen), oder hol dir die Desktop-App von open-design.ai/download. Beim ersten Start zeigt es jedes lokal bereits installierte Modell an (Codex, Gemini, GitHub Copilot CLI, …) — klicke auf rescan, wenn du gerade eines hinzugefügt hast, oder bring deinen eigenen Schlüssel mit. Wähle CLI und Modell und speichere.

Schritt 2 — Das Kunden-Deliverable bauen

Lege ein Projekt an (Dylan baut ein hochwertiges Sales-Analytics-Dashboard), wähle high fidelity und gib einen Prompt ein. Open Design stellt Rückfragen (Screens, Oberfläche, Akzentfarbe, was die Heatmap/das Leaderboard zeigt) und blendet die Kosten jeder Aufgabe ein, während es arbeitet — nützlich, wenn du einen Kundenauftrag budgetierst. Wähle ein Farbschema, und es baut ein ausgefeiltes One-Shot-Ergebnis, das du dann in einfacher Sprache verfeinerst („eine hochwertige Refresh-Animation hinzufügen, auf glassmorphism umstellen, die Abstände enger machen“).

Ein echter, in Open Design generierter Prototyp. Ein echter generierter Prototyp, gerendert in der Vorschau — eine dunkle, cinematische Agentur-Landingpage.

Schritt 3 — Der Kosten-Kniff: Modelle mitten im Projekt wechseln

Das ist die Agentur-Ökonomie. Dylans Regel: Baue die Struktur mit einem starken Modell (es interpretiert das Design am besten), dann wechsle für Details und Anpassungen zu einem günstigeren Modell — ändere die CLI unten links von Claude Code auf Codex/Gemini und speichere. Für wirklich niedrige Kosten richte es auf OpenRouter aus und nutze Budget- oder kostenlose Modelle (ein Modell der DeepSeek-Klasse kostet für Iterationen nur einen Bruchteil bei rund 90–95 % der Qualität). Du entscheidest, wohin jeder Dollar fließt, statt ein Premium-Modell ungebremst deine Credits verbrauchen zu lassen.

Du kannst außerdem einen Schlüssel für einen Medienanbieter hinzufügen (z. B. OpenAI) und generierte Bilder direkt in das Deliverable einfügen und es dann mit einem Klick auf Vercel deployen, damit der Kunde es prüfen kann.

Die HyperFrames-Motion- und Video-Galerie in Open Design. Die HyperFrames-Galerie: codegetriebene Motion- und Videostücke, die du forken und remixen kannst.

Tipps

  • Setze auf die Apache-2.0-Lizenz — liefere Kundenarbeit ohne Erlaubnis oder Lizenzgebühren aus.
  • Baue mit einem starken Modell, iteriere mit einem günstigen — der größte Kostenhebel.
  • Behalte die pro Aufgabe angezeigten Kosten in der UI im Blick, um einen Kundenauftrag zu budgetieren.
  • Nutze OpenRouter für Budget-/kostenlose Modelle bei den mühsamen Anpassungen.
  • Deploye auf Vercel für schnelle Kunden-Review-Links.

FAQ

Kann ich Open Design für bezahlte Kundenarbeit nutzen? Ja — es ist Apache-2.0, also kommerziell sicher zu nutzen, zu verkaufen und selbst zu hosten, ohne Lizenzgebühren oder Erlaubnis.

Wie halte ich die Kosten über ein Projekt hinweg niedrig? Baue die Struktur mit einem starken Modell, wechsle dann für Iterationen zu einem günstigeren Modell (oder kostenlosen Modellen über OpenRouter); die UI zeigt sogar die Kosten jeder Aufgabe an.

Hat es die wöchentliche Obergrenze des geschlossenen Tools? Nein — die Generierung läuft auf dem Agenten/den Schlüsseln, die du verbindest, sodass du die Ausgaben steuerst, statt an ein festes Wochenlimit zu stoßen.

Ist es kostenlos und quelloffen? Ja — Apache-2.0. Führe es lokal kostenlos aus; du zahlst nur für die Modell-/Mediennutzung dessen, was du verbindest.


Dieser schriftliche Leitfaden basiert auf dem Walkthrough von Dylan Michael. Sieh dir oben das komplette Video an und abonniere Dylan Michael | AI Automation für weitere KI-Automatisierungs-Workflows.