design-design-handoff

Provide a Figma URL or design description and the Skill generates a structured spec covering layout, design tokens, component props, interaction states, breakpoints, and edge cases. Mentioning your tech stack, such as React and Tailwind, produces more relevant implementation notes.

A complete handoff includes exact measurements, design token references, component variants and props, hover and loading states, responsive breakpoint behavior, animation durations and easing, empty and error states, and accessibility notes like focus order and ARIA labels.

Yes, when a design tool connector is connected, the Skill pulls exact measurements, tokens, and component specs from the Figma URL. Without a connector, it works from a design description or screenshot instead.

Yes, the output template includes a responsive behavior table documenting what changes at desktop, tablet, and mobile breakpoints, plus gesture support such as swipe, pinch, and long-press where relevant.

Without a Figma connector, measurements and tokens must come from the provided description or screenshot, so precision depends on input quality. Unspecified behaviors still require designer input, since the spec only documents what can be observed or stated.