Design Handoff
Turn an approved Figma frame or design description into an engineering-ready handoff spec your agent or dev can implement without guessing tokens, states, or breakpoints.
Overview
Design Handoff is an agent skill for the Build phase that generates developer handoff specs from Figma or a design description, covering layout, tokens, states, responsiveness, edge cases, and accessibility.
Install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill design-handoffWhat is this skill?
- Visual specs: measurements, design tokens, breakpoints, and component variants/states
- Interaction specs: hover, transitions (duration/easing), gestures (swipe, pinch, long-press)
- Content specs: limits, truncation, empty/loading/error states
- Edge-case checklist: min/max content, i18n string length, slow network, missing data
- Accessibility block: focus order, ARIA, keyboard, and screen-reader announcements
- 5 handoff principle areas: visual, interaction, content, edge cases, accessibility
- 4 specification groupings in the skill outline (visual, interaction, content, edge cases) plus dedicated accessibility s
Adoption & trust: 1.7k installs on skills.sh; 19.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your design looks finished in Figma but engineering still improvises spacing, states, and breakpoints because there is no single implementation-ready spec.
Who is it for?
Solo builders handing off a concrete screen or flow to themselves or a contractor agent right before UI build.
Skip if: Early ideation without visual decisions, or teams that already maintain a full design-system doc that supersedes per-screen handoff.
When should I use this skill?
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.
What do I get? / Deliverables
You get a structured handoff document with visual, interaction, content, edge-case, and accessibility sections ready to drive frontend implementation or a writing-plans task list.
- Developer handoff spec (layout, tokens, variants, breakpoints)
- Interaction and animation specification
- Accessibility and edge-case notes for implementation
Recommended Skills
Journey fit
Handoff sits at the boundary between design finish and frontend implementation—the canonical moment engineering needs written specs before coding UI. Frontend is where layout, variants, responsive behavior, and interaction states are implemented; this skill outputs the artifact builders consume in that subphase.
How it compares
Use instead of pasting Figma links into chat without enumerated tokens, states, and breakpoint behavior.
Common Questions / FAQ
Who is design-handoff for?
Indie and solo builders (and small teams) who implement their own UI and need agent-generated engineering specs from Figma or design descriptions.
When should I use design-handoff?
Use it in the Build phase when a design is approved for engineering—after validate/prototype work and before or alongside frontend coding—to produce layout, token, interaction, responsive, and accessibility specifications.
Is design-handoff safe to install?
Review the Security Audits panel on this Prism page before installing; Figma or connector access may require network credentials you should scope minimally.
SKILL.md
READMESKILL.md - Design Handoff
# /design-handoff > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Generate comprehensive developer handoff documentation from a design. ## Usage ``` /design-handoff $ARGUMENTS ``` Generate handoff specs for: @$1 If a Figma URL is provided, pull the design from Figma. Otherwise, work from the provided description or screenshot. ## What to Include ### Visual Specifications - Exact measurements (padding, margins, widths) - Design token references (colors, typography, spacing) - Responsive breakpoints and behavior - Component variants and states ### Interaction Specifications - Click/tap behavior - Hover states - Transitions and animations (duration, easing) - Gesture support (swipe, pinch, long-press) ### Content Specifications - Character limits - Truncation behavior - Empty states - Loading states - Error states ### Edge Cases - Minimum/maximum content - International text (longer strings) - Slow connections - Missing data ### Accessibility - Focus order - ARIA labels and roles - Keyboard interactions - Screen reader announcements ## Principles 1. **Don't assume** — If it's not specified, the developer will guess. Specify everything. 2. **Use tokens, not values** — Reference `spacing-md` not `16px`. 3. **Show all states** — Default, hover, active, disabled, loading, error, empty. 4. **Describe the why** — "This collapses on mobile because users primarily use one-handed" helps developers make good judgment calls. ## Output ```markdown ## Handoff Spec: [Feature/Screen Name] ### Overview [What this screen/feature does, user context] ### Layout [Grid system, breakpoints, responsive behavior] ### Design Tokens Used | Token | Value | Usage | |-------|-------|-------| | `color-primary` | #[hex] | CTA buttons, links | | `spacing-md` | [X]px | Between sections | | `font-heading-lg` | [size/weight/family] | Page title | ### Components | Component | Variant | Props | Notes | |-----------|---------|-------|-------| | [Component] | [Variant] | [Props] | [Special behavior] | ### States and Interactions | Element | State | Behavior | |---------|-------|----------| | [CTA Button] | Hover | [Background darken 10%] | | [CTA Button] | Loading | [Spinner, disabled] | | [Form] | Error | [Red border, error message below] | ### Responsive Behavior | Breakpoint | Changes | |------------|---------| | Desktop (>1024px) | [Default layout] | | Tablet (768-1024px) | [What changes] | | Mobile (<768px) | [What changes] | ### Edge Cases - **Empty state**: [What to show when no data] - **Long text**: [Truncation rules] - **Loading**: [Skeleton or spinner] - **Error**: [Error state appearance] ### Animation / Motion | Element | Trigger | Animation | Duration | Easing | |---------|---------|-----------|----------|--------| | [Element] | [Trigger] | [Description] | [ms] | [easing] | ### Accessibility Notes - [Focus order] - [ARIA labels needed] - [Keyboard interactions] ``` ## If Connectors Available If **~~design tool** is connected: - Pull exact measurements, tokens, and component specs from Figma - Export assets and generate a complete spec sheet If **~~project tracker** is connected: - Link the handoff to the implementation ticket - Create sub-tasks for each section of the spec ## Tips 1. **Share the Figma link** — I can pull exact measurements, tokens, and component info. 2. **Mention edge cases** — "What happens with 100 items?" helps me spec boundary conditions. 3. **Specify the tech stack** — "We use React + Tailwind" helps me give relevant implementation notes.