For designers handing off to engineers: specs so precise the build matches the design.
Reach for this when you're handing a design to engineering and you're tired of the build coming back wrong. It gives you the full handoff toolkit - a single source-of-truth handoff doc, precise redline annotations, and dedicated specs for motion and responsive behavior - plus a QA checklist to verify the implementation before sign-off. The result: fewer Slack round-trips, no guesswork at the design-to-code boundary, and shipped UI that matches intent.
Click to play with sound.
Arranged in the author's recommended order. Walk through them in sequence, or open any one on its own.
Runs an ordered design QA pass over an implemented UI – layout, type, color, states, motion, content – against the design spec, with concrete tolerances and a filed defect list.
Produces precise redline annotations – spacing, sizing, type, color, radius, z-order, and behavior notes in a consistent, scannable notation – that engineers can build from without asking questions.
Specifies animation and motion precisely – duration, easing curve, trigger, and intent – for accurate engineer implementation.
Specifies responsive behavior across breakpoints – layout reflow, content priority, touch targets, and fluid-versus-stepped scaling rules – precisely enough for engineers to implement directly.
Writes a complete design handoff document covering components, design tokens, interaction states, and edge cases for engineering implementation.
Turns a static design into a numbered, testable, dev-ready specification covering every state, interaction, breakpoint, motion detail, and edge case the mockup cannot show.
Designs React/Vue component APIs – props, composition, event handling, accessibility.
Audits and repairs color palettes against WCAG contrast thresholds – 4.5:1 for body text, 3:1 for large text and UI components, 7:1 for AAA – and makes them safe for color-blind users, delivering a verified pairing table.