Do I need a Figma connection to use this skill?

While it works best with a Figma URL to pull exact measurements and tokens, the skill can also generate detailed specs from screenshots or descriptive text.

Does the documentation include accessibility requirements?

Yes, the skill automatically generates accessibility notes including focus order, ARIA labels, and keyboard interaction patterns.

Can I specify my own tech stack?

Yes. If you mention your stack (e.g., React + Tailwind), Claude will tailor the implementation notes and design token references to match your environment.

How does it handle complex animations?

The skill creates a dedicated motion section that specifies triggers, durations, easing functions, and visual descriptions for transitions.

Design Handoff Spec Generator

Name: Design Handoff Spec Generator
Author: anthropics

byanthropics

•

11,566

•

デザインツール

Generates comprehensive developer handoff documentation and technical specifications from UI designs or Figma URLs.

The Design Handoff skill bridges the gap between design and engineering by automating the creation of detailed technical documentation. By analyzing Figma URLs, screenshots, or design descriptions, it produces structured spec sheets covering layout measurements, design tokens, component properties, and interaction states. This tool ensures that developers have clear guidance on responsive behavior, edge cases, and accessibility requirements, reducing implementation guesswork and maintaining design system integrity across the development lifecycle.

主な機能

01Edge case identification for empty states, long text, and error handling

0211,566 GitHub stars

03Figma integration for automated measurement and token extraction

04Comprehensive accessibility notes including ARIA roles and focus order

05Responsive breakpoint documentation and layout behavior specs

06Detailed interaction mapping for hover, active, and loading states

ユースケース

01Standardizing documentation for design system component libraries

02Preparing a finalized UI design for engineering implementation

03Creating technical briefs for remote frontend development teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthropics/knowledge-work-plugins design-handoff

For use in Claude.ai and ChatGPT

主な機能

01Edge case identification for empty states, long text, and error handling

0211,566 GitHub stars

03Figma integration for automated measurement and token extraction

04Comprehensive accessibility notes including ARIA roles and focus order

05Responsive breakpoint documentation and layout behavior specs

06Detailed interaction mapping for hover, active, and loading states

ユースケース

01Standardizing documentation for design system component libraries

02Preparing a finalized UI design for engineering implementation

03Creating technical briefs for remote frontend development teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anthropics/knowledge-work-plugins design-handoff

For use in Claude.ai and ChatGPT