Design Handoff

Name: Design Handoff
Author: anthropics

anthropics/knowledge-work-plugins

2.4k installs
23.1k repo stars
Updated July 28, 2026
anthropics/knowledge-work-plugins

design-handoff produces developer-ready UI specs with tokens, states, responsive rules, and accessibility notes.

About

The design-handoff skill produces developer handoff documentation when a design is ready for engineering implementation. It accepts a Figma URL, screenshot, or written description and emits a structured spec with overview, layout, token tables, component variants and props, interaction states, responsive breakpoints, edge cases, motion details, and accessibility notes. Visual specs call for measurements, design token references instead of raw pixel values, and all component states including hover, loading, error, and empty. Interaction specs cover click behavior, transitions with duration and easing, and gestures. Principles stress specifying everything developers might otherwise guess, referencing tokens like spacing-md rather than fixed pixels, and explaining rationale for responsive choices. Optional connectors can pull exact Figma measurements or link tickets in a project tracker. Output follows a markdown template with tables for tokens, components, states, breakpoints, animations, and accessibility requirements for each screen.

Specifies measurements, tokens, responsive breakpoints, and all component states.
Covers interactions, content limits, edge cases, and accessibility requirements.
Uses design token references instead of hardcoded pixel or hex values.
Structured markdown template with layout, components, states, and motion tables.
Can pull exact Figma measurements when design tool connectors are available.

Design Handoff by the numbers

2,449 all-time installs (skills.sh)
+107 installs in the week ending Jul 28, 2026 (Skillselion tracking)
Ranked #126 of 1,896 Design & UI/UX skills by installs in the Skillselion catalog
Security screen: LOW risk (skills.sh audit)
Data as of Jul 28, 2026 (Skillselion catalog sync)

At a glance

design-handoff capabilities & compatibility

Capabilities: visual and interaction specification authoring · design token table generation · responsive and edge case documentation · accessibility and motion detail capture · figma connector measurement extraction
Works with: figma
Use cases: ui design · frontend · web design
Runs: Runs locally
Pricing: Free

From the docs

What design-handoff says it does

If it's not specified, the developer will guess. Specify everything.

SKILL.md

npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/anthropics/knowledge-work-plugins/design-handoff.svg)](https://skillselion.com/skills/anthropics/knowledge-work-plugins/design-handoff)

Installs	2.4k
repo stars	★ 23.1k
Security audit	3 / 3 scanners passed
Last updated	July 28, 2026
Repository	anthropics/knowledge-work-plugins ↗

How do I hand off a screen so engineers implement it without guessing spacing or states?

Produce developer-ready design handoff specs with tokens, states, responsive rules, edge cases, and accessibility notes.

Who is it for?

Translating Figma frames or screenshots into implementation specs before coding starts.

Skip if: Skip for high-level product strategy without visual artifacts to specify.

When should I use this skill?

User needs a handoff doc, dev spec, or implementation notes from a design.

What you get

A structured handoff spec with tokens, components, interactions, edge cases, and accessibility notes.

developer handoff markdown spec
design token and component tables

By the numbers

Covers 6 spec areas: visual, interaction, content, edge cases, accessibility, motion
Documents 3 responsive breakpoints: desktop, tablet, mobile

Files

SKILL.mdMarkdownGitHub ↗

/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.

Usage

/design-handoff $ARGUMENTS

Generate handoff specs for: @$1

If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot.

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

1. Don't assume — If it's not specified, the developer will guess. Specify everything. 2. Use tokens, not values — Reference spacing-md not 16px. 3. Show all states — Default, hover, active, disabled, loading, error, empty. 4. Describe the why — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls.

Output

## 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 (<768px) | [What changes] |

### Edge Cases
- **Empty state**: [What to show when no data]
- **Long text**: [Truncation rules]
- **Loading**: [Skeleton or spinner]
- **Error**: [Error state appearance]

### Animation / Motion
| Element | Trigger | Animation | Duration | Easing |
|---------|---------|-----------|----------|--------|
| [Element] | [Trigger] | [Description] | [ms] | [easing] |

### Accessibility Notes
- [Focus order]
- [ARIA labels needed]
- [Keyboard interactions]

If Connectors Available

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

1. Share the Figma link — I can pull exact measurements, tokens, and component info. 2. Mention edge cases — "What happens with 100 items?" helps me spec boundary conditions. 3. Specify the tech stack — "We use React + Tailwind" helps me give relevant implementation notes.