Claude MarketplacesSubmit
anthropics avatar

Design Handoff

anthropics/knowledge-work-pluginsOfficial

Bridges the gap between design and engineering by generating comprehensive handoff specs that actually cover what developers need to know. Feed it a Figma URL or design description and it produces structured documentation covering measurements, design tokens, interaction states, responsive breakpoints, edge cases, and accessibility requirements. The real value is in the completeness: it won't let you skip hover states, loading spinners, or what happens when text is too long. If you've ever implemented a design and had to ping the designer twelve times about missing details, this preemptively answers those questions. Works best when you can share actual Figma links for precise measurements.

skills.sh installs
3.8K
GitHub stars
35.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add anthropics/knowledge-work-plugins --skill design-handoff --agent claude-code

Installs into .claude/skills of the current project.

Files

/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

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/anthropics/knowledge-work-plugins
Categories
Frontend Development, Backend & APIs, Design & UI/UX
First seen
Apr 16, 2026

More from anthropics/knowledge-work-plugins

All 198

Recommended

More Frontend Development
1dotnet avatarcreate-blazor-projectdotnet/skillsCreate a new ASP.NET Core web application or web site using Blazor. USE FOR: creating a new Blazor web app, scaffolding a new web project, starting a new web si3.8Kskills.sh installs
2dotnet avatarcollect-user-inputdotnet/skillsBuild forms, validate data, and react to user input in Blazor. USE FOR adding forms, search boxes, filter panels, inline editing, data-entry UI, file uploads, v3.7Kskills.sh installs
3dotnet avatarcoordinate-componentsdotnet/skillsShare state between components that don't have a direct parent-child parameter relationship, using cascading values, scoped services with change events, or Casc3.7Kskills.sh installs
4markdown-viewer avatararchitecturemarkdown-viewer/skillsCreate layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology3.7Kskills.sh installs
5giuseppe-trisciuoglio avatarbetter-authgiuseppe-trisciuoglio/developer-kitProvides Better Auth integration patterns for NestJS backend and Next.js frontend with Drizzle ORM and PostgreSQL. Use when setting up Better Auth with NestJS b3.7Kskills.sh installs
6dotnet avatarextension-pointsdotnet/skillsGuide for MSBuild extensibility: CustomBefore/CustomAfter hooks, wildcard imports with alphabetic ordering, import gating with control properties, NuGet package3.7Kskills.sh installs