{
  "video": {
    "id": "NW-jwOVr32w",
    "title": "The Design-Code Roundtrip That Isn't — Jonathan Gordon, ReWeaver AI",
    "duration": 1117,
    "upload_date": null,
    "channel": "AI Engineer",
    "source": "AI Engineer"
  },
  "analysis": {
    "video_id": "NW-jwOVr32w",
    "title": "The Design-Code Roundtrip That Isn't — Jonathan Gordon, ReWeaver AI",
    "one_liner": "A 30-year design-tools veteran tests the industry's claim that the design↔code roundtrip is solved, finds it lossy across five tool setups, and argues the fix is deterministic guardrails that detect and reconcile drift rather than more AI in the loop.",
    "summary": "Jonathan Gordon defines the design-code roundtrip as a full loop between design and engineering in both directions with no loss of fidelity and persistent provenance, then shows that despite demos like Claude Code building a Figma artboard from a prompt and Figma Config declaring 'code is now material,' nobody has actually closed it. He demos a harness with AI-generated code on one side and a Figma/Sketch canvas on the other, plus the first public showing of ReWeaver's 'show drift' scan that flags issues across design quality, code quality, performance, design tokens and accessibility and offers to fix them. His argument: AI is probabilistic, developer tools are deterministic, and drift over time is the new tech debt — so you wrap AI in deterministic guardrails and keep the human in control rather than merely in the loop.",
    "key_points": [
      "His definition of the roundtrip: a full loop between design and engineering in both directions, without any loss of fidelity, with persistent provenance so you know exactly where everything came from — including which line of code wrote a button you're editing in Figma.",
      "He tried five different tool setups for bidirectional code→design→code and never got a full roundtrip: bindings were lost, and in cases the design change survived but the code didn't.",
      "Vibe-coding anecdote: while ignoring the wall of scrolling output he caught an innerHTML statement — an injection vulnerability he remembered from years back — stopped the LLM, made it revert, and concluded he had to steer and read the code rather than go in blindly.",
      "Live demo of his harness: AI-generated code on the left, a Figma/Sketch canvas on the right; a prompt turns a form into a real runtime design system that also lives in Figma, then 'build an orange button' plus a company field updates both sides.",
      "First public demo of ReWeaver's 'show drift': scans code and design simultaneously and stacks issues across dimensions (design quality, code quality, performance, design tokens), e.g. an element with no ARIA live region that a screen reader won't announce — then fixes it on request.",
      "He was frustrated that LLMs shipped inaccessible code out of the box, comparing it to training engineers on accessibility 20 years ago at Microsoft: 'here we are again now training LLMs instead of engineers on accessibility.'",
      "Experiment over 12 iterations on a codebase with complex UI: pure LLM started at 30% quality/fidelity/pixel perfection and degraded; on deterministic guardrails that find and fix issues you still can't reach 100 because the last 10% is human judgment.",
      "Three blind spots: the model itself is nondeterministic and probabilistic; drift surfaces in the moment while you write code; and drift over time is the pain of the next six months.",
      "ReWeaver is nine dimensions of deterministic guardrails (design consistency, accessibility, AI code-generation governance among them), runs on a fully local LLM with zero extra token cost, and doesn't write code unless you tell it to apply a fix — which you can undo or ignore.",
      "Public playground is live: paste your AI-generated code, scan it, and get results; code scoring under 30 PDR (production drift ratio) wins a front-line beta seat and a spot on the showcase crawl. Beta blast planned for mid-July."
    ],
    "takeaways": [
      "Stop treating 'it compiles and looks right' as done — read the generated code. He only caught an innerHTML injection risk because he stopped ignoring the scrolling output.",
      "Don't trust roundtrip claims from vendor demos; build your own harness with code on one side and the canvas on the other and actually test both directions for fidelity loss before adopting a workflow.",
      "Treat accessibility as its own dimension of AI code review — models generate inaccessible markup (missing ARIA live regions) by default, so scan for it rather than assume it.",
      "Budget for drift over time as tech debt: put deterministic checks around the nondeterministic model so drift is caught in a closed loop before anything merges.",
      "Aim for 'human in control' rather than 'human in the loop' — control of cost, code and design — and accept that roughly the last 10% is human judgment that no guardrail will close."
    ],
    "topics": [
      "design-to-code",
      "design systems",
      "drift",
      "accessibility",
      "vibe coding",
      "guardrails",
      "developer tools",
      "code generation"
    ],
    "tools": [
      "ReWeaver AI",
      "Claude",
      "Claude Code",
      "Anthropic",
      "Cursor",
      "Figma",
      "Figma Config",
      "Sketch",
      "GitHub",
      "Microsoft"
    ],
    "quotes": [
      {
        "text": "I got this email from cursor one day that said I was in the top 0.1% of usage of cursor and I thought to myself, I need to spend more time outside.",
        "at": "04:14",
        "url": "https://www.youtube.com/watch?v=NW-jwOVr32w&t=254s"
      },
      {
        "text": "But they said the roundtrip was solved and I started messing around and realized it wasn't.",
        "at": "07:11",
        "url": "https://www.youtube.com/watch?v=NW-jwOVr32w&t=431s"
      },
      {
        "text": "Drift lurks in the dark. You need to look at the code. You need to find the drift. You need to fix the drift. And you do that with deterministic guardrails around the AI.",
        "at": "12:46",
        "url": "https://www.youtube.com/watch?v=NW-jwOVr32w&t=766s"
      },
      {
        "text": "drift over time is the new tech debt and it's going to pile itself gloriously over your codebase",
        "at": "14:28",
        "url": "https://www.youtube.com/watch?v=NW-jwOVr32w&t=868s"
      }
    ],
    "words": 3500
  },
  "summary_url": "/#NW-jwOVr32w",
  "transcript": {
    "html": "/transcripts/NW-jwOVr32w.html",
    "txt": "/transcripts/NW-jwOVr32w.txt",
    "vtt": "/transcripts/NW-jwOVr32w.vtt"
  }
}