$ ~/registry/skill/anthropics-design-skills-design-handoff

SKILL

design-handoff

Name: design-handoff
Author: anthropics

Turn finalized designs into clear developer handoff specs for implementation.

Stars

★ 22,528

Source

GitHub

Updated

2026-07-11

// securityLow risk

Prompt only, no code
Open source
Community-trusted· 22.5k

Running security audit…

Credentials
Network egress
Code execution
Data access
Supply chain

// install

Copy the install command and let the AI configure it · recommended for beginners

Please install the "design-handoff" skill from askskill:
1. Download https://raw.githubusercontent.com/anthropics/knowledge-work-plugins/main/design/skills/design-handoff/SKILL.md
2. Save it as ~/.claude/skills/design-handoff/SKILL.md
3. Reload skills and tell me it's ready

// download

Download SKILL.mdInstall manifest ↗

// examples

Mobile screen handoff spec

Prompt

Generate a developer handoff spec from this mobile checkout screen design. Include layout dimensions and spacing, color and typography tokens, button and input component props, default/hover/disabled/error states, responsive breakpoints for iPhone and Android, edge cases like empty states and long text, and loading animation details. Output it as a structured document.

Expected

A structured mobile implementation spec that helps engineers build the design accurately.

Design system component spec

Prompt

Create a developer handoff document for this tab component design set. Include component purpose, size variants, spacing rules, color tokens, content rules, prop definitions, selected/unselected/disabled/focus states, behavior across screen widths, and accessibility notes.

Expected

A component-level spec that can be handed directly to the engineering team.

Web dashboard implementation spec

Prompt

Convert this web dashboard design into an engineering spec covering grid layout, card and chart components, design tokens, interaction states, breakpoint rules, error and empty-data scenarios, page transitions and micro-interactions, and key implementation notes.

Expected

A complete dashboard handoff document that reduces ambiguity and implementation drift.

// docs

/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

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

## 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

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.