OpenDesigner: Mit ein paar Antworten ein Designsystem für das Projekt aufbauen

Für wen das gedacht ist

Für Entwicklerinnen und Entwickler und kleine Teams, die bereits einen KI-Coding-Assistenten nutzen, deren Projekt aber noch keine einheitlichen visuellen Regeln hat: Sie haben vielleicht ein paar Design-Screenshots oder ein paar mündliche Beschreibungen, während Farben, Schriften und Abstände im Code in jeder Seite anders gesetzt sind; oder das Projekt ist so neu, dass niemand Zeit hat, zuerst ein ganzes Designsystem aufzubauen. Das ist eine Erweiterung für die KI-Werkzeuge, die Sie bereits nutzen: Sie macht schwer formulierbaren Geschmack in Dateien um, die der Code direkt verwenden kann, statt Sie in ein weiteres Designprogramm zu schicken; es ist ein kostenloses Open-Source-Projekt unter MIT-Lizenz, das Ihren Editor nicht ersetzt, sondern ihm eine Ebene an Fähigkeiten hinzufügt. Wer ein paar kurze Fragen beantworten, die Ergebnisse im Projektverzeichnis akzeptieren und vor dem Merge noch einmal selbst durchsehen möchte, ist gut aufgehoben, um es einmal auszuprobieren. Wer gerade fremden Code übernommen hat und erst einmal den visuellen Ton ergründen will, kann es ebenso für einen kurzen Rundgang nutzen.

In 3 Minuten zum ersten Versuch

Prüfen Sie zuerst die Voraussetzung: Auf dem Rechner muss Python 3.10 oder neuer installiert sein. Die Engine ist eine einzelne Python-Datei, es müssen keine Abhängigkeiten installiert werden.

Erstens, die Skill installieren. Der empfohlene Weg ist der Plugin-Marktplatz von Claude Code: Geben Sie im Gespräch /plugin marketplace add ckryptickunal/OpenDesigner ein, drücken Sie die Eingabetaste und geben Sie anschließend /plugin install opendesigner@opendesigner ein.

Zweitens, den Installationsort kennen. Werkzeuge mit Unterstützung für Agent Plugins lesen die plugin.json im Wurzelverzeichnis, während Clients, die Skills lesen, Dateien per Konvention aus dem Verzeichnis .agents/skills/ beziehen; Clients ohne Plugin-Marktplatz brauchen Sie, wenn Sie den Skill selbst in .agents/skills/ Ihres Projekts kopieren.

Drittens, eine Aufgabe mit geringem Risiko auslösen. Öffnen Sie Ihr Projekt, sagen Sie im Gespräch "Create a design system for this project.", und es stellt höchstens fünf kurze Fragen, jede mit einer vorgeschlagenen Antwort und der Begründung dahinter, sodass Sie jede einzelne bestätigen oder umschreiben können. Führen Sie den ersten Durchlauf möglichst in einem sauberen Verzeichnis aus oder legen Sie zuerst einen Branch an, damit die erzeugten Tokens sich nicht mit bestehendem Code vermischen.

Viertens, Nebenwirkungen und Bestätigungspunkte vorher abstimmen. Die Engine schreibt ihr Ergebnis als DESIGN.md, PRODUCT.md sowie als Verzeichnis opendesigner/ mit Tokens, den verschiedenen Exporten und einer Übersichtsseite. Das Schreiben auf die Festplatte überschreibt Inhalte des Repositorys direkt, also legen Sie vorher einen Branch an oder machen Sie einen Commit; lassen Sie erst schreiben, wenn die Antworten bestätigt sind.

Fünftens, auf beobachtbare Erfolgszeichen achten. Die drei genannten Artefakte tauchen im Projekt auf, und die Selbstprüfung meldet keine Fehler: Textkontrast wird nach WCAG 2.2 AA geprüft, Klickziele sind mindestens 24 px groß, Tastaturfokus ist sichtbar, und die Einstellung „reduzierte Bewegung" wird berücksichtigt; jeder Fehler hält den Build an.

Anwendungsfälle

Fall eins: ein erstes Designsystem für ein neues Projekt aufbauen. Nach der Installation des Plugins sagen Sie im Projekt den englischen Auslösesatz oben, beantworten die höchstens fünf kurzen Fragen und erhalten ein vollständiges Designsystem statt verstreuter Einzelteile. Die erste Version muss nicht perfekt sein, sie ist der Startpunkt für weitere Fragen und Iterationen. Danach lässt sich vertiefen: Farben, Schriften, Abstände und Bewegung lassen sich jeweils in einer weiteren Runde von Fragen verfeinern, und die Ergebnisse landen weiterhin in denselben drei Dateien und Verzeichnissen. Die Belege enden hier: Die offizielle Dokumentation nennt die Obergrenze von fünf Fragen und die vier Verfeinerungsdimensionen, sagt aber nicht, ob sich die Anzahl der Fragen anpassen lässt, und beschreibt auch nicht die Interaktionsform jeder Verfeinerungsrunde.

Fall zwei: denselben Skill in Clients ohne Plugin-Marktplatz wiederverwenden. Kopieren Sie den Skill in das Verzeichnis .agents/skills/ Ihres Projekts, fordern Sie wie gewohnt im Gespräch ein Designsystem an und beantworten Sie die Fragen; die Ergebnisse und die Selbstprüfung sind genau dieselben wie in Fall eins. Wenn im Projekt bereits Konventionen für Tokens existieren, prüfen Sie vor dem Kopieren, dass die beiden Namensschemata nicht kollidieren. Die offizielle Dokumentation sagt nur, dass diese Clients Skills aus diesem Verzeichnis lesen; sie erklärt nicht, wie man nach dem Kopieren aktualisiert, und nennt keine zusätzlichen Abhängigkeiten oder Konfigurationsschritte.

Grenzen des Einsatzes

Die Engine hat genau eine harte Anforderung: Python 3.10 oder neuer, darüber hinaus wird nichts installiert. Die Installationswege sind ebenfalls nur die, die offiziell dokumentiert sind: Außerhalb des Plugin-Marktplatzes muss der Skill von Hand kopiert werden, und für diesen manuellen Weg gibt es offiziell keinen Befehl für automatische Updates oder eine Prüfung. Zur Laufzeit überschreibt sie Projektdateien direkt, also sorgen Sie vorher für Branch oder Commit. Die eingebaute Selbstprüfung ist eine harte Hürde: Zu geringer Kontrast nach WCAG 2.2 AA, Klickziele unter 24 px, nicht sichtbarer Tastaturfokus oder eine nicht behandelte Einstellung „reduzierte Bewegung" halten den Build an; sie repariert nichts für Sie, nach der Korrektur muss der Lauf wiederholt werden. Die Voraussetzung der Fünf-Fragen-Runde ist, dass die Fragen selbst kurz zu beantworten sind; bei komplexen Geschäftsregeln kann die Engine nicht entscheiden. Ein Designsystem ist zudem kein Endprodukt: Tokens und Dokumente liegen im Repository, und wie sie mit einer bestehenden Komponentenbibliothek zusammengeführt und ob sie in die Versionsverwaltung aufgenommen werden, ist in der offiziellen Dokumentation nicht beschrieben, das müssen Sie selbst entscheiden. Repository: <https://github.com/ckryptickunal/OpenDesigner >.