skills.rest
cy-wali
cy-waliCOMMUNITY
Explore all skills by this author →
GitHub

design-handoff

Generate developer handoff documentation from a Figma URL or design description.

1|Updated Mar 19, 2026
Search Tags:#documentation#figma#handoff#design-tokens#design-spec#design-handoff#component-props
One-click install
npx skills add https://github.com/cy-wali/knowledge --skill design-handoff-cy-wali
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/cy-wali/knowledge/tree/main/design/skills/design-handoff
Command: npx skills add https://github.com/cy-wali/knowledge --skill design-handoff-cy-wali

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate precise, engineering-ready handoff documentation from a design, ensuring layout, tokens, component props, interactions, breakpoints, and accessibility details are captured.

Core Features & Use Cases

  • Generate layout specs with grids, spacing, and alignment directly from the design.
  • Provide design token references (colors, typography, spacing) for implementation.
  • Document component props, interaction states, responsive behavior, and edge cases.
  • Use Case: When handing off a Figma design to engineering, produce a complete spec that sources assets and references.

Quick Start

Provide a Figma URL or design description to generate a complete handoff spec.

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 handoff documentation from a Figma URL?▼

To generate developer handoff documentation from a Figma URL, provide the link to produce a full specification. The output includes layout grids, design tokens, component props, state diagrams, and edge-case scenarios for engineering.

What is included in a design handoff specification for engineering?▼

A design handoff specification includes layout grids, spacing, alignment, design token references, component props, interaction states, responsive behavior, and accessibility considerations. It captures all necessary details to ensure precise engineering implementation.

Can I create a design spec without a Figma file?▼

Yes, you can create a design spec without a Figma file by providing a text design description. The tool processes the description to generate comprehensive handoff documentation detailing layout, tokens, components, and responsive behavior.

How do I document design tokens and component props for developers?▼

To document design tokens and component props, process your design source to extract colors, typography, spacing, and component properties. This generates a structured reference detailing interaction states and edge-case scenarios for implementation.

Does the handoff spec cover responsive behavior and accessibility?▼

Yes, the handoff spec covers responsive behavior and accessibility. It generates documentation detailing breakpoints, interaction states, and accessibility considerations directly from the design source to guide engineering implementation.

What is the best way to hand off edge cases and interaction states to engineering?▼

The best way to hand off edge cases and interaction states is to generate a structured spec from the design. This documentation includes state diagrams and edge-case scenarios alongside layout grids and component props for developers.

Related Skills

Explore More Design & Creative Skills→
adrianliechtiadrianliechti
4

design-handoff

Generate engineer-ready handoff specifications from Figma URLs or design descriptions.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
HuynhLy230296HuynhLy230296

verify-ui

Verify UI implementation against Figma designs and GitHub ticket requirements.

Community
Advanced
LinguageLinguage
1

rewriting-worknotes-to-articles

Transform structured work-notes into narrative articles for publication.

Community
Intermediate