skills.rest
sun2443
sun2443COMMUNITY
Explore all skills by this author →
GitHub

design-handoff

Generates UI mockups and design specs from natural language descriptions and/or reference images, optionally producing usable HTML code and Python/PHP/SQL snippets for front-end and back-end use.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents engineering delays and misunderstandings by translating a design into an explicit, implementation-focused handoff spec.

Core Features & Use Cases

  • Developer-ready specs: Produces layout guidance, design token mapping, component variants, props, and responsive behavior.
  • Interaction + motion details: Documents hover/click/disabled/loading states, transitions, animations, and gesture support.
  • Edge cases and accessibility: Covers content limits, empty/loading/error states, and accessibility requirements like focus order and ARIA notes.
  • Use case: When a design is approved but engineers need a complete spec sheet to avoid guesswork, this skill generates the full handoff package from a Figma URL or a description.

Quick Start

Use the /design-handoff command with a Figma URL when you need a complete developer handoff spec for a screen or feature.

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?▼

To create developer handoff documentation from a Figma design, you generate a complete spec sheet covering layout guidance, design token mapping, component variants, and responsive behavior to eliminate engineering guesswork.

What should a design handoff spec include for engineering implementation?▼

A design handoff spec should include visual, interaction, content, accessibility, and motion information, explicitly enumerating layout specs, component props, edge cases, and responsive breakpoints for consistent implementation.

Can I generate component states and accessibility specs without a Figma URL?▼

You can generate component states and accessibility specs without a Figma URL by providing a detailed design description or screenshot, which the system uses to enumerate focus order, ARIA notes, and edge cases.

How do I document responsive breakpoints and edge cases for a UI component?▼

You document responsive breakpoints and edge cases by producing an implementation-focused handoff spec that explicitly enumerates responsive behavior, content limits, empty states, loading states, and error conditions.

Does design handoff documentation cover motion details and interaction states?▼

Yes, design handoff documentation covers motion details and interaction states by documenting hover, click, disabled, and loading states, alongside transitions, animations, and gesture support.

Related Skills

Explore More Software Engineering Skills→
kirvinkirvin

figma-to-spec

Convert Figma design URLs into structured feature specifications.

Community
Intermediate
oghieoghie
8

uiux-frontend-engineering

Design and validate frontend UI/UX with token-driven design systems.

Community
Advanced
PetriLahdelmaPetriLahdelma
2

ui-design

Guide UI design covering design systems, typography, color, layout, and Figma handoff.

Community
Advanced
rakibulismrakibulism
2

design-handoff

Generate developer handoff documentation from design sources.

Community
Intermediate