Design Handoff Spec
From mockup to dev spec with tokens, component props, interaction states, and edge cases, reliably ready to hand off.
Level ●● Intermediate
Saves 2 to 3 hours per component
Version v1.0
Updated 2026-04-12
Available in: claude-codecowork
Who it is for
Senior designers, design engineers, tech leads
Use cases
- Sprint handoff from designer to dev without 7 Slack follow-ups.
- Async team with engineers in different time zones.
- Document a component for the design system.
Say this to activate the skill
"Create handoff spec""Document this component""Spec for engineering" Install
mkdir -p ~/.claude/skills/design-design-handoff && curl -fsSL https://collectivebrain.de/en/skills/design-design-handoff/SKILL.md -o ~/.claude/skills/design-design-handoff/SKILL.md
The command drops this page's SKILL.md straight into the right directory. No terminal? Download the file below and upload it in Claude.ai under Settings, Capabilities. Need help with setup? How to install 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
Compact, self-contained version by Collective Brain. Find the full original in the source ↗.
Share this skill
About this skill
Design Handoff Spec comes from Anthropic and is part of the official Anthropic skills repository, curated and maintained by Anthropic. View source ↗