topskills
Browse Skills

design-handoff

Turn a final design into a spec engineers can implement directly.

Score 0(?)OfficialAll surfacesby AnthropicSource
Verified for:

Install

$ claude plugin install design

Skill becomes available as /design-handoff

Best for

The moment a design is approved and engineering needs implementation-ready specs.

About this skill

Generate developer handoff specs — layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation details.

HandoffSpecsTokens

Score breakdown

Score breakdown

rubric 1.0
Install count
0/20
Provenance
15/15
GitHub stars
0/15
Recency
8.5/10
Compatibility
6/10
Documentation depth
6.5/10
Install ergonomics
7/10
License
5/5
Verification freshness
5/5

Composite 0–100 score derived from 9 verifiable signals. See the rubric →

Related skills

Official

Escape generic AI-generated UIs. Forces a bold, distinctive design direction before any code is written.

ReactTailwindDesign
All surfaces
Official

Self-contained HTML artifacts with React + shadcn/ui — no build step, just paste and run.

Reactshadcn/uiArtifacts
All surfaces
Official

Lock generated UIs to a brand. Anthropic's own guidelines, formalized as a skill.

BrandGuidelinesIdentity
All surfaces

Skill FAQ

About design-handoff

What is the design-handoff skill?

Generate developer handoff specs — layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animation details.

Which agents does design-handoff work with?

Claude Code, Claude.ai (web app), Cursor, Antigravity IDE.

How do I install design-handoff?

Run `claude plugin install design` for Claude Code. See the install panel for per-agent commands.

Is design-handoff free to use?

Yes — design-handoff is open source (MIT).

Who maintains design-handoff?

design-handoff is published by Anthropic and was last updated on 2026-05-15.

What is design-handoff best for?

The moment a design is approved and engineering needs implementation-ready specs.