Open Design für Teams — versionierbare Skills, ein eigenes Brand-System und Anti-Slop-Leitplanken

In diesem Leitfaden geht es darum, Open Design als echten, versionierbaren Design-Workflow zu nutzen — nicht bloß als einmaligen Prototyp-Generator. Die Kombination, die es für ein Team interessant macht: dein bereits genutzter Agent, dateibasierte Skills und Brand-DESIGN.md-Systeme, ergänzt um Anti-Slop-Leitplanken, damit das Ergebnis nicht generiert aussieht. Er folgt der Analyse, die AICodeKing in seinem Video gibt, neu geschrieben und auf den aktuellen Release gebracht. Schau dir das Video oben für die vollständige Erklärung an oder lies weiter für die schriftliche Fassung.

Die Plugin-Bibliothek: installiere Skills direkt aus der Registry – einschließlich Anti-Slop-Design-Skills.

Was ist Open Design?

Open Design ist eine lokal-first, quelloffene Design-App, die sich mit dem Coding-Agenten verbindet, den du ohnehin schon nutzt. Statt ein eigenes Modell mitzuliefern, erkennt sie Tools wie Claude Code, Codex, Cursor, Gemini, OpenCode und Qwen Code anhand deines Pfads und nutzt diesen Agenten als Design-Engine — mit einem Anthropic-API-Fallback (BYOK), falls keines installiert ist. Sie steht unter Apache-2.0, und der einzige Kostenpunkt ist das Modell, das du wählst. Wie AICodeKing es formuliert, ist sie „eine Design-Hülle um die Agenten, die du bereits hast“.

Warum es ein Team-Workflow ist, nicht nur eine Chat-Box

Der Grund, warum AICodeKing es so schätzt: Es ist keine leere Prompt-Box mit Vorschau. Der Wert liegt in der Kombination dreier Dinge, die allesamt versionierbar sind:

1. Dein vorhandener Coding-Agent — die Engine, bereits bezahlt.
2. Dateibasierte Skills — jeder Skill gibt dem Agenten Regeln für eine bestimmte Oberfläche (SaaS-Landingpage, Dashboard, Preisseite, Doku, Blog, Mobile-App, Decks), statt „mach mir eine schöne Seite“.
3. DESIGN.md-Brand-Systeme — reine Markdown-Designsysteme für Farbe, Typografie, Abstände, Layout, Komponenten, Motion, Tonalität, Markenregeln und Anti-Patterns.

Da Skills und Designsysteme Dateien sind, kann ein Team seinen eigenen internen Dashboard-Skill und seine eigene Brand-DESIGN.md erstellen, sie ins Git committen und Claude Code, Codex oder einen beliebigen Agenten Artefakte erzeugen lassen, die diesen Regeln folgen. Das ist ein versionierter, forkbarer, reviewbarer Design-Workflow — etwas, das eine abgeschottete Design-Chat-Box nicht bieten kann.

Der Plugin-Hub: durchsuche die Registry, importiere Plugins und bereite sie für dein Team vor.

Die Anti-Slop-Maschinerie

AICodeKings Lieblingsteil und der Grund, warum die Team-Ergebnisse vorzeigbar bleiben: Open Design bekämpft die verräterischen Merkmale KI-generierter UI. Der Prompt-Stack durchläuft eine mehrdimensionale Kritik, bevor ein Artefakt ausgegeben wird (Designphilosophie, Hierarchie, Ausführung, Spezifität, Zurückhaltung), jeder Skill kann eine P0/P1/P2-Checkliste mitliefern, die der Agent erfüllen muss, und das Repo verbietet ausdrücklich die üblichen Fehlermuster — aggressive lila Verläufe, generische Emoji-Icons, willkürliche abgerundete Karten mit Akzent am linken Rand, gefälschte Metriken, dekorativer Füllstoff. Gepaart mit dem Discovery-Formular (es fragt vor dem Schreiben nach Oberfläche, Zielgruppe, Tonalität, Marke, Umfang) und dem Richtungswähler (kuratierte visuelle Richtungen mit deterministischen Paletten) hat der Agent eine stabile Quelle der Wahrheit, statt bei jeder Verfeinerung abzudriften.

Installation

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

Öffne die ausgegebene lokale URL (ein dynamischer Port — nicht fest verdrahten). Lieber ohne Einrichtung? Hol dir die Desktop-App unter open-design.ai/download. Beim ersten Laden erkennt sie deine installierten Agent-CLIs; wähle eine aus oder nutze die Anthropic-BYOK-Option. Durchstöbere die vollständige Plugin-Bibliothek unter open-design.ai/plugins.

Eine Demo mit Team-Note

Der von AICodeKing vorgeschlagene Ablauf lässt sich sauber auf echte Arbeit übertragen: Wähle Codex oder Claude Code als Agent, einen Skill (SaaS-Landingpage oder Dashboard) und ein Designsystem (z. B. Linear oder Stripe — leicht zu beurteilen). Gib etwas Konkretes als Prompt vor, etwa eine Landingpage für ein internes Produkt, fülle das Discovery-Formular aus, wähle eine Richtung und lass es laufen. Der Plan streamt herein, der Agent liest den Skill und die DESIGN.md und schreibt echte Dateien.

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

Die Ergebnisse werden in einer Sandbox-Vorschau gerendert und lassen sich als HTML, PDF, ZIP und Markdown exportieren (PPTX-artig bei Deck-Skills). Da Designsystem und Skill im Prompt-Stack bleiben, driften Verfeinerungen nicht ab — der Agent behält eine stabile Referenz, statt den Look in jeder Runde neu zu erfinden.

Sei ehrlich beim Thema Produktion

AICodeKing sieht das nüchtern, und du solltest es auch: Dies ist ein frühes Projekt, behandle es also als starken Ausgangspunkt, nicht als sofort einsetzbares Produktions-Designteam. Die Ergebnisqualität hängt stark vom Modell ab, auf das du es richtest — ein schwaches Modell plus ein gutes Designsystem ergibt immer noch schwaches Designurteil. Claude Code bekommt das reichhaltigste Streaming; andere CLIs sind zeilengepuffert. Und da der Daemon Agenten mit einem Arbeitsverzeichnis startet, überleg dir gut, welche Skills du installierst und welche Verzeichnisse du freigibst. Für schnelle Prototypen, Landingpages, interne Dashboards und Decks ist es wirklich nützlich; für ausgelieferte Produktions-UI gilt: generieren, dann den Code reviewen, Responsiveness testen und verfeinern.

Tipps

• Schreib deinen eigenen Skill + Brand-DESIGN.md und committe sie — das ist die Superkraft des Teams.
• Wähl ein wiedererkennbares Designsystem (Linear/Stripe), wenn du Ergebnisse beurteilst, damit die Qualität leicht einzuschätzen ist.
• Stütze dich auf das Discovery-Formular und den Richtungswähler, um die Richtung vor der Generierung festzulegen.
• Nutze eine lokale CLI, damit die Generierung auf einem Abo läuft, das du ohnehin bezahlst.
• Behandle das Ergebnis als Ausgangspunkt für die Produktion — reviewen, testen, verfeinern.

FAQ

Kann ein Team eigene Skills und Designsysteme bauen? Ja — Skills sind Ordner und Designsysteme sind DESIGN.md-Dateien. Committe sie ins Git, und jeder verbundene Agent generiert dagegen, sodass der gesamte Workflow versioniert und forkbar ist.

Was verhindert, dass das Ergebnis KI-generiert aussieht? Eine mehrdimensionale Selbstkritik vor der Ausgabe, skillspezifische P0/P1/P2-Checklisten und ein ausdrückliches Verbot gängiger Slop-Muster (lila Verläufe, generische Icons, gefälschte Metriken), dazu das Discovery-Formular und der Richtungswähler.

Ist es produktionsreif? Es ist ein früher, leistungsfähiger Ausgangspunkt. Nutze es für Prototypen, Dashboards, Landingpages und Decks; für Produktions-UI reviewe und verfeinere den generierten Code.

Ist es kostenlos? Die App ist quelloffen unter Apache-2.0 und lokal kostenlos lauffähig. Du zahlst nur für die Modellnutzung des jeweils verbundenen Agenten und Schlüssels.

---

Dieser schriftliche Leitfaden basiert auf der Analyse von AICodeKing. Schau dir das vollständige Video oben an und abonniere AICodeKing für weitere tiefgehende Analysen zu KI-Tools.