Open Design ist der Traum jedes Vibe Coders

Dieser Leitfaden ist ein Vibe-Coder-Playbook für Open Design: Bring den Agenten mit, den du ohnehin schon nutzt, wähle ein Designsystem, damit dein Output nicht „KI-generiert“ schreit, prompte für eine Struktur, die wirklich konvertiert, und iteriere dann im Gespräch. Er folgt den drei aufeinanderfolgenden Builds, die Sean Kochel in seinen praxisnahen Demos durchspielt — eine Landingpage, eine mobile App und eine Desktop-App — neu geschrieben und auf den aktuellen Stand des heutigen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die schriftliche Fassung.

Der Open-Design-Workspace — Prototypen, Foliensätze, Bilder und Video auf einer ruhigen, vertrauten Leinwand.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform, die auf dem Coding-Agenten aufsetzt, den du ohnehin schon nutzt. Sie erkennt die CLIs, die bereits auf deinem Rechner liegen — Claude Code, Codex, Cursor, Gemini, Copilot, OpenCode und ein paar Dutzend mehr — und lässt diesen Agenten die Generierung steuern. So formuliert es Sean: Es gibt eine CLI-Ebene, auf der du deinen Agenten konfigurierst, einen System-Prompt, der die Qualität antreibt, und dann die Teile, die das Ganze wertvoll machen — die Skill-Unterstützung und eine umfangreiche Bibliothek von Designsystemen. Die Outputs sind echte HTML-Dateien, sodass alles, was du erstellst, direkt in dein tatsächliches Projekt fällt.

Warum Vibe Coder das interessiert:

• Bring deinen eigenen Agenten und Key mit — kein zweites Abo, kein Anbieter-Lock-in.
• Läuft lokal — der Output ist HTML, das du direkt in deine Codebasis übernehmen kannst.
• Designsysteme killen den AI-Slop-Look — starte von einer echten Marke statt von einer leeren Leinwand.
• Skills sind anpassbar — bring deine eigenen Copywriting-Regeln, UX-Paradigmen oder Abläufe ein.
• Open Source, Apache-2.0 — lies ihn, forke ihn, liefere damit Kundenarbeit aus.

Die zwei Probleme, in die jeder Vibe-Build läuft

Sean rahmt den gesamten Workflow um zwei Fehlermodi, und es lohnt sich, sie zu benennen, denn der Rest des Playbooks erklärt, wie du sie vermeidest:

1. Es sieht aus wie AI-Slop. Generische Verläufe, dieselbe Serifenschrift, Container-Suppe — du magst es nicht mal selbst.
2. Es ist nicht so strukturiert, dass es seinen Job erfüllt. Eine Landingpage, die nicht konvertiert, eine App, deren Flow keinen Sinn ergibt.

Ein Designsystem löst Problem eins. Ein bewusster Prompt mit echter Struktur löst Problem zwei. Behalte beide bei jedem Build weiter unten im Kopf.

Schritt 1 — Installieren und deinen Agenten wählen

Du hast drei Wege hinein:

Weg	Am besten geeignet für	Voraussetzungen
Desktop-App	Die meisten — null Konfiguration	Keine. Einfach herunterladen und öffnen.
Aus dem Quellcode laufen lassen	Entwickler, die den Code lesen oder anpassen wollen	Node ~24, pnpm 10.33.x
In deinen Agenten installieren	Leute, die im Terminal leben	Eine bestehende Coding-Agent-CLI

Der schnellste Weg ist die Desktop-App — hol sie dir von open-design.ai/download; sie erkennt automatisch die Agent-CLIs, die bereits in deinem PATH liegen. So lässt du es stattdessen aus dem Quellcode laufen:

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 (sie nutzt einen dynamischen Port — kodiere keinen fest). Beim ersten Start richtest du Open Design auf den Agenten aus, der die Arbeit antreiben soll, oder bringst deinen eigenen API-Key mit.

Schritt 2 — Eine Landingpage bauen, die konvertiert

Das ist Seans erste Demo, und sie ist die Vorlage für alles Weitere:

1. Wähle ein Designsystem. In der Demo entscheidet er sich für das von Anthropic. Das ist dein Anti-Slop-Schutzgeländer — der Agent erbt Palette, Typografie und Komponentensprache dieser Marke.

Die Designsystem-Bibliothek: Jeder Eintrag zerlegt eine echte Marke in Palette, Typografie, Komponenten und visuelle Atmosphäre, die du wiederverwenden kannst.

2. Prompte die Struktur, nicht nur das Gefühl. Sean sagt genau, welche Abschnitte gebaut werden sollen — elf davon — und fügt die Executive Summary aus seinem PRD ein (Produktvision, Problembeschreibung, Zielnutzer, vorgeschlagene Lösung, Hauptfunktionen), damit der Text echten Kontext hat, mit dem er arbeiten kann.
3. Beantworte die Discovery-Fragen. Genau wie Claude Design stellt Open Design klärende Fragen, bevor es schreibt. Hier greift es zu seinem SaaS-Landingpage-Skill, um die Aufgabe auszuführen — und weil Skills einfach Dateien sind, könntest du stattdessen deine eigenen Copywriting-Richtlinien oder deine Abschnittsstruktur als Skill laden.
4. Lass es laufen. Etwa fünf Minuten später hat er einen professionellen ersten Wurf — eine echte konversionsorientierte Struktur, eine saubere Vergleichstabelle, eine schön gestaltete Fallstudien-Karte, ein solides FAQ.

Du willst ein anderes Gefühl? Sean lässt genau denselben Brief noch einmal mit einem brutalistischen Ton statt einem redaktionellen laufen und erhält ein deutlich anderes Design — gleiche Struktur, andere Haut, weil das Designsystem die schwere Arbeit übernimmt.

Schritt 3 — Eine mobile App bauen, Screen für Screen

Für die Mobile-Demo arbeitet Sean Screen für Screen. Er behält dasselbe Anthropic-Designsystem bei und fügt dann für jeden Screen einen aus seinem PRD aufgebauten Prompt ein — einen Home-Feed, einen „Fülle die Lücken“-Empfehlungsscreen, ein Ad-hoc-Ernährungstagebuch. Der Agent stellt seine klärenden Fragen, mockt ein iOS-Layout und hält sich über alle drei Screens hinweg an das gewählte Designsystem.

Die Lektion: Wie du die UX promptest, ist der größte Teil des Ergebnisses. Als er dieselbe App als chat-first Coaching-Interface neu rahmt, bekommt er eine völlig andere — aber dennoch kohärente — Reihe von Screens. Das Designsystem hält es markenkonform; dein Prompt entscheidet über das Paradigma.

Die Vorlagenbibliothek: Startpunkte für Prototyp, Folie, Bild und Video, die du nach Typ filtern und zum Loslegen forken kannst.

Schritt 4 — Multimodal werden: von Screens zur Desktop-App

Die letzte Demo zeigt den multimodalen Trick. Sean macht Screenshots seiner drei mobilen Screens, legt sie in einen neuen Chat und stellt eine offene Anfrage: „Mocke eine Web-App-Version dieser Kernfunktionalität.“ Fünf Minuten später hat er eine saubere Desktop-Übersetzung mit drei Bereichen — Navigation links, die Arbeitsleinwand in der Mitte, eine Fortschrittsansicht rechts — wobei auch die Slash-Befehl-Interaktionen mitgemockt sind.

Schon ein vager Prompt plus Referenzbilder verschafft dir einen nutzbaren Ausgangspunkt. Mit einer ordentlichen Spezifikation wird es schärfer, aber der Kern bleibt: Du kannst dich flüssig zwischen den Oberflächen bewegen.

Tipps

• Starte immer von einem Designsystem. Es ist der mit Abstand größte Hebel gegen den AI-Slop-Look.
• Prompte die Struktur explizit. Liste die Abschnitte oder Screens auf; füge echten Kontext aus einem PRD ein, damit der Text nicht hohl ist.
• Stütze dich auf Skills — und schreib deine eigenen. Skills sind einfach Dateien; lade deine Copywriting-Regeln oder UX-Paradigmen direkt in den Workflow.
• Iteriere im Gespräch. Eine andere UX-Rahmung liefert sehr unterschiedliche Ergebnisse; das ist ein Feature, also probiere ein paar aus.
• Nutze Referenzbilder. Mach Screenshots bestehender Screens und leg sie ein, um zwischen Oberflächen zu übersetzen.
• Denk daran, dass der Output HTML ist. Er ist dafür gebaut, in ein Projekt zu fallen, das du bereits begonnen hast.

FAQ

Muss ich ein bestimmtes Modell verwenden? Nein. Open Design steuert jeden Agenten, den du konfiguriert hast — Claude Code, Codex, Cursor, Gemini, OpenCode und mehr — oder deinen eigenen API-Key. Kein Anbieter-Lock-in.

Wie unterscheidet sich das von Claude Design? Gleiches vertrautes Gefühl, aber kostenlos, quelloffen, local-first, modellunabhängig und weitaus anpassbarer — du kannst eigene Skills und Abläufe hinzufügen. Dazu Bild- und Videogenerierung, die ein Single-Provider-Tool dir nicht bietet.

Kann ich das, was ich baue, in eine bestehende App einbinden? Ja — die Outputs sind HTML-Dateien, also sind sie dafür gedacht, in ein Projekt zu fallen, das du bereits begonnen hast. Sean behandelt spezifikationsgetriebene Merge-Workflows in einem Begleitvideo.

Ist es kostenlos? Die App ist Open Source unter Apache-2.0 und kostenlos lokal lauffähig. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und der Anbieter, die du anschließt.

---

Dieser schriftliche Leitfaden basiert auf Sean Kochels praxisnahen Demos. Sieh dir das vollständige Video oben an und abonniere Sean Kochel für weitere AI-Build-Workflows.