skills.rest
ilove323
ilove323COMMUNITY
Explore all skills by this author →
GitHub

design-handoff

Generate markdown-ready developer handoff specifications from Figma links or screenshots.

1|Updated Mar 30, 2026
Search Tags:#accessibility#figma#responsive#design-tokens#design-handoff#developer-specs
One-click install
npx skills add https://github.com/ilove323/comlan-skills --skill design-handoff-ilove323
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-handoff
Source: https://github.com/ilove323/comlan-skills/tree/main/design/skills/design-handoff
Command: npx skills add https://github.com/ilove323/comlan-skills --skill design-handoff-ilove323

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates ambiguity between design and engineering by turning design artifacts into precise, actionable developer handoff documentation that reduces implementation guesswork and rework.

Core Features & Use Cases

  • Comprehensive visual specs: captures exact sizes, spacing, tokens, component variants, and responsive behaviors for developers.
  • Interaction and state definitions: documents click/hover/active/loading/error/empty states, transitions, and gesture behaviors.
  • Content, edge-case, and accessibility guidance: lists character limits, truncation, internationalization considerations, focus order, ARIA roles, and keyboard interactions.
  • Integrations: when connected to design tools it extracts measurements and tokens, and when connected to project trackers it can link specs to implementation tasks and create sub-tasks.
  • Use case: create a full handoff spec from a Figma page or a set of screenshots to attach to an implementation ticket and reduce developer questions.

Quick Start

Provide a Figma link or screenshots and ask the assistant to generate a developer handoff spec for the specified page.

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 specs from a Figma link?▼

To generate developer handoff specs from a Figma link, provide the link to the assistant and request a handoff spec for the specified page. The tool extracts measurements, design tokens, component variants, and responsive breakpoints to format into markdown-ready specifications.

What should be included in design handoff documentation for developers?▼

Design handoff documentation should include exact sizes, spacing, design tokens, interaction states like hover and loading, edge cases, and accessibility requirements such as ARIA roles and keyboard interactions. This ensures comprehensive developer guidance and reduces implementation guesswork.

Can I create responsive design specs and accessibility requirements from screenshots?▼

Yes, you can create responsive design specs and accessibility requirements from screenshots. The tool processes UI pages and components sourced from screenshots or textual descriptions to extract responsive breakpoints, focus order, and ARIA roles for markdown-ready specifications.

What is the best way to document component variants and interaction states for QA reviews?▼

The best way to document component variants and interaction states for QA reviews is to generate markdown-ready specifications that explicitly capture click, hover, active, loading, error, and empty states. This translates design artifacts into precise, actionable developer handoff documentation.

Does design handoff documentation support linking extracted measurements to project trackers?▼

Yes, design handoff documentation supports linking extracted measurements to project trackers. When connected to project trackers, the generated markdown-ready specifications can be attached to implementation tickets and create sub-tasks to reduce developer questions.

Related Skills

Explore More Design & Creative Skills→
omerakbenomerakben
1

web-design-guidelines

Analyze UI code against Web Interface Guidelines for accessibility and usability issues.

Community
Basic
mitchellfyimitchellfyi
3

dxrefine

Decomposes large engineering tasks into estimated sub-tickets aligned with existing architecture.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
launchapp-devlaunchapp-dev
38

component-spec

Generate structured component specifications with anatomy, variants, props, states, and accessibility.

Official
Advanced