design-handoffvon Anthropic

Design Handoff Skill.

Ein Claude Code- und Codex-Skill für Brand- und Design-System-Arbeit: Entwickler-Handoff-Spezifikationen aus einem Design: Layout, Tokens, Komponentenzustände, Breakpoints.

Brand & Design Systems
Handoff-Spezifikation

OpenDesign herunterladen Anleitung ansehen

anthropics/knowledge-work-plugins · design/skills/design-handoff/SKILL.mdSKILL.md

--- name: design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. --- ## Usage ## What to Include ## Principles ## Output ## Handoff Spec: [Feature/Screen Name] ## If Connectors Available

Front Matter und Abschnittsüberschriften aus der vorgelagerten Datei vom 14.09.2026 · 3.939 Zeichen vollständig

01 Was es tut

Was die design-handoff Skill in Claude Code und Codex leistet

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

Erstellt Developer-Handoff-Dokumentation aus einem Design, gedacht für Teams, deren Design für die Umsetzung bereit ist und ein Spec-Sheet benötigt. Verweisen Sie auf eine Figma-URL oder greifen Sie alternativ auf eine Beschreibung oder einen Screenshot zurück – der Agent arbeitet visuelle Spezifikationen, Interaktionsspezifikationen, Content-Spezifikationen, Edge Cases und Accessibility durch.

Die Ausgabe ist eine Markdown-Handoff-Spezifikation mit Abschnitten für Übersicht, Layout, verwendete Design-Tokens, Komponenten, Zustände und Interaktionen, responsives Verhalten, Sonderfälle sowie Animation und Bewegung und Hinweise zur Barrierefreiheit. Ihre vier Grundprinzipien lauten: alles spezifizieren statt annehmen, Tokens statt Rohwerten referenzieren, jeden Zustand zeigen und das Warum hinter einem Verhalten erklären.

Was er erzeugt

Eine Design-Tokens-Tabelle, die jeden Token mit Wert und Verwendung aufführt.
Eine Komponenten-Tabelle mit Variante, Props und Hinweisen zu besonderem Verhalten für jede Komponente.
Eine Tabelle für Animation und Bewegung mit Element, Auslöser, Animation, Dauer und Easing.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Die Design-Quelle bestimmen
Eine Figma-URL bedeutet, dass das Design aus Figma bezogen wird; ohne eine solche arbeitet der Skill mit einer schriftlichen Beschreibung oder einem Screenshot.
02
Die Visuals spezifizieren
Exakte Innen- und Außenabstände sowie Breiten, Design-Token-Referenzen für Farben, Typografie und Abstände, responsive Breakpoints sowie Komponentenvarianten und -zustände.
03
Die Interaktionen spezifizieren
Klick- und Tap-Verhalten, Hover-Zustände, Gesten-Unterstützung sowie Übergänge, dokumentiert mit Dauer und Easing.
04
Inhalte und Sonderfälle abdecken
Zeichenbegrenzungen, Kürzungen, Leerzustände, Lade- und Fehlerzustände sowie minimale und maximale Inhalte, längere internationale Zeichenketten, langsame Verbindungen und fehlende Daten.
05
Details zur Barrierefreiheit hinzufügen
Fokusreihenfolge, ARIA-Labels und -Rollen, Tastaturinteraktionen und Screenreader-Ansagen.
06
Die Spezifikation im Template ausgeben
Das Ergebnis wird als Markdown-Handoff-Spezifikation nach der Abschnitts- und Tabellenstruktur der Datei verfasst.

02 Finden Sie Ihren Favoriten

Wann Sie den design-handoff Skill verwenden

Verwenden Sie den design-handoff Skill in Claude Code oder Codex, wenn die Aufgabe Marken- und Designsystem-Arbeit dieser Art ist. Eignung und Grenzen sind der eigenen Datei des Skills entnommen.

Gut geeignet

Ein Design ist fertig und bereit für die Entwicklung, und das Team benötigt ein Spec-Sheet, das Layout, Tokens, Komponenten-Props, Zustände, Breakpoints, Sonderfälle und Animation abdeckt.
Ein Projekt-Tracker ist verbunden, und Sie möchten den Handoff mit dem Implementierungs-Ticket verknüpfen.

Grenzen kennen

Exakte, aus Figma abgeleitete Maße, Token-Werte, exportierte Assets und ein vollständiges Spec-Sheet entstehen nur, wenn ein Design-Tool verbunden ist.
Das Einrichten von Unteraufgaben für jeden Spec-Abschnitt setzt voraus, dass ein Projekt-Tracker verbunden ist.

Was Sie bereitstellen sollten

Eine Figma-URL oder eine Design-BeschreibungDies ist das Argument, das der Befehl erwartet, und die Grundlage, aus der die Spezifikation generiert wird.

03 Innerhalb des Skills

Regeln, die der design-handoff-Skill Claude Code und Codex gibt

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

Alles spezifizieren
Das erste Prinzip lautet, nichts anzunehmen: Ist etwas nicht spezifiziert, muss der Entwickler raten – deshalb muss der Handoff es abdecken.
Auf Tokens verweisen, nicht auf Rohwerte
Werte werden als Token-Namen wie spacing-md geschrieben statt als Pixelzahlen.
Alle Zustände zeigen
Jeder Zustand muss erscheinen: default, hover, active, disabled, loading, error und empty.
Das Warum beschreiben
Die Begründung wird neben dem Verhalten angegeben, damit Entwickler gute Entscheidungen treffen können, zum Beispiel warum etwas auf Mobilgeräten einklappt.
Explizit nach Grenzfällen fragen
Das Benennen von Grenzfragen, etwa was bei 100 Elementen passiert, führt dazu, dass diese Grenzfälle spezifiziert werden.
Den Tech-Stack angeben
Die Angabe des Stacks, zum Beispiel React plus Tailwind, erzeugt für diesen Stack relevante Implementierungshinweise.
Den Figma-Link teilen
Der Link ermöglicht es, exakte Maße, Tokens und Komponenteninformationen abzurufen, statt sie zu erraten.

04 In Betrieb nehmen

design-handoff 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.

design-handoff 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/anthropics/knowledge-work-plugins --skill design-handoff

Allgemeine skills-CLI-Form für design/skills/design-handoff/SKILL.md; das Repository dokumentiert eventuell seinen eigenen Pfad.

Geben Sie dem Skill eine erste Brand- und Design-System-Arbeitsaufgabe

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

Starter prompt

Generate a developer handoff spec for the [checkout confirmation screen] in [Figma URL]. I need exact padding and margins, design token references instead of raw values, all component states including loading and error, and the responsive behavior at each breakpoint. We use [React + Tailwind], and please spec the empty state and what happens with [very long product names].

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:

Die Tabelle für responsives Verhalten hat eine ausgefüllte Zeile für Mobilgeräte unter 768px, keinen leeren Platzhalter.
Grenzfälle benennen, was angezeigt wird, wenn keine Daten vorhanden sind, zusammen mit Verhalten bei Kürzung, Laden und Fehlern.
Barrierefreiheits-Hinweise legen die Fokusreihenfolge und die benötigten ARIA-Labels fest.

In OpenDesign importieren Sie design-handoff über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann 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: Anthropic
Repository: github.com/anthropics/knowledge-work-plugins Branch main
Skill-Datei: design/skills/design-handoff/SKILL.md Content-Prüfsumme bei Verifizierung aufgezeichnet; Commit 8f877b6
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 24.012 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository anthropics/knowledge-work-plugins, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für design-handoff.
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

VerwendungZeigt den /design-handoff-Aufruf sowie die Platzhalter $ARGUMENTS und @$1.
Was enthalten sein sollListet die abzudeckenden Kategorien auf: visuelle, Interaktions-, Inhalts-, Grenzfall- und Barrierefreiheits-Spezifikationen.
PrinzipienVier Regeln: nichts annehmen, Tokens verwenden, alle Zustände zeigen, das Warum beschreiben.
AusgabeStellt die Markdown-Handoff-Spec-Vorlage mit ihren Überschriften und Tabellen bereit.
Falls Connectors verfügbarZusätzliche bedingte Elemente für ein verbundenes Design-Tool und einen Projekt-Tracker.
TippsDrei Tipps: den Figma-Link teilen, Grenzfälle erwähnen, den Tech-Stack angeben.

Die eigene Beschreibung des Skills

„Entwickler-Handoff-Specs aus einem Design generieren. Verwenden, wenn ein Design fertig für die Entwicklung ist und ein Spec-Sheet benötigt, das Layout, Design-Tokens, Komponenten-Props, Interaktionszustände, Responsive-Breakpoints, Edge Cases und Animationsdetails abdeckt."

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

06 Vor der Installation

Fragen zum design-handoff-Skill

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

Was ändert sich, wenn ein Design-Tool verbunden ist?

Es zieht exakte Maße, Tokens und Component Specs direkt aus Figma und kann Assets exportieren sowie ein vollständiges Spec Sheet generieren.

Design Handoff

Führen Sie design-handoff für eine echte Marken- und design-system-Arbeitsaufgabe aus.

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

OpenDesign herunterladen Alle Skills durchsuchen