design-handofflisted

# Design handoff Turn a finished mockup into a spec a developer can implement without asking you a follow-up question for anything that was actually visible in the source - and without you inventing an answer for anything that wasn't. ## Input Accept any of: - One or more mockup images or screenshots, pasted into chat or given as file paths. - An HTML file or a URL to a live page. - An optional token set: a CSS file with custom properties, a JSON token file, or a plain description of existing design tokens (palette, type scale, spacing ramp, radii, shadows). If no token set is given, say so in the output and derive a draft one from the mockup itself (see Step 3). ## Output One markdown file per screen, named `<screen-slug>-handoff.md`, following the eight-section structure in [`references/handoff-template.md`](references/handoff-template.md). Read that file for the exact skeleton to copy before writing the first spec. **Decide screen count first.** If two or more inputs show the same layout with only a component's state changed (a button in default and hover, a form before and after an error), that is ONE screen - merge the evidence into section 4 of a single spec. If the inputs show different screens, routes, or breakpoints, write one spec file per screen. For a screen supplied at multiple breakpoints, write one file per screen and add a subsection per breakpoint under section 2 (Layout) rather than duplicating the whole file. ## The spine: never invent what you can'