prototypevon Emil Kowalski

Prototype Skill.

Ein Claude Code und Codex Skill für UI-Design: erstellt mehrere wirklich unterschiedliche Versionen eines UI-Elements hinter einem Live-Auswahlwerkzeug.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

emilkowalski/skills · skills/prototype/SKILL.mdSKILL.md

--- name: prototype description: Build multiple genuinely different versions of a UI piece you describe, rendered behind a visual picker so you can flip through them live and promote the one that feels right. Only runs when explicitly invoked; it does not trigger on its own. --- ## Operating Posture ## Hard Rules ## Workflow ## Invocation Variants ## Tone

Metadaten und Abschnittsüberschriften aus der Quelldatei vom 14.09.2026 · 7.432 Zeichen insgesamt

01 Was es tut

Was der prototype-Skill in Claude Code und Codex tut

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Ein Divergenz-Skill zur Erkundung eines einzelnen UI-Elements — ein Toast, die Pricing-Card, ein Hold-to-Delete-Button. Er nimmt ein beschriebenes Element, erstellt mehrere wirklich unterschiedliche Versionen davon, die entlang einer benannten Achse divergieren (Layout, Dichte, Persönlichkeit, Bewegung, Interaktionsmodell), und stellt sie hinter einen visuellen Picker, sodass der Nutzer live durchblättern und einen Gewinner bestimmen kann.

Er läuft nur bei expliziter Aufforderung, verwendet standardmäßig drei Varianten, hält die Exploration aus dem Produktionscode heraus und löscht die Prototyp-Oberfläche, sobald eine Variante integriert ist.

Was er erzeugt

Ein live visueller Picker mit den Varianten, sodass man sie durchblättern und eine davon zum Gewinner machen kann.
Eine Vergleichstabelle, die die Achse jeder Variante benennt, wann sie die richtige Wahl ist und welche Kosten sie mit sich bringt.
Produktionscode für die gewählte Variante, integriert in die Codebasis, wobei die Prototyp-Oberfläche gelöscht wird.
Screenshots jeder Variante, sofern Browser-Tooling verfügbar ist.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Auf ein Element beschränken
Umfasst das Briefing mehrere Komponenten, wählt der Skill das Element mit dem größten Hebel aus, nennt welches und warum, und bietet den Rest als Folgeläufe an.
02
Gelände erkunden
Erfasst Framework, Styling-System, Motion-Library, tokens, Produktpersönlichkeit und den Kontext, in dem das Element dargestellt wird, damit Varianten sich nativ im Produkt anfühlen.
03
Richtungen zuerst benennen
Standardmäßig drei Varianten, auf Anfrage oder bei einem wirklich weiten Möglichkeitsraum bis zu fünf; jede erhält einen Namen und eine Achse, bevor Code geschrieben wird.
04
Picker-Harness bauen
In einem Projekt hält eine isolierte Route eine Datei pro Variante plus eine kleine Harness-Datei; der Picker selbst wird aus PICKER.md kopiert, statt neu gestaltet zu werden.
05
Vor dem Zeigen verifizieren
Die Harness wird ausgeführt und jede Variante auf Render- und Interaktionskorrektheit durchgeklickt, mit Screenshots, sofern Browser-Tooling vorhanden ist.
06
Den Gewinner befördern
Nachdem der Nutzer gewählt hat, wird diese Variante gemäß dem Dateilayout, der Namensgebung und der Token-Nutzung des Projekts integriert, und die Prototyp-Oberfläche wird entfernt.

02 Finden Sie Ihren Favoriten

Wann die prototype Skill zu verwenden ist

Verwenden Sie den prototype Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Sie haben ein beschriebenes UI-Element zu erkunden — einen Toast, eine Pricing-Card, einen Hold-to-Delete-Button.
Sie möchten mehrere vertretbare Richtungen nebeneinander sehen und lieber live durchblättern als eine Spezifikation lesen, um sich zu entscheiden.
Die Arbeit findet in einem laufenden Projekt mit einem Dev-Server statt, wo eine isolierte Route die Harness hosten kann.
Sie erkunden ganz ohne Projekt und benötigen lediglich etwas, das Sie direkt im Browser öffnen können.

Grenzen kennen

Die Prüfung bereits bestehender UI — diese Aufgabe gehört zu review-animations.
Fixes für bestehende Animationen planen oder eine Abhängigkeit auswählen; beides sind andere Skills.
Divergenz nicht als Freibrief für schlechte Ausführungsqualität nutzen: Eine schlampige Variante zeigt nichts über die Richtung, die sie repräsentiert.

Was Sie bereitstellen sollten

Eine Beschreibung des UI-ElementsWas das Element ist, wo es eingesetzt wird und was es leisten muss – das Briefing wird in einem einzigen Satz zusammengefasst.
Zugriff auf das Projekt zur ErkundungDamit Tokens, Persönlichkeit und der umgebende Kontext eingrenzen können, wie weit die kühnste Variante gehen darf.
Optional eine Anzahl an VariantenDie x5-Form des Aufrufs fordert mehr Varianten, begrenzt auf fünf.
Ihre abschließende AuswahlDer Skill stoppt nach der Präsentation des Sets; die Weiterführung wartet auf die Auswahl oder einen keep/riff-Befehl.

03 Innerhalb des Skills

Regeln, die der Prototype-Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Produktionscode beim Explorieren nie berühren
Die gesamte Arbeit bleibt auf einer isolierten Prototype-Oberfläche; die Integration erfolgt erst in Phase 6, ausschließlich für die vom Nutzer gewählte Variante.
Jede Variante besetzt eine benannte Achse
Varianten müssen sich in Layout, Dichte, Persönlichkeit, Bewegung oder Interaktionsmodell unterscheiden, und jede Achse muss vor dem Bauen in einer Phrase benennbar sein.
Echte Inhalte in jeder Variante
Echte Interaktionen, echte Bewegung, tatsächlich produktförmiger Text mit plausiblen Namen und Zahlen; kein Lorem Ipsum, keine toten Buttons, kein „stell dir diesen Teil vor“.
Der Picker ist fixes Chrome
Sein Markup, seine Styles, die Tastaturanbindung und das Verhalten stammen wortgetreu aus PICKER.md und passen sich niemals dem Projekt an – sein Erscheinungsbild ist keine Designentscheidung.
Die Craft-Bar gilt pro Variante
Divergenz senkt den Anspruch nicht: Ease-out bei Entrances und niemals Ease-in, UI-Bewegung unter 300 ms, korrekter transform-origin, nur transform/opacity, reduced-motion wird berücksichtigt.
Der Variantenwechsel erfolgt sofort
Das Umschalten ist eine Aktion, die 100+ Mal pro Sitzung vorkommt, daher erhält der Variantenwechsel nach der Häufigkeitsregel keine Animation.
Namen beschreiben Richtungen
Varianten werden nach der Richtung benannt – Quiet, Editorial, Playful, Dense – niemals Option A/B/C; zwei Richtungen, die sich nur in Akzentfarbe oder Text unterscheiden, sind eine Richtung.
Die Oberfläche nach der Auswahl löschen
Wenn ein Gewinner ausgewählt wird, wird die Prototype-Oberfläche entfernt, sofern der Nutzer nicht bittet, sie zu behalten.

04 In Betrieb nehmen

prototype in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

prototype zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/emilkowalski/skills --skill prototype

Generische skills-CLI-Form für skills/prototype/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Build me a few versions of the toast that appears after someone saves a filter. It shows bottom-left over the dashboard, has an undo action, and auto-dismisses. We're on React with Tailwind and the tokens live in theme.css. Give me 3 variants and put them behind the picker.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Jede Variante hat einen Namen und eine festgelegte Achse, und keine zwei Varianten teilen sich eine Achsenposition.
Jede Variante ist über den Picker erreichbar und verhält sich korrekt, ohne Konsolenfehler.
In der Übergabetabelle wird kein Favorit vorab ausgewählt; falls gefragt wird, welche Variante Sie wählen würden, ergibt sich der Grund aus der Persönlichkeit des Produkts und der Nutzungshäufigkeit.
Wenn zwei Varianten während des Builds konvergiert sind, streichen Sie eine und sagen Sie das offen, statt das Set künstlich aufzufüllen.
Prüfen Sie nach einem Keep-Befehl, ob der Picker erhalten bleiben soll: Die einfache Keep-Form löscht die Prototyp-Oberfläche, die Form „leave the picker“ behält sie bei.

In OpenDesign importieren Sie den Prototyp über seinen SKILL.md-Link: Plugins → Add → Skill → Import from link, wählen Sie ihn anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: Emil Kowalski
Repository: github.com/emilkowalski/skills Branch main
Skill-Datei: skills/prototype/SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit d23d7f8
License: MIT Aus LICENSE.
Repository-Sterne: 37.516 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository emilkowalski/skills, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für prototype.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Operative HaltungHaltung eines Senior Design Engineers; Divergenz ist der eigentliche Wert, die handwerkliche Qualitätsschwelle gilt trotzdem
Feste RegelnFünf durchnummerierte Einschränkungen zu Produktionscode, Achsen, funktionierenden Varianten, Picker und Aufräumen
WorkflowPhasen 1 bis 6: Scope, Recon, Richtungen, Harness, Verifizierung, Promotion
Aufruf-VariantenTabelle mit Beschreibung, x5-, Riff- und Keep-Aufrufen und ihrem Verhalten
TonVerkaufen Sie jede Variante ehrlich, benennen Sie ihre Kosten, wählen Sie nie im Voraus einen Favoriten

Die eigene Beschreibung des Skills

Erstellen Sie mehrere grundlegend unterschiedliche Versionen eines UI-Elements, die Sie beschreiben, gerendert hinter einer visuellen Auswahl, sodass Sie live zwischen ihnen wechseln und die richtige Version auswählen können. Wird nur bei expliziter Aktivierung ausgeführt; es startet nicht automatisch.

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 7.432 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum prototype-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Löst es sich selbst aus, wenn ich UI bearbeite?

Nein. Es läuft nur, wenn es explizit aufgerufen wird, und wird nie von sich aus ausgelöst; die Modellauslösung ist dafür deaktiviert. Sie rufen es mit einer Beschreibung, einer optionalen x5-Anzahl oder einem Riff- oder Keep-Befehl auf.

Prototype

Führen Sie prototype bei einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie prototype über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/emilkowalski/skills --skill prototype

Was der prototype-Skill in Claude Code und Codex tut

In den eigenen Worten des Skills

So funktioniert es

Wann die prototype Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der Prototype-Skill Claude Code und Codex vorgibt

Produktionscode beim Explorieren nie berühren

Jede Variante besetzt eine benannte Achse

Echte Inhalte in jeder Variante

Der Picker ist fixes Chrome

Die Craft-Bar gilt pro Variante

Der Variantenwechsel erfolgt sofort

Namen beschreiben Richtungen

Die Oberfläche nach der Auswahl löschen