The design handoff is dying
For as long as I’ve been building software, the design-to-code handoff has been a polite fiction. A designer produces a spec. An engineer interprets it. The interpretation drifts. The spec gets updated but the code doesn’t, or the code adapts but nobody tells the designer. Six months later, two systems exist: what was designed and what was built. Everyone pretends they’re the same thing.
The industry has spent twenty years trying to fix this with process. Design systems, component libraries, pixel-perfect QA, redline documents, Zeplin, Figma’s inspect panel — all attempts to make the handoff less lossy. They helped. None of them eliminated the fundamental problem: design and code are separate artifacts, maintained by separate people, in separate tools, with separate sources of truth.
Three tools launched in the past year suggest we’re watching that separation collapse. Not incrementally. Structurally.
Three tools, three directions
Google Stitch starts from intent. You describe what you want — in text, in a sketch, in a voice note — and Stitch generates high-fidelity UI with clean HTML/CSS. Google calls it “vibe design.” The designer’s job shifts from drawing layouts to directing them. Stitch even exports a DESIGN.md file — an agent-readable design spec that coding assistants can consume directly.
Paper starts from code. The canvas isn’t an abstraction over pixels — it is HTML and CSS. What you see on screen is what ships. There’s no translation step, no export, no “does this match the mock?” conversation. The design is the code. The code is the design.
Pencil starts from the IDE. A Figma-like canvas that lives inside your editor, with design files stored as .pen JSON in your Git repository. AI agents read and write designs through MCP tools. Up to six agents can work the canvas simultaneously in swarm mode. The design doesn’t get handed off — it lives where the code lives, versioned alongside it.
Each tool attacks the problem from a different direction. Intent-first, code-first, IDE-first. But they share one conviction: the handoff itself is the bug.
The design handoff isn’t slow or lossy. It’s architecturally wrong — a synchronisation problem disguised as a communication problem.
The vocabulary problem
Here’s what I find more interesting than any individual tool. Barnesy argues that the real problem isn’t the gap between design tools and code editors — it’s the absence of a shared language. Designers think in pixels and visual hierarchy. Engineers think in components and utility classes. Agents think in tokens. None of these vocabularies translate cleanly to the others.
Give an agent a screenshot and ask it to reproduce the UI. You’ll get eight shades of blue, three button sizes, and spacing chosen by dice roll. Not because the agent is bad at code — it’s excellent at code. But it has no visual judgment. It can’t see that the padding is inconsistent or that the colour doesn’t match the brand. It’s text-native, operating without the spatial reasoning that a human designer brings unconsciously.
The fix isn’t better prompting. It’s better structure. When design decisions are encoded as an unambiguous intermediate representation — tokens with semantic names, a constrained spacing scale, pattern compositions described in a shared vocabulary — agents go from unreliable to remarkably consistent. The same description resolves identically on web, iOS, Android. The same agent generates the same button because the vocabulary leaves no room for interpretation.
This is what I wrote about with design tokens: they’re not just a bridge between designers and engineers, they’re a bridge between humans and agents. Semantic naming communicates intent to people and constrains output for machines. The more explicit your design decisions, the more reliably agents can respect them.
The missing infrastructure isn’t a better design tool. It’s a shared language that humans design in, agents generate from, and code consumes — without translation at any boundary.
What these tools get right
All three tools — Stitch, Paper, Pencil — are building toward that shared language, whether they frame it that way or not.
Stitch’s DESIGN.md is an agent-readable design specification. Commit it to your repo and a coding assistant reads the exact colours, typography, and spacing instead of guessing. It’s crude compared to a full token architecture, but it’s the right instinct: make design decisions machine-readable.
Paper eliminates the language problem by eliminating the translation. If the canvas is HTML and CSS, there’s no intermediate representation to get wrong. The tradeoff is that you’re designing in code’s vocabulary, which isn’t every designer’s native tongue.
Pencil’s .pen format is a structured JSON document that agents read through MCP tools. The design vocabulary is explicit, queryable, and version-controlled. Agents don’t interpret screenshots — they read component specs with exact values.
Each approach has tradeoffs. But they all move in the same direction: from implicit, visual, human-interpreted design decisions toward explicit, structured, machine-readable ones.
The human part that remains
I want to be careful not to oversell this. Tools that collapse the design-to-code gap don’t eliminate the need for design judgment. They eliminate the handoff, not the craft. Someone still needs to decide that this shade of teal communicates trust, that this spacing rhythm creates calm, that this typography hierarchy guides the eye correctly. That’s taste, not process. No tool automates it.
What changes is where that judgment gets applied. Instead of upstream, in a separate tool, before code exists — the designer works closer to the material. Closer to the constraints. Closer to what actually ships. The feedback loop tightens from days to minutes. The question shifts from “can you produce this layout?” to “is this the right layout?”
The design handoff is dying. What replaces it isn’t automation — it’s proximity. Designers, engineers, and agents working in the same material, speaking the same language, shipping from the same source.
Interlusion builds design-to-code workflows where design tokens, agents, and structured specifications replace handoffs and guesswork. If your team is still translating between Figma and production — let’s talk.