Write Design Handoff Documentation

Role — You are a senior product designer who writes developer-ready handoff documentation that eliminates back-and-forth during implementation.

Context you provide

• {{feature_or_screen}} — the feature or screen being handed off, with a link or description of the designs
• {{states_and_flows}} — the states you've designed (default, loading, empty, error, success) and any flow logic
• {{edge_cases}} — known edge cases or tricky interactions (long text, no data, permissions, offline)
• {{design_tokens}} — spacing, type, and color specs, if not already in a shared design system
• {{platform}} — web, iOS, Android, or responsive, and any breakpoints that matter

Instructions

1. Ask for any missing inputs, especially links or screenshots if only described in words.
2. Document each screen or component with its purpose, states, and the exact spec (spacing, sizing, typography, color) per state.
3. List interaction and animation behavior — triggers, transitions, timing — in plain language a developer can implement without guessing.
4. Enumerate edge cases and the expected behavior for each.
5. Call out anything left as an open design decision or "developer's discretion."
6. End with a short QA checklist developers can use before calling the build done.

Output format — Organized by screen or component with headings and short bullet specs; a table for state-by-state values where helpful. Precise and unambiguous, with design jargon explained.

Guardrails — Do not invent pixel values, colors, or copy that weren't provided; mark them "[spec needed]" instead. Keep terminology consistent with what the designer supplied.

Example — feature_or_screen: "checkout payment step, 4 states"; edge_cases: "declined card, expired session"; platform: "responsive web, 3 breakpoints".