design-handoff

Generates developer handoff specs covering layout, tokens, states, and accessibility from designs.

Updated Sep 3, 2026

Search Tags:#accessibility #figma #design tokens #developer handoff #design handoff #responsive breakpoints #spec sheet

Ready to run

npx skills add https://github.com/xzedm/clipplic-landing --skill design-handoff-xzedm

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/design-handoff
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill design-handoff-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designs handed to engineering without detailed specs force developers to guess measurements, states, and edge cases, causing rework and inconsistent implementations. ## Core Features & Use Cases - Structured Spec Generation: Produces a complete handoff document covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, animations, and accessibility. - Figma Integration: Pulls exact measurements, tokens, and component specs directly from a Figma URL when a design tool connector is available. - Use Case: A designer finishes a checkout flow in Figma and needs engineering to build it. Run the skill with the Figma link to produce a spec sheet with token tables, state matrices, and responsive behavior that developers can implement against. ## Quick Start Ask the assistant to generate a developer handoff spec for your design by providing a Figma URL or a description of the screen.

Frequently Asked Questions about design-handoff

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

FAQPage Schema

How do I create a developer handoff spec from a Figma design?▼

Provide the Figma URL as the argument when invoking the skill. If a design tool connector is available, it pulls exact measurements, tokens, and component specs from Figma and generates a complete spec sheet.

What should a design handoff document include?▼

A handoff spec should cover layout and breakpoints, design token references, component variants and props, interaction states like hover and loading, edge cases such as empty and error states, animation timing, and accessibility notes including focus order and ARIA labels.

Can I generate a handoff spec without a Figma link?▼

Yes. If no Figma URL is provided, the skill works from a written design description or screenshot. The output is less precise on exact measurements, so describing tokens and states explicitly improves the result.

Does the handoff spec cover responsive and mobile behavior?▼

Yes. The output template includes a responsive behavior table covering desktop, tablet, and mobile breakpoints, plus guidance on describing why layouts change so developers can make sound judgment calls.

What are the limitations of generated design handoff specs?▼

Without a connected design tool, measurements and token values rely on the provided description and may be approximate. The skill documents specs but does not generate production code or validate the final implementation against the design.