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 of them were 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 or 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 is HTML and CSS, not an abstraction over pixels. 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 (now pen.dev) 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 in parallel. There is no handoff. The design 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 is not the gap between design tools and code editors but 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.
Ask an agent to “make a dashboard” and you’ll get what paddo calls “eight shades of blue, three button sizes, and spacing chosen by dice roll.” The code underneath is no better. The agent 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. Encode design decisions as an unambiguous intermediate representation and agents go from unreliable to remarkably consistent. That means tokens with semantic names, a constrained spacing scale, and pattern compositions described in a shared vocabulary. 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
Stitch, Paper and Pencil are all 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 started out crude compared to a full token architecture. Since April it’s an open spec with YAML tokens and a DTCG export. The instinct was right from the start: 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. Instead of interpreting screenshots, agents 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. The designer no longer works upstream, in a separate tool, before any code exists. They work 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 is proximity, not automation. 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.