design-handoff

Design handoff automation extracts component specifications from Figma links or design mockups and generates structured markdown documents that developers can implement directly. The Skill processes design specs through Framelink MCP integration and produces versioned handoff files with complete style, interaction, and layout details.

Handoff documents should specify component names, CSS styles, layout dimensions, color values, typography, interaction states, and responsive behavior. The Skill templates this automatically from design sources, capturing source attribution, author metadata, and generation dates for traceability.

Yes. The Skill accepts multiple input sources: Figma links, existing component code, design mockup results from generate-mockup, or verbal component descriptions. It extracts specifications from any source and bridges design intent with implementation through structured documentation.

Design handoff is built for design system components, style guides, and pattern libraries. It extracts reusable component specifications and design tokens, organizing them into versioned handoff documents that maintain consistency across development and design workflows.

Handoff documents are stored in docs/handoff/{component-name}-handoff.md with automatic version, author, and date metadata embedded. This enables tracking changes across design iterations and maintains a queryable history for each component's specifications.

The Skill bridges design and development by connecting Claude Code with Antigravity, enabling designers to publish specs that developers consume directly. Generated handoff documents serve as executable specifications that reduce implementation friction and design-dev miscommunication.