Design Handoff

Generate developer handoff specs: layout, tokens, component props, interaction states, breakpoints.

handoff design-tokens components developer-specs

When to use

Use when a design is ready for engineering and needs a spec sheet covering layout, design tokens, component props, interaction states, responsive breakpoints, edge cases, and animation details. Produces developer-ready documentation from design descriptions or Figma links.

Examples

Generate a component spec

Create a developer spec for a UI component

Generate a handoff spec for our new Button component. It has primary/secondary/ghost variants, 3 sizes, and disabled state.

Document interaction states

Spec out all states for an interactive element

Document all interaction states for our form input: default, focus, error, disabled, and loading.

Responsive breakpoint spec

Define layout behavior across screen sizes

Write the responsive spec for our card grid. It's 3-column on desktop, 2-column on tablet, 1-column on mobile.