skills.rest
FoundationForge
FoundationForgeOFFICIAL
Explore all skills by this author →
GitHub

design-handoff

Generate developer handoff documentation from Figma URLs or design descriptions.

Updated Apr 12, 2026
Search Tags:#accessibility#figma#responsive-design#design-tokens#component-specs#design-handoff#developer-handoff
One-click install
npx skills add https://github.com/FoundationForge/cowork-plugins --skill design-handoff-foundationforge
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/FoundationForge/cowork-plugins/tree/main/plugins/design/skills/design-handoff
Command: npx skills add https://github.com/FoundationForge/cowork-plugins --skill design-handoff-foundationforge

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts a finished or in-progress design into a comprehensive, developer-friendly handoff that eliminates ambiguity and reduces implementation questions, saving engineering time and avoiding rework.

Core Features & Use Cases

  • Produces exact visual specifications including measurements, spacing, and design token references for consistent implementation.
  • Documents component props, variants, interaction states, animations, responsive breakpoints, and edge cases for reliable engineering handoff.
  • Captures accessibility requirements, keyboard focus order, ARIA needs, and content constraints for inclusive implementations.
  • Use case: provide a Figma URL or design description to generate a spec sheet that can be attached to an implementation ticket or pasted into a component library.

Quick Start

Ask the skill to generate a handoff by providing a Figma link or a detailed design description using the command /design-handoff followed by your link or description.

Frequently Asked Questions about design-handoff

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

FAQPage Schema
How do I create developer handoff documentation from a Figma design?▼

Developer handoff documentation is generated by providing a Figma URL or detailed design description to produce exact visual specifications, design tokens, component props, and interaction states for engineering implementation.

What should a design handoff spec include for responsive design and accessibility?▼

A design handoff spec should include responsive breakpoints, accessibility requirements, keyboard focus order, ARIA needs, and content constraints to ensure inclusive and reliable UI implementations across devices.

Can I generate component specs and edge cases for a UI screen without a Figma link?▼

Yes, component specs can be generated using a detailed text design description instead of a Figma link, producing layout measurements, component props, variants, and edge cases suitable for ticket creation.

Does design handoff documentation capture interaction states and animations?▼

Yes, design handoff documentation captures interaction states, animations, and edge cases alongside layout measurements and design token references to eliminate ambiguity and reduce implementation rework.

What's the best way to document design tokens for engineering implementation?▼

The best way to document design tokens is by generating a comprehensive spec sheet that references exact visual specifications, spacing, and component variants that can be attached directly to implementation tickets.

Why does my developer handoff lack accessibility requirements and keyboard focus order?▼

Developer handoffs often lack accessibility requirements when designs are not explicitly processed to capture ARIA needs, keyboard focus order, and content constraints needed for inclusive implementations.

Related Skills

Explore More Design & Creative Skills→
speqqaispeqqai

figma-implement-design

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

Official
Advanced
launchapp-devlaunchapp-dev
38

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

Official
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced