Vom Prompt zur Live-URL — Bearbeiten, Inspizieren und Ein-Klick-Deploy mit Open Design

Diese Anleitung bringt einen Prototyp vom Prompt bis zur Live-URL: ein Designsystem auswählen, generieren, mit den Werkzeugen Edit und Inspect direkt auf der Canvas feinjustieren und dann direkt auf Vercel oder Cloudflare Pages deployen – ohne Open Design zu verlassen. Sie folgt der Demo, die 01Coder in seinem Walkthrough durchführt, für diesen Textbeitrag aufbereitet und auf den aktuellen Release gebracht. Sieh dir das Video oben für den Live-Durchlauf an oder lies weiter für die Textversion.

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

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform, die auf dem Coding-Agenten läuft, den du bereits nutzt — Claude Code, Codex, Gemini, Hermes und mehr — oder auf deinem eigenen API key. Sie wird als Desktop-App ausgeliefert (kein Kompilieren nötig) und kombiniert eine umfangreiche Bibliothek von Skills mit einer umfangreichen Bibliothek markenwürdiger Designsysteme, sodass du von einer echten Ästhetik statt von einer leeren Leinwand startest.

• Open Source, Apache-2.0 — klone es, hoste es selbst oder lade einfach die App herunter.
• Läuft lokal — deine Projekte liegen auf deinem eigenen Rechner.
• Agent-austauschbar — wechsle den Agenten jederzeit unten links.
• Designsysteme echter Marken — Apple, Airbnb, ElevenLabs und viele mehr.

Schritt 1 — Installieren und ein Designsystem wählen

Der einfachste Weg ist die Desktop-App von open-design.ai/download (macOS und Windows; Docker oder pnpm, falls du lieber aus dem Quellcode arbeitest). Beim Start zeigt sich unten links der aktive Agent (01Coder nutzt Codex) — klicke darauf, um zu wechseln.

Erstelle ein Prototype, gib ihm einen Namen und wähle aus dem Dropdown ein Designsystem — jeder Eintrag verleiht der Ausgabe den Look dieser Marke. Wenn du bereits etwas in Claude Design gebaut hast, importiere dessen ZIP hier.

Die Plugin-Bibliothek: Installiere Skills direkt aus dem Registry — einschließlich Anti-Slop-Design-Skills.

Schritt 2 — Generieren mit Discovery + einer visuellen Richtung

Schreibe dein Briefing und sende es ab. Open Design stellt eine kurze Reihe von Discovery-Fragen (für wen es ist, der Designton, der Markenkontext, die Sprache) und bietet dann einen Visual-Direction-Picker an — 01Coder wählt eine redaktionelle „FT Magazine“-Richtung. Wähle eine aus, und es baut rechts die erste Version.

Schritt 3 — Verfeinern mit Edit und Inspect

Hier feilst du, ohne erneut zu prompten:

• Edit — klicke ein beliebiges Element an und ändere seinen Inhalt direkt. 01Coder kürzt ein Label von „GitHub“ zu „GH“ und schreibt ein Wort einer Überschrift um, dann klickt er auf apply content. Links kannst du auf dieselbe Weise anpassen, und das linke Panel zeigt das Artefakt nach Ebenen geordnet.
• Inspect — für den visuellen Stil. Beim ersten Mal warnt es, dass das Artefakt keine data-oid-Tags hat; lass den Agenten sie hinzufügen (so kann Open Design Elemente zuverlässig ansprechen), dann neu laden. Nun kannst du durch Klick auf ein beliebiges Element (etwa die h1 des Heros) Farbe, Hintergrund und Schriftgröße anpassen, mit einem Reset, falls du übers Ziel hinausschießt.

Für größere Änderungen geh zurück in den Chat für direktes konversationelles Editieren — Edit/Inspect sind für die schnellen, chirurgischen Feinabstimmungen.

Schritt 4 — Mit einem Klick auf eine Live-URL deployen

Wenn es so weit ist, exportiert das Share-Menü (oben rechts) als PDF, PPTX, ZIP oder eigenständiges HTML — oder deployt mit einem Klick auf Vercel oder Cloudflare Pages. So nutzt du Cloudflare wie 01Coder:

1. Klicke auf deploy → Cloudflare, dann get / create an API token.
2. Erstelle ein benutzerdefiniertes Token mit der Berechtigung Cloudflare Pages, fahre zur Zusammenfassung fort und erstelle es.
3. Füge das Token in Open Design ein, ergänze deine account ID (kopiere sie aus dem Cloudflare-Dashboard) und deploye.
4. Öffne den Link, den es dir gibt — wenn der erste Aufruf seltsam aussieht, lade ein- oder zweimal neu, während es sich verbreitet.

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

Mit dem Live-Ergebnis unzufrieden? Geh zurück in den Chat, iteriere und deploye erneut.

Tipps

• Starte von einem Designsystem, damit der erste Durchlauf schon markengerecht ist.
• Lass den Agenten data-oid-Tags hinzufügen, bevor du Inspect nutzt, dann lade die Vorschau neu.
• Nutze Edit für Text, Inspect für Stil, den Chat für Struktur — wähle das richtige Werkzeug für die Änderung.
• Für ein Cloudflare-Deploy brauchst du beides: ein API-Token (mit Pages-Berechtigung) und deine account ID.
• Aktualisiere nach dem ersten Deploy, falls sich die Seite noch nicht verbreitet hat.

FAQ

Kann ich wirklich aus Open Design heraus auf eine öffentliche URL deployen? Ja — das Share-Menü deployt mit einem Klick auf Vercel oder Cloudflare Pages (du stellst das Provider-Token bereit; Cloudflare benötigt zudem deine account ID).

Was ist data-oid und warum verlangt Inspect es? Es ist ein Attribut, das Open Design Elementen hinzufügt, um sie zuverlässig ansprechen zu können. Lass den Agenten es hinzufügen, lade neu, und Inspect funktioniert.

Muss ich aus dem Quellcode arbeiten? Nein — lade die Desktop-App für macOS oder Windows herunter. Docker und pnpm aus dem Quellcode sind Optionen, falls du das bevorzugst.

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

---

Diese schriftliche Anleitung basiert auf 01Coders praktischer Demo. Sieh dir das vollständige Video oben an und abonniere 01Coder für weitere tiefe Einblicke in KI-Produkte.