Der Designer Benji Taylor hat am 31. Oktober Stageshow veröffentlicht, einen Skill für KI-Agenten zum Programmieren wie Claude Code, Codex oder Gemini. Damit sollen nachgebaute Produktoberflächen auf Landingpages, in Dokumentationen und in Funktionsübersichten weniger nach Bastelei aussehen. Heraus kommt eine gewöhnliche React-Komponente, als Standbild oder als kurze Animation mit Mauszeiger.
Ein Klick · kostenlosDr. Web bei Google bevorzugenMarkieren Sie drweb.de als bevorzugte Quelle. Dann sehen Sie unsere Artikel öfter unter den Top-Meldungen.Jetzt hinzufügenInhalt 4 Abschnitte
Gängige Sprachmodelle können solche Demos laut Taylor bereits ohne Hilfe bauen, die Ergebnisse wirkten aber oft schlampig und überladen.[1] Stageshow hält deshalb die vielen kleinen Gestaltungsentscheidungen fest, die er bisher von Hand getroffen hat. Taylor hat auch die Befehlsmenü-Bibliothek cmdk und die Zeichen-Toolbar Drawesome veröffentlicht.
Das Wichtigste in Kürze
- Stageshow liefert Regeln, Musterbeispiele, React-Bausteine und Prüfskripte für nachgebaute Produktoberflächen.
- Der Agent zeichnet seine Demo selbst auf und prüft die Einzelbilder, bevor er sie abgibt.
- Der Code steht unter MIT-Lizenz, mitgelieferte App-Symbole und Markenzeichen sind davon ausgenommen.
Was bringt Stageshow dem Agenten bei?
Stageshow gibt dem Agenten einen Ablauf in sieben Schritten vor, Musterbeispiele zum Kopieren und eine Liste von fünf typischen Fehlern. Die meisten Entscheidungen fallen, bevor der Agent Code schreibt.
Die Anleitung nennt fünf Fehlerbilder: zu viel echter Text in jeder Zeile, ein bloßes Wireframe aus grauen Kästen, ein ganzes Fenster verkleinert in eine Karte gesetzt, alles gleich gewichtet oder eine graue Standardoptik trotz anders lautender Vorgabe.[2] Stattdessen soll der Agent nur drei bis sieben echte Textstellen setzen und den Rest mit Platzhalterlinien füllen.
Der Ablauf führt von Format und Optik über den Handlungsablauf der Demo in drei bis fünf Schritten bis zur Choreografie der Bewegungen. Animationen sollen 10 bis 16 Sekunden dauern. Nutzt das eigene Produkt Design-Tokens, übernimmt der Agent dessen Farben, Schriften und Eckenradien, statt eine fremde Optik zu erfinden.
Im letzten Schritt zeichnet das Skript film.mjs die Demo auf und legt die Bilder als Kontaktabzug nebeneinander. Weitere Skripte suchen Sprünge, die nur ein einzelnes Bild lang sichtbar sind, und Beschriftungen, die nicht in ihre Fläche passen.[1] Taylor räumt ein, dass die meisten Demos trotzdem mehrere Korrekturschleifen brauchen.
Was setzt Stageshow voraus und was kostet es?
Stageshow ist kostenlos und steht unter MIT-Lizenz. Installiert wird es mit dem Kommandozeilenwerkzeug skills von Vercel, das Node.js ab Version 22.20 voraussetzt.
Der Befehl lautet npx skills add benjitaylor/skills --skill stageshow. Das Werkzeug installiert Skills für Claude Code, Codex, Cursor und laut Vercel mehr als 75 weitere Agenten.[4] Die Bausteine setzen auf React 18, eine Testumgebung im Browser zeigt alle Beispiele und jeweils eine schwache und eine gelungene Fassung nebeneinander.
Die Lizenz deckt nicht alles ab. Laut den Lizenzhinweisen im Repository gehören die mitgelieferten App-Symbole nicht zum MIT-Paket, Produktnamen und Markenzeichen bleiben bei ihren Inhabern.[3] Beispiele mit fremden Marken müssen Anwender also auf das eigene Produkt umstellen. Das GitHub-Repository kam am 2. November auf 604 Sterne.
Eckdaten, Stand 2. November 2026
Stageshow und Remotion im Vergleich
Eine Produktdemo verkauft, was ein Kunde später wirklich bekommt. Lässt eine Agentur sie vom Agenten bauen, gehört jedes Bild neben das echte Produkt.
Michael Dobler, Herausgeber Dr. Web
Wie unterscheidet sich Stageshow von Remotion?
Remotion erzeugt aus React-Code Videos und Bilder, Stageshow liefert eine Komponente, die direkt auf der Website läuft. Remotion kostet zudem für Firmen mit mehr als drei Beschäftigten Lizenzgebühren.
Die kostenlose Lizenz von Remotion gilt für Einzelpersonen, gemeinnützige Organisationen und Unternehmen mit bis zu drei Beschäftigten. Größere Firmen brauchen eine kostenpflichtige Firmenlizenz.[5] Für Agenturen, die schon Motion Design mit KI und Remotion umsetzen, entfällt dieser Kostenpunkt bei Stageshow.
Eine Komponente auf der Seite muss dafür Regeln zur Barrierefreiheit einhalten. Nach Kriterium 2.2.2 der WCAG 2.2 braucht Bewegung, die von selbst startet, länger als fünf Sekunden läuft und neben anderen Inhalten steht, eine Möglichkeit zum Anhalten.[6] Stageshow zeigt bei aktivierter Systemeinstellung für reduzierte Bewegung ein Standbild und kennt neben der Endlosschleife die Modi „einmal“ und „beim Überfahren mit der Maus“.
Auch inhaltlich gibt es eine Grenze. Eine vereinfachte Demo darf weglassen, aber keine Funktionen zeigen, die das Produkt nicht hat. Das UWG wertet unwahre oder zur Täuschung geeignete Angaben über wesentliche Merkmale einer Ware oder Dienstleistung als irreführend.[7]
Quellen
7 Quellen anzeigenQuellen ausblenden
- Benji TaylorStageshow
- GitHub, benjitaylor/skillsStageshow, SKILL.md
- GitHub, benjitaylor/skillsStageshow, NOTICE.md
- GitHub, vercel-labs/skillsThe CLI for the open agent skills ecosystem
- GitHub, remotion-dev/remotionRemotion License
- W3CWCAG 2.2, Erfolgskriterium 2.2.2 „Pause, Stop, Hide“
- Gesetze im InternetGesetz gegen den unlauteren Wettbewerb, § 5
Mehr Newshunger?
- Libraries.dev als Agent-Skill: Coding-Agenten lernen sieben UI-Effekte samt Einbauregeln
- Anatomy: Ein Skill für Claude Code zeichnet Ideen als bewegliche Maschinen
- Craftwork: UI-Kits, Vorlagen und Schriften von Designern direkt im KI-Agenten
- Markdy: animierte Systemdiagramme aus Text statt aus dem Grafikeditor
- KI-Slop: So befreien Sie Ihr Webdesign vom Einheitslook
- Auswahlfelder sollten etwas verraten: Fünf Muster für gestaltbare Dropdowns in Chrome und Safari
