skills.rest
anthropics
anthropicsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-handoff

Generate developer handoff documentation from Figma design specifications.

23.4k|2.8k|Updated Jan 23, 2026
Search Tags:#documentation#ui/ux#figma#component props#design handoff#developer specs
One-click install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff-anthropics
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/anthropics/knowledge-work-plugins/tree/main/design/skills/design-handoff
Command: npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoff-anthropics

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of detailed developer handoff specifications from design files, ensuring engineers have all necessary information to implement designs accurately.

Core Features & Use Cases

  • Comprehensive Spec Generation: Creates detailed documentation covering layout, design tokens, component properties, interaction states, responsive behavior, edge cases, and animations.
  • Figma Integration: Can pull design details directly from a provided Figma URL.
  • Use Case: When a new feature design is finalized in Figma, use this Skill to generate a complete spec sheet for the engineering team, including all visual and interactive details, responsive adjustments, and accessibility notes.

Quick Start

Use the design-handoff skill to generate a developer spec for the design at the provided Figma URL.

Frequently Asked Questions about design-handoff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate developer specs from Figma designs?▼

Developer handoff specs from Figma designs are generated by inputting the Figma URL to automatically extract layout details, component properties, and design tokens. The resulting documentation covers visual, interaction, and accessibility details for engineering implementation.

What is included in a developer handoff documentation?▼

A developer handoff document includes comprehensive specifications covering layout, design tokens, component properties, interaction states, responsive behavior, edge cases, and animations. It also provides accessibility notes to ensure accurate engineering implementation.

Can I extract component props and design tokens directly from a Figma URL?▼

Yes, component props and design tokens are extracted directly by providing a Figma URL. The skill pulls precise design details from the Figma file to populate the handoff documentation with accurate visual and interactive data.

Does the generated handoff spec cover accessibility and edge cases?▼

Yes, the generated handoff spec covers both accessibility details and edge cases. It ensures all design element behaviors and accessibility notes are clearly defined to facilitate accurate engineering implementation.

What's the best way to document UI/UX responsive behavior for engineers?▼

The best way to document UI/UX responsive behavior is to use an automated handoff generator that outputs comprehensive spec sheets. It translates finalized Figma designs into detailed documentation covering responsive adjustments, interaction states, and animations.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

figma-implement-design

Translate Figma design artifacts into production-ready React UI code.

Official
Advanced
andebet07-ossandebet07-oss

design-handoff

Generate developer handoff documentation from design specifications.

Community
Advanced
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
ngochuy13ngochuy13

design-handoff

Generate structured markdown developer handoff specs from Figma URLs or design descriptions.

Community
Intermediate