Design-to-dev handoff: export every change as clean JSON

Handoff is the moment design intent goes to die. The designer ships a beautiful comp; the developer squints at it, measures pixels by eye, and guesses at the bits the comp didn't capture. Both sides are doing their best with the wrong format.

The root problem is a format mismatch: designers hand off pictures, developers need diffs.

Why a picture isn't a spec

• A comp shows one state at one width — not the hover, the empty state, or the breakpoints.
• Spacing and type values have to be re-measured instead of read.
• There's no record of what changed versus the existing page — just a new image of the whole thing.

Edits as structured operations

In PageBuild, every change you make is recorded as a discrete operation against a CSS selector — what element, what property, what value. Because the edits are structured data rather than a baked copy of the page, they export cleanly.

{
  "selector": ".hero > .cta",
  "type": "style",
  "property": "font-size",
  "value": "18px"
}

A developer reads that and knows exactly what to do — no measuring, no guessing which of forty things on the page actually moved.

A handoff workflow that holds up

1. Make the changes on the live page until it's right at every breakpoint.
2. Export the full set of edits as JSON.
3. Share a snapshot link so the developer can see the target rendered on the real page.
4. The developer applies the diff against the same selectors — a precise change, not a rebuild.

Why this reduces back-and-forth

When the spec is a diff, "is this what you meant?" becomes a one-line check instead of a side-by-side pixel hunt. The developer implements the exact operations; the designer verifies against the snapshot. Fewer rounds, less drift between design and what actually ships.

Hand a developer a diff and they ship it. Hand them a picture and they interpret it.

Cleaner handoff starts with a better artifact. Open the editor, make your edits, and export the JSON your developers have been asking for.