Design Handoff Spec
Vom Mockup zur Dev-Spec mit Tokens, Komponenten-Props, Interaction-States und Edge-Cases, verlässlich übergabefertig.
Für wen
Senior-Designer, Design-Engineer, Tech-Lead
Use Cases
- Sprint-Handoff Designer → Dev ohne 7 Slack-Rückfragen
- Async-Team mit Engineers in anderen Zeitzonen
- Komponente fürs Design-System dokumentieren
Sag das, um den Skill zu aktivieren
„Create handoff spec"„Document this component"„Spec for engineering" Installieren
mkdir -p ~/.claude/skills/design-design-handoff && curl -fsSL https://collectivebrain.de/skills/design-design-handoff/SKILL.md -o ~/.claude/skills/design-design-handoff/SKILL.md
Der Befehl legt die SKILL.md dieser Seite direkt im richtigen Verzeichnis ab. Kein Terminal? Datei unten herunterladen und in Claude.ai unter Einstellungen, Fähigkeiten hochladen. Brauchst du Hilfe beim Setup? Wie installiere ich Skills →
--- name: design-design-handoff description: Generate developer handoff specs from a design. Use when a design is ready for engineering. --- # Developer Handoff Spec ## Coverage 1. **Layout**, grid, spacing, breakpoints 2. **Design tokens**, color, type, radius, shadow used 3. **Component props**, variants, sizes, states 4. **Interaction states**, default, hover, active, focus, disabled, loading, error 5. **Responsive behavior**, mobile/tablet/desktop adaptations 6. **Edge cases**, long text, empty data, permissions, errors 7. **Animation**, duration, easing, trigger 8. **A11y notes**, aria, keyboard, screen reader
Kompakte, eigenständige Fassung von Collective Brain. Die ausführliche Original-Version findest du in der Quelle ↗.
Skill teilen
Über diesen Skill
Design Handoff Spec kommt von Anthropic und ist Teil des offiziellen Anthropic-Skills-Repos. Kuratiert und gepflegt von Anthropic. Quelle ansehen ↗
Diesen Skill auf dein Team zuschneiden?
Design Handoff Spec ist ein guter Start. Richtig stark wird ein Skill, wenn er deine Workflows, Vorlagen und Tonalität kennt. Wir bauen Custom Skills für Teams, von der Analyse bis zum Rollout, und binden sie über unser Web Development in deine Systeme ein.
Custom Skill anfragen →