skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill design-handoff-xzedm
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Martino17xMartino17x

figma-generate-design

Generate Figma screens from code or descriptions using design system components and tokens.

Community
Basic
arthur-debertarthur-debert

to-tickets

Break specs and ADRs into epic and work stream tracker issues.

Community
Advanced
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate