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. Use when someone asks "QA this build against the designs", "does the implementation match Figma", "is this ready for design sign-off", or before releasing a UI change. Do NOT use for critiquing the design itself - use design-critique instead; for a full WCAG conformance audit, use accessibility-audit; for writing the spec the build is checked against, use design-handoff-doc.
View skillProduces 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. Use when someone asks "redline this screen", "spec this component", "annotate the spacing for handoff", or is preparing design files for development. Do NOT use for the overall handoff document with flows, edge cases, and acceptance criteria - use design-handoff-doc instead; for animation timing and easing, use motion-spec; for breakpoint behavior, use responsive-spec.
View skill