Labsco
anthropics logo

design-handoff

✓ Official★ 22,300

by anthropic · part of anthropics/knowledge-work-plugins

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…

🔥🔥🔥✓ VerifiedFreeQuick setup
#git#design
🧩 One of 7 skills in the anthropics/knowledge-work-plugins package — works on its own, and pairs well with its siblings.

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…

Inspect the full instructions your agent will receiveExpand

This is the exact playbook injected into your agent when the skill activates — shown here so you can audit it before installing. You don't need to read it to use the skill.

by anthropic

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… npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff Download ZIPGitHub22.3k

/design-handoff

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Generate comprehensive developer handoff documentation from a design.

What to Include

Visual Specifications

  • Exact measurements (padding, margins, widths)

  • Design token references (colors, typography, spacing)

  • Responsive breakpoints and behavior

  • Component variants and states

Interaction Specifications

  • Click/tap behavior

  • Hover states

  • Transitions and animations (duration, easing)

  • Gesture support (swipe, pinch, long-press)

Content Specifications

  • Character limits

  • Truncation behavior

  • Empty states

  • Loading states

  • Error states

Edge Cases

  • Minimum/maximum content

  • International text (longer strings)

  • Slow connections

  • Missing data

Accessibility

  • Focus order

  • ARIA labels and roles

  • Keyboard interactions

  • Screen reader announcements

Principles

  • Don't assume — If it's not specified, the developer will guess. Specify everything.

  • Use tokens, not values — Reference spacing-md not 16px.

  • Show all states — Default, hover, active, disabled, loading, error, empty.

  • Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.

Output

Copy & paste — that's it

## Handoff Spec: [Feature/Screen Name]

### Overview
[What this screen/feature does, user context]

### Layout
[Grid system, breakpoints, responsive behavior]

### Design Tokens Used
| Token | Value | Usage |
|-------|-------|-------|
| `color-primary` | #[hex] | CTA buttons, links |
| `spacing-md` | [X]px | Between sections |
| `font-heading-lg` | [size/weight/family] | Page title |

### Components
| Component | Variant | Props | Notes |
|-----------|---------|-------|-------|
| [Component] | [Variant] | [Props] | [Special behavior] |

### States and Interactions
| Element | State | Behavior |
|---------|-------|----------|
| [CTA Button] | Hover | [Background darken 10%] |
| [CTA Button] | Loading | [Spinner, disabled] |
| [Form] | Error | [Red border, error message below] |

### Responsive Behavior
| Breakpoint | Changes |
|------------|---------|
| Desktop (>1024px) | [Default layout] |
| Tablet (768-1024px) | [What changes] |
| Mobile ( If **~~design tool** is connected:

 

- Pull exact measurements, tokens, and component specs from Figma 

- Export assets and generate a complete spec sheet 

 If **~~project tracker** is connected:

 

- Link the handoff to the implementation ticket 

- Create sub-tasks for each section of the spec

## Tips

- **Share the Figma link** — I can pull exact measurements, tokens, and component info. 

- **Mention edge cases** — "What happens with 100 items?" helps me spec boundary conditions. 

- **Specify the tech stack** — "We use React + Tailwind" helps me give relevant implementation notes.