Die Anti-Slop-Engine — Wie Open Design wie ein Senior gestaltet, nicht wie ein Freestyler

Die meisten KI-Designtools spucken ein generisches, seltsam lila-verlaufenes Durcheinander zurück. Dieser Leitfaden erklärt die Maschinerie, die dafür sorgt, dass Open Design das nicht tut — das mehrschichtige Qualitätssystem, das den Agenten zwingt, sich wie ein Senior-Designer zu verhalten, statt zu freestylen. Er folgt der Erklärung, die AI Teaches Better in ihrem Walkthrough gibt, neu geschrieben und auf den Stand der aktuellen Version gebracht. Sieh dir das Video oben an oder lies die Textfassung weiter.

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

Was ist Open Design?

Open Design ist ein Apache-2.0-, Local-First-Framework — die quelloffene Antwort auf geschlossene, reine Cloud-Designtools, die an ein einziges Modell gebunden sind. Der entscheidende Unterschied: Es bringt keinen eigenen KI-Agenten mit. Es ist ein meisterhafter Orchestrator, der die Designarbeit an die Coding-Agent-CLIs delegiert, die du bereits hast. Starte es, und sein lokaler Daemon scannt deinen Rechner, erkennt CLIs automatisch — Claude Code, Codex, Cursor, Gemini, Copilot und mehr — und macht aus dem, was er findet, deine Kandidaten-Design-Engines, eingebunden über stdio. Kein Vendor-Lock-in; Engines mit einem Klick tauschen. Keine CLI installiert? Es gibt einen OpenAI-kompatiblen Proxy-Fallback — gib einfach eine beliebige Base-URL und einen Key ein.

Skills × Designsysteme = beabsichtigtes Ergebnis

Zwei Bibliotheken erledigen die Schwerstarbeit:

• Kombinierbare Skills — Ordner, die dem Agenten die strukturelle DNA eines Artefakts vermitteln: eine SaaS-Landingpage, ein Daten-Dashboard, eine PM-Spezifikation, eine Multi-Screen-Mobile-App. Wähle einen Skill, und er weiß bereits, wie das Ding gebaut werden sollte.
• Designsysteme auf Markenniveau — deterministische Designregeln, abgeleitet von Top-Marken (Linear, Stripe, Vercel, Apple, Notion). Struktur × Stil multipliziert sich zu einem riesigen Raum aus Kombinationen von Funktion und Optik, alles nativ auf deinem Rechner.

Keine bestimmte Marke im Sinn? Es greift auf kuratierte visuelle Richtungen zurück (Editorial Monocle, Modern Minimal, Tech Utility, Brutalist, Soft Warm) und legt deterministische OKLCH-Paletten und Font-Stacks fest — wodurch der KI die Fähigkeit genommen wird, die Stimmung zu freestylen.

Der Plugins-Hub: durchstöbere die Registry, importiere Plugins und bereite sie für dein Team vor.

Die Anti-Slop-Engine (die sechs Schichten)

Das ist der Kern. Bevor du je ein Artefakt zu Gesicht bekommst, durchläuft Open Design eine sechsschichtige Verteidigung, die AI Teaches Better klar darlegt:

1. Discovery-Formular — bevor auch nur ein Pixel geschrieben wird, fragt es nach Tonalität, Zielgruppe und Marke, um die Richtung festzulegen.
2. Markenextraktion — gibst du ihm eine URL, extrahiert es die Markenspezifikation systematisch.
3. Stille Selbstkritik — es führt eine fünfdimensionale Kritik an der eigenen Arbeit durch, bevor es sie zeigt.
4. P0–P2-Checkliste — das Ergebnis muss eine rigorose Prioritäten-Checkliste bestehen.
5. Fest codierte Blacklist — generische Verläufe und diese seltsamen, abgerundeten Karten mit linkem Rand sind buchstäblich verboten.
6. Ehrliche Platzhalter — graue Blöcke statt erfundener Fake-Kennzahlen wie „10x schneller“.

Die Formulierung, die es auf den Punkt bringt: „Das ist keine KI, die versucht, etwas zu gestalten — das ist eine KI, die darauf trainiert ist, sich wie ein Senior-Designer zu verhalten.“ Der Prompt-Stack plus tiefe Dateisystem-Integration ist es, was das Ergebnis hebt und den KI-typischen Slop verhindert, den alle leid sind.

Slide-Deck-Modus: wähle eine Deck-Kategorie und forke ein Beispiel als Ausgangspunkt.

Mehr als UI: ein lokales Kreativstudio

Dieselbe Chat-Oberfläche treibt auch Rich Media an — Bildgenerierung (GPT Image), kurze cineastische Text-to-Video-Clips, Motion Graphics über hyperframes, sogar Audio — mit sofort replizierbaren Vorlagen für Medien-Prompts, sodass du nie vor einer leeren Leinwand stehst.

Erste Schritte (drei Schritte)

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

Der lokale Daemon startet, erkennt deine CLI-Agenten automatisch und richtet seinen SQLite-Speicher von selbst ein — keine komplizierte Konfiguration. Öffne die lokale URL, die er ausgibt (ein dynamischer Port — codiere keinen fest), oder hol dir die Desktop-App von open-design.ai/download. Dank dieses lokalen Speichers sind nach dem Zuklappen deines Laptops deine Tabs und generierten Dateien genau dort, wo du sie verlassen hast. Du kannst sogar ein Claude-Design-Export-ZIP hineinziehen und lokal weiterbearbeiten, mit Klick-zum-Kommentieren-HTML-Vorschauen chirurgische Änderungen vornehmen oder mit einem Klick auf Vercel deployen.

Tipp: Stößt du beim Iterieren an API-Ratenlimits? Da Open Design Standard-Umgebungsvariablen verwendet, kannst du die Base-URL auf einen OpenAI-kompatiblen Proxy richten und weitermachen.

Tipps

• Behandle das Discovery-Formular als Schritt null — es ist die erste Schicht der Anti-Slop-Engine.
• Starte von einem echten Designsystem (oder einer kuratierten Richtung), damit der Agent die Optik nie freestylet.
• Lass die Selbstkritik und die Checkliste laufen — genau das fängt den Slop ab, bevor du ihn siehst.
• Tausche Engines je nach Aufgabe — ein starkes Modell für die Optik, ein anderes für die Funktionalität; ein Klick.
• Nutze eine Proxy-Base-URL, wenn du an Ratenlimits stößt.

FAQ

Was hält das Ergebnis tatsächlich davon ab, KI-generiert auszusehen? Eine sechsschichtige Engine: Discovery-Formular, Markenextraktion, fünfdimensionale Selbstkritik, P0–P2-Checkliste, eine fest codierte Blacklist von Slop-Mustern und ehrliche Platzhalter statt Fake-Kennzahlen.

Enthält Open Design ein eigenes Modell? Nein — es orchestriert die Coding-Agent-CLIs, die bereits auf deinem Rechner sind (oder einen OpenAI-kompatiblen Proxy). Du bringst die Engine; es bringt die Designdisziplin.

Kann ich die Skills und Designsysteme anpassen? Ja — beides sind Dateien. Füge deinen eigenen Skill-Ordner oder dein Designsystem hinzu, und es wird erkannt.

Ist es kostenlos? Die App ist quelloffen unter Apache-2.0 und lokal kostenlos auszuführen. Du zahlst nur für die Modell- und Mediennutzung des jeweiligen Agenten und der Anbieter, die du anbindest.

---

Dieser geschriebene Leitfaden basiert auf der Erklärung von AI Teaches Better. Sieh dir oben das vollständige Video an und abonniere AI Teaches Better für weitere Analysen von KI-Architektur.