Design Handoff

by anthropicsae1513ea94dcNo license27K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

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 props, interaction states, responsive breakpoints, edge cases, and animation details.

FeaturedInstructions onlyDesign & CreativeProductivity & Workflow
AI-generated overview

Generates developer handoff specifications from a design, covering layout, tokens, states, and accessibility.

What it does
This skill produces a structured developer handoff document from a design, either pulled from a Figma URL or based on a written description or screenshot. The output is a markdown spec sheet covering visual measurements, design tokens, component variants and props, interaction states, responsive breakpoints, content and edge cases, animation details, and accessibility notes. It also suggests linking the handoff to a project tracker ticket and creating sub-tasks when those connectors are available.
When to use it
Use it when a design is ready for engineering and needs a written specification before implementation. It fits situations where developers need exact measurements, token references, state coverage, and responsive behavior spelled out. It is also useful for documenting edge cases and accessibility requirements alongside the visual spec.
Requirements
Instructions only; no scripts are shipped. A Figma URL or a design description or screenshot is needed as input. Optional connectors to a design tool and a project tracker are mentioned for pulling exact specs and linking tickets, but the skill works from a description without them.

/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

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

Source and attribution

Source:anthropics/knowledge-work-pluginsindesign/skills/design-handoffat commitae1513e

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More from anthropics/knowledge-work-plugins

Ticket Deflector

anthropics

Featured

Reads a forwarded customer email or ticket, pulls order and refund status from a payments connector (PayPal, Square, or Stripe) or Shopify, account history from the CRM, and open tickets from a support desk (Zoho Desk), drafts a tone-matched reply in the owner's writing voice, and can issue a refund through the payments connector with explicit owner approval. With Shopify connected it also runs a proactive order-triage mode that surfaces orders needing attention — unfulfilled past the promised window, payment problems, pending refunds, stuck shipments — and drafts the next action for each before the customer has to ask. Use when the user says "draft a response," "answer this customer," "where's my order," "I want a refund," "check my orders," or "anything about to blow up."

Awaiting classification27Kupdated today

Tax Season Organizer

anthropics

Featured

Prepares tax-season materials for the owner's accountant, not tax advice. US federal tax; a non-US business gets its closed-books packet instead. Two modes: (1) quarterly estimated tax from YTD net income in the ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books); (2) year-end 1099 prep, scanning the ledger, PayPal, and Stripe for contractors paid over USD 600 into a 1099-NEC list with missing W-9 flags. Any tax request routes first to /tax-prep, which confirms the books are closed and reconciled before running this skill. Use this skill directly only when the owner says the period's books are already closed: "books are closed, now do the 1099s," "run the quarterly estimate off the closed numbers," or "just the contractor W-9 list."

Awaiting classification27Kupdated today

Tax Prep

anthropics

Featured

Prepares tax materials from closed books: a quarterly estimated payment breakdown or a year-end 1099-NEC list and accountant packet.

Business & Finance27Kupdated today

Smb Onboard

anthropics

Featured

Guides a small-business owner through first-time setup: connecting tools, running a value-proof recipe, capturing business context, and setting a weekly…

Productivity & Workflow27Kupdated today

Smb Router

anthropics

Featured

Routes a small-business owner's request to the right plugin skill or command and explains what is available.

Productivity & Workflow27Kupdated today

Month End Prep

anthropics

Featured

Reconciles the accounting ledger (MYOB, NetSuite, QuickBooks, Xero, or Zoho Books) against PayPal, Shopify, Square, and Stripe settlements, flags transactions that need attention, suspicious duplicates, and missing receipts, then writes a plain-English P&L narrative and exports a close packet (xlsx + one-page PDF). This is the first link of the /close-month command; a request to close the month or the books routes there, and the command runs this skill before refreshing the forecast and distributing the packet. Use this skill directly only when the owner wants the reconciliation alone, with no forecast refresh and no distribution: "just reconcile, no packet," "what's missing from the books," "flag the duplicates and missing receipts," or "write the P&L narrative for this month."

Awaiting classification27Kupdated today

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative179Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative179Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative179Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative179Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today