A true design-code roundtrip must work in both directions without losing fidelity or provenance, and current tools do not achieve that.
2
AI-generated code accumulates drift, including accessibility failures such as missing ARIA live regions, so engineers need deterministic checks around model output.
3
ReWeaver AI scans code and design together, reports drift across several dimensions, and keeps the human in control of fixes and code changes.
Summary
Jonathan Gordon defines a design-code roundtrip as a complete loop between design and engineering, in both directions, with no loss of fidelity and with provenance preserved. After more than thirty years building developer tools, he had never seen that handoff close because design and engineering optimize for different outcomes. AI appeared to offer a way to change this, since one model could interpret design intent and write code. Gordon tested that assumption through intensive vibe coding and five different tool setups. Each remained lossy. He built ReWeaver AI to compare generated code with its design, identify drift, and offer fixes. The system checks areas such as design quality, performance, design tokens, and accessibility. Gordon shows an accessibility issue involving a missing ARIA live region. He argues that nondeterministic AI needs deterministic guardrails, while people retain control over cost, code, design, and final decisions. Drift that accumulates over time becomes a new form of tech debt.
A real roundtrip preserves fidelity and provenance in both directions
Gordon defines a design-code roundtrip as a full loop between design and engineering. It must work from design to code and from code to design without losing fidelity. It also needs persistent provenance, so the system can identify where each element came from. In his example, someone looking at a button in Figma should be able to find the line of code that produced it. This is the standard against which he evaluates current AI and design tools.
Gordon has spent more than thirty years building developer tools, IDEs, and coding tools. He worked with design and engineering teams to improve their handoffs, using techniques such as negotiating with engineers and building personal relationships. Those methods helped teams deliver software, but they never made design intent match the final result. He attributes the failure to different outcomes: engineering has technical requirements and constraints, while design may be pursuing a new vision or rebranding.
AI made a shared design and coding intelligence seem possible
The arrival of large language models changed Gordon's expectations. He saw one intelligence that could understand design intent and also write code. That made him wonder whether inference could finally close the loop between design and engineering. He then went deeply into vibe coding, using Cursor heavily from April 2025 onward and trying to move between design and code in both directions. His goal was the pixel-perfect roundtrip that existing handoffs had not delivered.
The innerHTML incident ended his blind trust in generated code
During a vibe coding session, Gordon watched a wall of generated text without reading it closely. He noticed an innerHTML statement and remembered that it could create an injection vulnerability. He stopped the model, asked what it had done, and told it to revert the change. That incident changed his behavior. He began steering the model more carefully and reading the code again, where he found further issues.
When companies began claiming that code and canvas could now be roundtripped, Gordon tested the claim. He refers to a demonstration involving Claude Code and Figma, followed by further announcements around Figma's support for code. He built a harness with AI-generated code on one side and a Figma or Sketch design on the other. After trying five bidirectional tool setups, he found lossy behavior in every case. Bindings could disappear, and a design change could persist while the corresponding code change did not.
Gordon demonstrates ReWeaver AI with generated code on the left and a design canvas on the right. The harness can update both sides, such as adding a company field and an orange button. Its show drift function scans the code and design together, then reports issues across dimensions including design quality, code quality, performance, and design tokens. Gordon also presents it as a way to fix identified problems, rather than only listing differences.
Accessibility failures remain common in model-generated components
Gordon says he was frustrated that early language models produced inaccessible code out of the box. He connects this to the earlier need to train engineers in accessibility. In the demonstration, ReWeaver finds a component with no ARIA live region. As a result, a screen reader would not announce the element to a blind user. ReWeaver identifies the issue and can apply a fix, after which that reported problem disappears, while another issue remains visible.
Deterministic guardrails limit drift around nondeterministic models
Gordon contrasts traditional developer tools with AI systems. A deterministic tool produces the same result when the same code runs, while AI can produce different outcomes. He ran twelve iterations on a codebase with a sufficiently complex UI. Pure model output began at about 30 percent fidelity and degraded over the iterations. Adding deterministic guardrails allowed the system to find and fix issues. Gordon says the result cannot reach 100 percent because the remaining 10 percent requires human judgment.
Gordon describes accumulated drift as the new tech debt. His proposed workflow keeps humans in control of cost, code, design, and decisions. ReWeaver can apply a known fix, report an issue when it does not know how to fix it, or let the user ignore the recommendation. It does not automatically rewrite code without the user's direction. The goal is to catch drift in a closed loop before changes merge, while preserving the ability to inspect, undo, or refuse a fix.
"The design code roundtrip is a full loop between design and engineering in both directions without any loss of fidelity and with a persistent provenance."00:53
Who should watch
You are using AI to generate interfaces and need to check whether the resulting code still matches the design.
Your team moves between Figma or Sketch and a codebase, and changes often lose bindings, tokens, or accessibility details.
You are building AI-assisted development workflows and want human approval and deterministic checks before generated changes merge.
