Einrichtung
Ein Plugin ausprobieren
Das Design-Plugin wird mit /design-handoff ausgeliefert, das bereits so strukturiert ist, dass es eine Flow-Beschreibung und eine Komponentenbibliothek liest und einen verdrahteten, klickbaren HTML-Build erzeugt. Wenn dein Admin Plugins verwaltet und es noch nicht verfügbar ist, überspringe diesen Schritt; nichts im Folgenden erfordert es.
/design-handoffGenerate developer handoff specs from a design./ux-copyWrite or review UX copy — microcopy, error messages, empty states, CTAs.Verbinde deine Tools
Claude Cowork ist leistungsfähiger, wenn es direkt mit deinen Systemen arbeitet. Du kontrollierst Berechtigungen und Zugriff. Erfahre mehr über den Tool-Zugriff(öffnet in neuem Tab).
Navigiere in Cowork zu Anpassen → Konnektoren, um die Einrichtung vorzunehmen.
Richte deinen Arbeitsordner ein
Ziehe die Dateien, die du verwenden wirst (die Flow-Beschreibung oder Spezifikation, den Export der Komponentenbibliothek, deine Tokens, Beispielinhalte), in einen Ordner auf deinem Rechner und richte Cowork dann darauf aus. Cowork liest daraus und schreibt den Prototyp-HTML-Code zurück in einen Unterordner. Wenn du regelmäßig Prototypen erstellst, erstelle ein Cowork-Projekt(öffnet in neuem Tab) aus diesem Ordner, damit deine Bibliothek und Konventionen erhalten bleiben.
Der Prompt
Kopiere dies in Claude Cowork
Erstelle einen klickbaren HTML-Prototyp von dem Flow in diesem Ordner, wobei ausschließlich Komponenten aus unserer Design-System-Bibliothek verwendet werden. Verdrahte die Navigation, verwende realistische Platzhalterdaten und schreibe ihn nach prototype/index.html, damit ich mich in einem Browser durchklicken kann.
Warum das funktioniert
Beschränke es auf deine eigenen Materialien. Keine erfundene UI; alles bildet sich auf die echte Bibliothek ab.
Beschreibe, was jede Interaktion bewirken soll. Klicks bewegen tatsächlich etwas; Nutzer testen einen Flow, keine Bilder.
Fordere realistische Beispielinhalte an. Kein Lorem Ipsum; die Bildschirme lesen sich wie das Produkt.
Gib ihm die Quelldateien direkt. Tokens und CSS werden unverändert in den Prototyp übernommen.
Einen besseren Entwurf erhalten
Füge ein passendes Beispiel hinzu. Lege ein Beispiel, das dir gefällt, in den Ordner, und Cowork passt sich deiner Struktur und deinem Ton an.
Bitte es, Unsicherheiten zu kennzeichnen. Füge „kennzeichne alles, bei dem du dir nicht sicher bist" hinzu, damit du weißt, wo du beim Überprüfen des Entwurfs zuerst nachsehen solltest.
Lass Cowork für dich arbeiten
Das /design-handoff des Plugins ist ein generischer Ausgangspunkt. Sobald Schritt 2 einen Build erzeugt, den du tatsächlich einem Teilnehmer vorlegen würdest, sag Cowork, es soll deine Version des Skills schreiben. Füge deine Komponentenbenennung, deine Daten-Fixtures, deine Interaktionskonventionen und die Wrapper-Seite hinzu, in der deine Prototypen immer eingebettet sind. Ein paar Minuten Unterhaltung, und der Skill läuft von da an mit deinen Standards.
Mach das, was wir in dieser Aufgabe bisher gemacht haben, zu einem Skill, oder bearbeite den /design-handoff-Skill mit meinem Feedback.
Mach es wiederholbar
Als Artefakt teilen
Ein Prototyp, den man per E-Mail herumschicken muss, wird schnell veraltet. Bitte Cowork, ihn als Artefakt zu veröffentlichen, und jeder Reviewer und Testteilnehmer hat einen Link — führe den Skill erneut aus (oder plane ihn), um ihn zu aktualisieren.
Veröffentliche diesen Prototyp als Artefakt. Füge in der Ecke einen kleinen Versionsstempel „v2, v3" hinzu.
Bei jeder Spezifikationsänderung neu erstellen
Die Spezifikation ändert sich, der Prototyp sollte ohne Aufforderung folgen. Gib /schedule in den Prompt ein oder öffne Geplant in der Cowork-Seitenleiste und stelle den angepassten Skill so ein, dass er jeden Morgen aus dem, was sich im Ordner befindet, neu erstellt wird.
/schedule Wochentags um 7 Uhr, prüfe Prototypes/Invite-Flow auf Änderungen und führe /design-handoff erneut aus, erstelle prototype/index.html neu und erhöhe den Versionsstempel.
Jeden Wochentag um 7 Uhr wird der Projektordner auf Spezifikations- oder Bibliotheksänderungen geprüft, /design-handoff erneut ausgeführt und das klickbare HTML mit einem erhöhten Versionsstempel neu erstellt.
Mit deinen Teammitgliedern teilen
Dein angepasstes /design-handoff trägt jetzt deine Komponentenzuordnung, deine Daten-Fixtures und deine Wrapper-Seite. Teile es, damit jeder Designer im Team auf die gleiche Weise von der Spezifikation zum klickbaren Build gelangen kann, und Konzepttests nicht mehr darauf warten müssen, dass jemand weiß, wie man Frames manuell verdrahtet.