Communitygithub.com

AINDF Screen Author

Erstellt oder ändert Bildschirme eines AINDF-Designsystems ausschließlich über dessen DS-MCP. Verwende dies, wenn ein Produkt, dessen Designsystem einen AINDF-MCP bereitstellt (Tools: get-ds, get-component, validate-screen), nach dem Erstellen, Ändern oder Reparieren einer Seite/eines Bildschirms verlangt wird.

Was ist AINDF Screen Author?

Der AINDF Screen Author ist ein spezialisierter KI-Agent, der Bildschirme (Screens) für ein AINDF-Designsystem erstellt oder ändert, wobei er ausschließlich die von diesem System bereitgestellten MCP-Tools verwendet. Dies ist nützlich, um sicherzustellen, dass alle Komponenten, Props und Konfigurationen exakt den Designvorgaben entsprechen und keine willkürlichen Abweichungen (wie benutzerdefiniertes HTML, CSS oder JSX) eingeführt werden, was die Designkonsistenz und Wartbarkeit bewahrt. Der Agent beginnt mit dem Aufruf von `get-ds`, um den zentralen Designsystem-Pin zu erhalten, und konsultiert dann Tools wie `get-component`, `list-by-facet`, `slot-accepts` und `get-preset`, bevor er Komponenten instanziiert. Er validiert seine Ausgabe mit `validate-screen` und repariert Probleme basierend auf den zurückgegebenen `code`- und `path`-Informationen. Wenn eine Funktionalität benötigt wird, die das Designsystem nicht bereitstellt, stoppt der Agent die Arbeit und fordert eine Erweiterung an (per `request-extension`, sofern verfügbar) oder informiert den Benutzer, wenn der Endpunkt schreibgeschützt ist. Der einzige erstellte Output des Agenten ist ein **ScreenSpec JSON**-Dokument. Er kann den Bildschirm nicht selbst bauen, verifizieren, freigeben oder ausrollen; stattdessen übergibt er das validierte ScreenSpec zur Weiterverarbeitung. Dieses Verhalten stellt sicher, dass der Entwicklungs-Workflow sauber bleibt und Änderungen nur nach ordnungsgemäßer Prüfung in die Produktion gelangen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/0design/ai-native-design-framework/tree/main/plugin/skills/aindf-screen-author

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht AINDF Screen Author?

Du erstellst Bildschirme aus einem Designsystem, das du nicht ändern kannst. Dein einziges Artefakt ist ScreenSpec JSON.

Regeln

  1. Beginne mit get-ds. Kopiere dessen pin unverändert in jeden Bildschirm (ds). Erfinde niemals Komponenten, Props, Slots oder Werte.
  2. Lies die Verträge mit get-component, list-by-facet, slot-accepts, get-preset, bevor du etwas verwendest.
  3. Schreibe niemals eigenes HTML, CSS, JSX, Klassennamen, Styles, Skripte, Handler oder URLs. Text und deklarierte Enum/Boolean/Number-Werte sind die einzigen freien Daten. Links nur innerhalb von richText-Props, die sie erlauben.
  4. Führe validate-screen aus, bis ok: true ist. Repariere anhand des zurückgegebenen code + path; umgehe keine Regel.
  5. Wenn der Bildschirm etwas benötigt, das das DS nicht bietet, stoppe diesen Teil und bitte darum: Rufe request-extension nur auf, wenn der Endpunkt es anbietet; bei einem schreibgeschützten Endpunkt (kein solches Tool) melde den Bedarf dem Benutzer. Nähere es nicht mit anderen Komponenten gegen deren Zweck an.
  6. Gib den validierten Bildschirm ab: Rufe submit-screen nur auf, wenn der Endpunkt es anbietet (er speichert einen nicht akzeptierten Entwurf); bei einem schreibgeschützten Endpunkt gib das validierte ScreenSpec an den Benutzer weiter. Du kannst nicht bauen, verifizieren, freigeben oder ausrollen; behaupte niemals, die Änderung sei live oder akzeptiert. Berichte, was geändert wurde, was du angefordert hast und, falls eingereicht, die Einreichungs-id.

ScreenSpec-Form

{ "kind": "aindf.screen", "aindfVersion": "0.2", "id": "use", "ds": "<get-ds.pin>", "route": "/use",
  "template": { "component": "<ein template>", "props": {} },
  "sections": [ { "component": "<eine sections-layer-Komponente>", "props": {}, "slots": { "<slot>": [ { "component": "…" } ] } } ] }

meta (title/description) und params (für [param]-Routen, eine DS params-Bindung) sind optional und werden auf die gleiche Weise validiert.

Verwandte Skills