Open Design – komplette Funktionstour: Folien, Prototypen, Bilder, Video und ein Desktop-Begleiter

Dieser Leitfaden ist ein Überblick in die Breite über Open Design: kein einzelnes tiefes Projekt, sondern ein Streifzug durch alles, was der Workspace erstellen kann – Folien-Decks, Poster, Bilder aus einer Skizze, App-Prototypen aus einer Skizze, code-gesteuerte Motion Graphics, Video und sogar einen Desktop-Begleiter. Er folgt der Funktionstour, die 硅基麻辣拌 in seinem Walkthrough zeigt, ins Englische übertragen und auf den Stand der aktuellen Version gebracht. Sieh dir das Video oben für die Live-Vorführung an oder lies hier die schriftliche Fassung.

Der Open Design-Workspace – Prototypen, Folien-Decks, Bilder und Video auf einer ruhigen, vertrauten Arbeitsfläche.

Was ist Open Design?

Open Design ist eine quelloffene, local-first Designplattform, die auf dem Coding-Agenten aufsetzt, den du ohnehin nutzt. Das gesamte Projekt ist eine lokal bereitgestellte Web-App mit einer Modellschicht, die deinen eigenen Coding-Agenten vollständig unterstützt – egal ob du über einen API-Key, ein OAuth-Abonnement oder direkt über deine bestehende CLI verbindest.

硅基麻辣拌 hebt einen Punkt als echtes Highlight hervor: Du musst niemals einen API-Key oder ein Auth-Token offenlegen. Wenn du Open Design über die CLI auf dein lokales Codex oder Claude Code richtest, läuft die Generierung über Anmeldedaten, die dein Gerät nie verlassen – eine Sicherheitseigenschaft, die er sich von mehr quelloffenen Agent-Projekten wünschen würde. Im Video steuert er alles mit einem OpenAI Codex-Abonnement auf GPT-5.5.

Schritt 1 – Agenten installieren und verbinden

Der schnellste Weg ist die Desktop-App von open-design.ai/download – ganz ohne Konfiguration, und sie erkennt deine installierten Agent-CLIs automatisch. So läufst du 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 – fest verdrahte keinen). Wie 硅基麻辣拌 anmerkt, kannst du sogar das Lesen der Doku komplett überspringen: Gib deinem Agenten den Repo-Link und sag ihm, er soll Open Design über das Dev-Mode-Setup installieren. Beim ersten Start richtest du es auf deine lokale CLI – Codex, Claude Code, Cursor oder OpenCode – und schon kann es losgehen.

Was du tatsächlich erstellen kannst

Der Startbildschirm ist voller Beispiele – Webseiten, Poster, App-Icons, Motion Graphics, Titelbilder für Artikel, Animationen im Pixel-Stil, Folien-Decks, Finanzberichte, Magazin-Poster. Jedes Beispiel ist etwas, das die eingebauten Prompts und Skills von Open Design direkt erzeugen können, und jedes zeigt den Prompt und das Designsystem dahinter.

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

Gehen wir die Fähigkeiten eine nach der anderen durch.

Folien-Decks (PPT)

Klicke auf Slideshow, benenne es und wähle ein Designsystem (硅基麻辣拌 nutzt ein System im Anthropic/Claude-Stil). Open Design tut dann das, was es vom bloßen Bitten eines Agenten um Folien unterscheidet: Es erzeugt ein dynamisches Discovery-Formular auf Basis deines Prompts – Seitenverhältnis der Arbeitsfläche, Zielgruppe, Folienanzahl, Recherche-Positionierung, visuelle Richtung – und bestätigt, was du willst, bevor es baut. Das Formular ist nicht fest verdrahtet; es wird aus deinem Prompt generiert und auf dessen Lücken zugeschnitten. Das Ergebnis ist ein sauberes horizontales Deck in deinem gewählten Markenstil.

Bilder aus einer handgezeichneten Skizze

Open Design unterstützt handgezeichnete Eingaben. Skizziere etwas grob – im Video einen bewusst abstrakten „Drachen“ – und bitte es dann, aus dieser Skizze ein echtes Bild zu erzeugen. Es fragt nach Ausrichtung und Hintergrund, erzeugt das Bild und legt es zurück in deine Designdateien. Die Botschaft sitzt: Du brauchst keine Zeichenfähigkeiten, nur eine Idee.

App-Prototypen aus einer Skizze

Derselbe Trick, anderes Ergebnis. Zeichne ein grobes Wireframe – hier ein Kreis, dort ein Quadrat – speichere die Skizzendatei, referenziere sie dann und bitte um einen Mobile-App-Screen. Open Design nutzt dieselbe Schleife aus Formular, Bestätigung und Generierung und verwandelt die abstrakte Skizze in einen ausgereift wirkenden Screen.

Motion Graphics, in Code

Mit dem eingebauten Motion-Skill erzeugt 硅基麻辣拌 eine Animation zweier vermenschlichter iPhones, die sich treffen und unterhalten. Das geschieht komplett mit SVG- und CSS-Animation – jedes visuelle Element ist Code – sodass es sich sauber in ein Deck oder eine Seite einfügt, wenn etwas in Bewegung sein soll.

Die Vorlagen-Bibliothek: Ausgangspunkte für Prototyp, Folie, Bild und Video, die du nach Typ filtern und zum Loslegen forken kannst.

Bild- und Videoerzeugung

Die Bildbibliothek deckt gängige Fälle wie GPT Image ab, mit vorgefertigten Prompts – einen auswählen und generieren. Auch Video wird unterstützt, einschließlich modellgenerierter Clips und Produkt-/Dynamic-Deck-Effekte. Die bewegungsintensive Videoarbeit entsteht in Zusammenarbeit mit dem hyperframes-Projekt, das Code nutzt, um Produktprototypen und Datenvisualisierungs-Animationen anzutreiben.

Ein Desktop-Begleiter

Das charmanteste Feature: Zieh dir einen Begleiter heran. Wähle einen aus – auch von der Community beigetragene Figuren sind dabei – klicke auf Speichern, und er erscheint auf deinem Desktop, um mit dir zu interagieren. Eine Kleinigkeit, aber sie signalisiert ein Projekt, dem die emotionale Textur des Werkzeugs am Herzen liegt, nicht nur das Ergebnis.

Die ehrliche Einschätzung

硅基麻辣拌 geht fair mit den Kompromissen um. Unter der Haube liefert Open Design eine Reihe kombinierbarer Skills (nutzbar innerhalb von Open Design oder herauslösbar in dein eigenes Codex/Claude Code) und eine umfangreiche Bibliothek von Designsystemen, die bekannte Marken abdecken – und das gesamte Framework im Claude-Design-Stil ist im Repo quelloffen, sodass du selbst neue Designtypen hinzufügen kannst.

Die aktuelle Lücke: Einige Feinschliff-Funktionen fehlen noch – insbesondere ein pixelgenauer Kommentarmodus zum Annotieren und Korrigieren einer gerenderten Seite. Doch die ausgleichende Stärke ist real: breite Agent-Unterstützung (Codex, Claude Code, Cursor, OpenCode) ohne API-Key-Offenlegung und ein Projekt, das schnell iteriert. Wenn du eine skalierbare, erweiterbare Plattform willst, zu der du selbst beitragen kannst, ist es ein starker Einstiegspunkt.

Tipps

• Steuere es mit deiner lokalen CLI – kein API-Key verlässt dein Gerät, und die Generierung läuft über ein Abonnement, das du ohnehin bezahlst.
• Lass das Discovery-Formular seine Arbeit tun – seine Fragen vorab zu beantworten ist das, was Decks und Prototypen schon beim ersten Versuch sitzen lässt.
• Skizziere, statt zu beschreiben, wenn die Form zählt – handgezeichnete Eingabe funktioniert sowohl für Bilder als auch für App-Prototypen.
• Greif zum Motion-Skill, wenn ein Deck oder eine Seite etwas Animiertes braucht; es ist Code und damit portabel.
• Lös Skills in deinen eigenen Agenten heraus, wenn du eine Fähigkeit außerhalb der GUI willst.

FAQ

Muss ich einen API-Key offenlegen? Nein – das ist eine hervorgehobene Stärke. Steuere Open Design über die CLI mit deinem lokalen Codex, Claude Code, Cursor oder OpenCode, und die Anmeldedaten verlassen dein Gerät nie.

Kann es wirklich Video und Animation erstellen, nicht nur statisches Design? Ja. Es erstellt code-basierte Motion Graphics (SVG + CSS), Bild- und Videoerzeugung sowie bewegungsintensive Arbeit in Zusammenarbeit mit dem hyperframes-Projekt.

Was fehlt noch? Zum Zeitpunkt des Walkthroughs war der pixelgenaue Kommentarmodus zum Annotieren einer gerenderten Seite noch nicht verfügbar. Das Projekt bewegt sich schnell, prüfe also die aktuelle Version.

Ist es kostenlos? Die App ist quelloffen 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 verbindest.

---

Dieser schriftliche Leitfaden basiert auf der Funktionstour von 硅基麻辣拌. Sieh dir das vollständige Video oben an und abonniere 硅基麻辣拌 für weitere Walkthroughs zu KI-Werkzeugen.