[SPEAKER_00] Hello everyone. I'm Jonathan Gordon. I'm a founder of ReWeaver AI, a new company on the scene. I want to share one thing with all of you that was really fascinating. So I plugged in my laptop and I realized I had to mirror, so I no longer had my speaker notes. So I went into Claude and I said, can you extract my speaker notes from my slide deck, please? And I had my speaker notes now. I love AI. I was talking to Claude. Now who knows if it got it right. Whatever. So I also realized that my title slide buried the lead. I shouldn't have put it up. But nonetheless, let's play with this. So my name is Jonathan. I'm here to talk to you about the design code round trip that isn't. And I guess probably the best thing to do first is to explain what I think a design code round trip should be. A design code round trip is a full loop between design and engineering in both directions without any loss of fidelity and with a persistent provenance. It knows exactly where everything came from. That perfect dream world that we live in of doing a design, where there is no drift between the gaps of design and code. Today's tools, design is amazing. It's incredible. It's magic. I asked for something. I get it. It's clickable. It's interactive. It's amazing to me. But nobody really looks at the code anymore. And so I want to go there. I want to go into that space. Of course, I have to get my mouse to the right location. There we go. A little bit about me. Past 30 plus years, I've been building and designing coding tools, developer tools, IDEs at these companies. So I've spent a lot of time as a designer with design and engineering teams, trying to understand how do we do that handoff well. How do we hand off from design to code? How do we get what we wanted to be delivered to the customer? It was never a perfect science. We never got it. We never found that magic sauce that just made everything come together, where intent matched the outcome. But I developed techniques. I negotiated with engineers. I brought them out for drinks. I made them my friends. I got things delivered to customers. But the loop was never closed. And it's because our outcomes diverged. Engineering had one set of requirements, technical constraints, design had a vision for the future, a new rebranding, whatever. So this has existed for decades. And then along comes AI and LLM and prompting ourselves into a fully running application. Now we have one intelligence that understands design intent. And the same intelligence can write code. So I thought to myself, I think we might be able to close this loop. At the speed of inference, we could close this loop. And so I was curious. I'm curious by nature. So I went all in. That's my GitHub before Vibe coding happened. On the left. On your whatever. Then after. So everybody probably gets a sense of what my life was like from April 2025. And if you want to scroll till today, it's even more so. 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. Then there was a bill. But at the time it was the $20 deal and I monitored. But every now and again I'd pay for a little bit more. Get another hit. And this was my life, Vibe coding. From that point in April until today. I'm trying to figure out can I go from design to code? Can I go from code to design? Can I build a tool to go from design to code and code to design? A full round trip without any loss of fidelity. That pixel perfect dream that we have. I remember vividly one day I was hammering away at the keyboard. Just vibing my way. I was really feeling the vibe. And this wall of text was coming by and I was completely ignoring it. And code was being written. Just watching that come by. And I remember seeing a statement that was an inner HTML statement. And I remember from way back when that inner HTML was a security vulnerability that people can actually inject into inner HTML. And I stopped it. And I said, wait a minute. To my LLM. Wait a minute. What did you just do? And it explained to me what it did. And it was very proud of itself. And I said, revert that. Do this instead. And I got into this mode, maybe I need to steer this thing a little bit better. Maybe I can't just go blindly in. Maybe I need to look at the code now. And I've looked at a lot of code in my life. So I went ahead and went in and looked at the code. And I clicked two ahead. And I found issues. And so I went a little bit deeper when the industry started to tell me that they had solved the round trip. That you could go a true round trip workflow. You could round trip between code and Canvas. I think folks in the room might remember back in February, no slam on Anthropic or Figma. There was this demo that showed going from cloud code into Figma. And it was magic. It was incredible. I couldn't believe you could build a Figma artboard from a prompt in cloud code. And then I had to go deeper. And I had to look deeper. In the same way that I looked at vibe coding. Is this real? Is the hype real? So I went deeper. And then more announcements were made. All the way up until last week. When Figma config announced that code is now material. Does that mean there is no even handoff that exists anymore? So I'm monitoring. Trying to keep up. Things are happening at warp speed. But they said the round trip was solved. And I started messing around and realized it wasn't. And so I want to share with all of you a harness that I built. Localhost. Where are you, Localhost? Come back to me, Localhost. Okay. I think we're okay. I created this harness. And what this harness is, is on I'm going to say left. I hope everybody. Is that your left? It is your left. Okay, good. On your left is code that was generated by AI. This is all real, what you're seeing here. Generated by AI. And on your right is a design. Be it a canvas that I created in Figma. Be it something I created in Sketch. It's not really relevant what the sources are here. But the reality is I'm trying to illustrate a round trip. And a round trip, starts with code or starts with design. And it has a prompt associated with it. So some LLM I call off and I say, in this instance, I want to take this form and I want to build a design system from it. So there are tools that do this. That can extract code and build design systems from graphical canvases. And so I can do that. And it updated the code and created some styles. And it also actually created a design system that works in runtime here. So this is a real app that got built that is also living in Figma. So there's a link up here. I won't go there, but trust me. So we can say stable. If I click that link, it would go to Figma and show me the full blown design system that was built. And a design system, for those that don't know, is composed of components and tokens and variables and styles that all are used as a basis for building software from. So code and design together, really work well when there's a design system and there's a code base that understands it. Now, move back and forth, you throw something over here and you say, okay, I want to build an orange button. And I've added a company field and an orange button. The code is updated. The design is updated. This is awesome. Could I go back? Maybe. But I have a button up here called show drift. So show drift is ReWeaver AI working right now. And this is real ReWeaver code for the first time introduced to the public ever. So I'm going to go back here. And if I click show drift, I'll see a list of issues that got generated from both the code and the design at the same time. There are across several different dimensions that you can see here. Design quality, code quality, performance, design tokens, et cetera. One of the ones of note that I find really important from my perspective is that at Microsoft, I worked on accessibility. And I learned a lot about what it means to build an accessible software system. And I want to be honest with all of you, I was very frustrated when I first saw LLMs come out and they generated code that was inaccessible. Period. Out of the box. I thought, what, models weren't trained on accessibility? And I was reminded 20 years ago when engineers needed to be trained on accessibility. So here we are again now training LLMs instead of engineers on accessibility. So found issues. Here's an issue where has no ARIA live region. So it won't be announced by screen reader. A blind user using this won't get an announcement about this element. So ReWeaver found that. And ReWeaver says it can fix it. And ReWeaver fixed it. Now the red went away, but there's also a blue issue here as well. So ReWeaver stacks up issues and scans the code and scans the design. And produces guardrails, but also a way to fix the code and make it better. So I did that across multiple dimensions, with the intention of seeing if anybody had solved the round trip problem. And it didn't go well. I never got really the full round trip. I really tried, hopefully this slide tells you, I tried five different tool setups. Trying to do code design code round trip, both directions, bi-directional. Lots of lossy issues. Bindings were lost. Design change survived, but code didn't. I'm not going to say we won't get there. But even if we do get there, and we're able to do this, I wonder if we'll get fully there. And maybe we need tools like ReWeaver. We do need tools like ReWeaver to help us understand the drift. So that whole experience for me really highlighted something from my past. I had built a lot of software development tools. Designed and built software development tools. And developer tools in their nature are deterministic. You write code, you compile it, you get an AST. Every time you run that code, you'll get the same result. When you put AI in the middle of that, or the front of that, or the end of that, you're not going to necessarily get the same outcomes. Now, there are tools that'll help you understand, ReWeaver being one of them, that there's a mismatch. There's drift there. And we need to be aware of drift. 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. The AI is still there. So I ran another experiment. 12 iterations on a code base with complex enough UI to it. And I did one where it was just pure AI led. Just LLM all the way. And it degraded a little bit. But it started at 30% quality. 30% fidelity. 30% true pixel perfection. And then I put it on top of deterministic guardrails. Where we found the issues. We fixed the issues. You can't get to 100. Because that 10% is human judgment. Human decision making. So the human is still there in this equation. So what is it today? Today, I would call it we're locked into AI. And that's okay. We'll go there. We'll embrace that. But we're locked into AI for design to code. We're locked into AI for code to design. Looping. Chatbots. What we call span the chain workflows. Where you're jumping across tools. And there's always token costs to be aware of, of course. So in this world, the agents are in control and the humans in the loop. I'd like to pose something else. Before I do, there are three blind spots we need to be aware of. One is the model itself. It's going to. You can ask the questions. It'll give you answers. But it's non-deterministic. It's probabilistic. There will be drift in the moment. When you're writing code, drift will surface. But drift over time is the pain that you'll be experiencing for the next six months. Because drift over time is the new tech debt. And it's going to pile itself gloriously over your code base. So here's where we think it isn't. Meaning what it could be. What it should be. Fully bi-directional. Edit both ways. Lossless. All surfaces preserved. So if you go from code to design and design to code, nothing's breaking weirdly for you. Provenance is carried. Where did this start from? What line of code wrote this button? I see this button in Figma. I want to change it. I need to change that code. Or somebody needs to change that code. We have to control the drift. It's deterministic reconciliation at its core. So with deterministic guardrails, and I'm happy to talk after if folks are interested in what I mean by that. Accept or refuse. So if they know there's a fix, they will fix it. If they don't know there's a fix, they will tell you there's an issue. But you need to fix it. And with ReWeaver, there's zero extra token costs. So we're fully local LLM. But if you want to open up Claude or whatever and connect to us, you can. But at its core, and our core principle is the human is in control. Always. In control of cost. In control of code. In control of design. Because that's what we've been doing for decades. We've been in control. We don't need to lose control. And I'm not saying loop isn't good. But human in control is, I think, a little more aspirational. Because at the end of the day, what you need is actually what you get. I call it What You Need Is What You Get. So what are we building? At its core, what we're building are nine dimensions of deterministic guardrails. Inside of this is a lot of stuff. But these are our top level software quality, software production readiness dimensions. Design consistency being core, of course. And when you have a design system and the code isn't consistent with it and vice versa, we need to fix that. So there's a lot of design consistency work that's going into the foundation. Accessibility is its own dimension. Maybe selfish of me. But I think it's core. AI code generation governance is another really critical piece because the code is just flying through the system. And we need to govern that code. Now we're not going to change the code. ReWeaver actually doesn't write code. You write code. ReWeaver will do what you want it to do. So if you say apply the fix, it'll write the code for you. You can see the code being written. You can say never mind undo. You can ignore it. So at the end of the day, catch what drifts in a closed loop before anything merges. That's the goal. You can try it out with your own code today, right now. You can go to reweaver AI slash playground. And we built a similar harness to what I built there. Where you can put your AI generated code on the left. You can scan it and get your results for that code. There's also a fun little challenge on that page. If you can get AI to generate code that gives you a score lower than .30 PDR, which is production drift ratio, we'll get you a frontline seat on the beta. But you'll also get yourself showcased at the bottom on the crawl. So give it a shot. Take a look. Meanwhile, I'm looking for people to join our beta. We're going to basically blast out mid-July, hopefully. So we'd love for you to join if you're interested to make the product better, to sanity check us. Basically, that's it. And you can also reach me online or outside. Happy to talk more. Thank you.
new on the scene, let's say. I want to share one thing with all of you that was really fascinating. So I plugged in my laptop and I realized I had to mirror, so I no longer had my speaker notes. So I went into Claude and I said, can you extract my speaker notes from my slide deck, please? And I had my speaker notes now. I love AI. The suspense was killing me. I was talking to Claude. Now who knows if it got it right. I don't know. Whatever. So I also realized that my title slide buried the lead. I shouldn't have put it up. But nonetheless, let's play with this. So yeah, my name is Jonathan.
I'm here to talk to you about the design code round trip that isn't. And I guess probably the best thing to do first is to explain what I think a design code round trip should be. A design code round trip is a full loop between design and engineering in both directions without any loss of fidelity and with a persistent provenance. So it knows exactly where everything came from. You know, that perfect dream world that we live in in a way of doing a design, where there is no drift in between the gaps of design and code. Today's tools, design is amazing. It's incredible. It's magic. It's, I asked for something. I get it.
It's clickable. It's interactive. It's amazing to me. But nobody really looks at the code anymore, it seems. And so I kind of want to go there. I want to go into that space. Whoops. Of course, I have to get my mouse to the right location. There we go. A little bit about me. Past 30 plus years, I've been building and designing coding tools, developer tools, IDEs at these companies. So I've spent a lot of time with, as a designer, I've spent a lot of time with design and engineering teams, trying to understand how do we do that handoff well. How do we hand off from design to code? How do we get what we wanted to be delivered to the customer? It was never a perfect science.
We never got it. We never found that magic sauce that just made everything come together, where intent matched the outcome. But I developed techniques. I negotiated with engineers. I brought them out for drinks. I made them my friends. I got things delivered to customers. But the loop was never closed. And it's because our outcomes diverged. Engineering had one set of requirements, technical constraints, design had a vision for the future, a new rebranding, whatever. So this has existed, you know, dare I say, for decades.
And then along comes AI. And LLM and prompting ourselves into a fully running application. In a sense, now we have one intelligence that understands design intent. And the same intelligence can write code. So I thought to myself, oh my god, I think we might be able to close this loop. At the speed of inference, we could close this loop. And so I was curious. I'm curious by nature. So I went all in. That's my GitHub before Vibe coding happened. On the left. On my left. On your whatever. Then after. So I think everybody probably gets a sense of what my life was like from April 2025. And if you want to scroll till today, it's even more so.
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.
Then there was a bill. But at the time it was the $20 deal and I kind of, you know, monitored. But every now and again I'd pay for a little bit more. Get another hit. And this was my life, Vibe coding. From that point in April until today. I'm trying to figure out can I go from design to code? Can I go from code to design? Can I build a tool to go from design to code and code to design? A full round trip without any loss of fidelity. That pixel perfect dream that we have. I remember vividly one day I was, you know, just hammering away at the keyboard. Just vibing my way. I was really feeling the vibe. And this wall of text was coming by and I was completely ignoring it.
And code was being written. Just watching that come by. And I remember seeing a statement that was an inner HTML statement. And I remember from way back when that inner HTML was a security vulnerability that people can actually inject into inner HTML. And I stopped it. And I said, wait a minute, wait a minute. To my LLM. Wait a minute. What did you just do? And it explained to me what it did. And it was very proud of itself. And I said, revert that. Do this instead. Blah, blah. And I got into this mode of like, oh, maybe I need to steer this thing a little bit better. Maybe I can't just go blindly in. Maybe I need to look at the code now.
And I've looked at a lot of code in my life. So I went ahead and went in and looked at the code. And I, whoops, I'm sorry. Clicked two ahead. And I found, I found issues. And so I went a little bit deeper when the industry started to tell me that they had solved the round trip. That you could go a true round trip workflow. You could round trip between code and Canvas. I think folks in the room might remember back in February, no slam on Anthropic or Figma. There was this demo that showed going from cloud code into Figma. And it was magic. It was incredible.
I couldn't believe you could build a Figma artboard from a prompt in cloud code. And then I had to go deeper. And I had to look deeper. In the same way that I looked at vibe coding. Like, is this real? Is the hype real? So I went deeper. And then more announcements were made. All the way up until last week. When Figma config announced that code is now material. Does that mean there is no even handoff that exists anymore? So I'm monitoring. Trying to keep up. Things are happening at warp speed. But they said the round trip was solved. And I started messing around and realized it wasn't.
And so I want to share with all of you a harness that I built. Whoops. Oh, wait a minute. Localhost. Where are you, Localhost? Come back to me, Localhost. Okay. I don't know what just happened there. And now I'm afraid to restart this. Okay. I think we're okay. I created this harness. And what this harness is, is on... I'm going to say left. I hope everybody... Is that your left? It is your left. Okay, good. On your left is code that was generated by AI. This is all real, what you're seeing here. Generated by AI. And on your right is a design. Be it a canvas that I created in Figma. Be it something I created in Sketch.
It's not really relevant what the sources are here. But the reality is I'm trying to illustrate a round trip. And so a round trip, you know, starts with code or starts with design. And it has a prompt associated with it. So some LLM I call off and I say, in this instance, I want to take this form and I want to build a design system from it. So there are tools that do this. That can extract code and build design systems from graphical canvases. And so I can do that. And it updated the code and created some styles. And it also actually created a design system that works in runtime here.
So this is like a real app that got built that is also living in Figma. So there's a link up here. I won't go there, but trust me. So we can say stable. If I click that link, it would go to Figma and show me the full blown design system that was built. And a design system, for those that don't know, is composed of components and tokens and variables and styles that all are used as a basis for building software from. So code and design together, you know, really work well when there's a design system and there's a code base that understands it.
Now, move back and forth, you throw something over here and you say, okay, I want to build an orange button. And I've added a company field and an orange button. The code is updated. The design is updated. This is awesome. Could I go back? Maybe. But I have a button up here called show drift. So show drift is reweaver AI working right now. And this is real reweaver code for the first time introduced to the public ever. So I'm going to go back here. And if I click show drift, I'll see a list of issues that got generated from both the code and the design at the same time.
There are across several different dimensions that you can see here. Design quality, code quality, performance, design tokens, et cetera. One of the ones of note that I find really important from my perspective is that at Microsoft, I worked on accessibility. And I learned a lot about what it means to build an accessible software system. And I want to be honest with all of you, I was very frustrated when I first saw LLMs come out and they generated code that was inaccessible. Period. Out of the box. I thought, what, models weren't trained on accessibility? And I was reminded 20 years ago when, you know, engineers needed to be trained on accessibility.
So here we are again now training LLMs instead of engineers on accessibility. So found issues. Here's an issue where has no ARIA live region. So it won't be announced by screen reader. A blind user using this won't get an announcement about this element. So reweaver found that. And reweaver says it can fix it. And reweaver fixed it. Now the red went away, but there's also a blue issue here as well. So reweaver stacks up issues and, you know, basically scans the code and scans the design. And produces guardrails to a sense, but also a way to fix the code and make it better.
So I did that across multiple dimensions, you know, with the intention of seeing if anybody had solved the drown, the round trip problem. And it didn't go well. I never got really the full round trip. I really tried, hopefully this slide tells you, I tried five different tool setups. Trying to do code design code round trip, both directions, bi-directional. Lots of lossy issues. You know, bindings were lost. Design change survived, but code didn't. I'm not gonna say we're not gonna get there. But even if we do get there, and we're able to do this, I wonder if we'll get fully there.
And maybe we need tools like reweaver. I shouldn't say maybe. We do need tools like reweaver to help us understand the drift. So that whole experience for me really highlighted something from my past. I had built a lot of software development tools. Designed and built software development tools. And developer tools in their nature are deterministic. You write code, you compile it, you get an AST. Every time you run that code, you'll get the same result. When you put AI in the middle of that, or the front of that, or the end of that, you're not gonna necessarily get the same outcomes. Now, there are tools that'll help you understand,
reweaver being one of them, that there's a mismatch. There's drift there. And we need to be aware of drift. 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. The AI is still there. So I ran another experiment. 12 iterations on a code base with complex enough UI to it. And I did one where it was just pure AI led. Just LLM all the way. And it degraded a little bit. But it started at 30% quality. 30% fidelity. 30% true pixel perfection. And then I put it on top of deterministic guardrails. Where we found the issues. We fixed the issues.
You can't get to 100. Because that 10% is human judgment. Human decision making. So the human is still there in this equation. So what is it today? Today, I would call it we're locked into AI. And that's okay. We'll go there. We'll embrace that. But we're locked into AI for design to code. We're locked into AI for code to design. Looping. Chatbots. What we call span the chain workflows. Where you're jumping across tools. And there's always token costs to be aware of, of course. So in this world, the agents are in control and the humans in the loop. I'd like to pose something else. Before I do, there are three blind spots we need to be aware of.
One is the model itself. It's gonna... You can ask the questions. It'll give you answers. But it's non-deterministic. It's probabilistic. There will be drift in the moment. When you're writing code, drift will surface. But drift over time is the pain that you'll be experiencing for the next six months. Because drift over time is the new tech debt. And it's gonna pile itself gloriously over your code base.
So here's where we think it isn't. Meaning what it could be. What it should be. Fully bi-directional. Edit both ways. Lossless. All surfaces preserved. So if you go from code to design and design to code, nothing's breaking weirdly for you. Provenance is carried. Where did this start from? What line of code wrote this button? I see this button in Figma. I want to change it. I need to change that code. Or somebody needs to change that code. We have to control the drift. It's deterministic reconciliation at its core. So with deterministic guardrails, and I'm happy to talk after if folks are interested in what I mean by that. Accept or refuse.
So if they know there's a fix, they will fix it. If they don't know there's a fix, they will tell you there's an issue. But you need to fix it. And with Ruby Weaver, there's zero extra token costs. So we're fully local LLM. But if you want to open up Claude or whatever and connect to us, you can. But at its core, and our core principle is the human is in control. Always. In control of cost. In control of code. In control of design. Because that's what we've been doing for decades. We've been in control. We don't need to lose control. And I'm not saying loop isn't good.
But human in control is, I think, a little more aspirational. Because at the end of the day, what you need is actually what you get. I call it Winnie Wig. Can I use that? Winnie Wig? So what are we building? At its core, what we're building are nine dimensions of deterministic guardrails. Inside of this is a lot of stuff. But these are our top level software quality, software production readiness dimensions. Design consistency being core, of course. And when you have a design system and the code isn't consistent with it and vice versa, we need to fix that. So there's a lot of design consistency work that's going into the foundation. Accessibility is its own dimension.
Maybe selfish of me. But I think it's core. AI code generation too. Or AI code, sorry, governance. AI code generation governance is another really critical piece because the code is just flying through the system. And we need to govern that code. Now we're not going to change the code. Reweaver actually doesn't write code. You write code. Reweaver will do what you want it to do. So if you say apply the fix, it'll write the code for you. You can see the code being written. You can say never mind undo. You can ignore it. So at the end of the day, catch what drifts in a closed loop before anything merges. That's the goal.
You can try it out with your own code today, right now. You can go to reweaver AI slash playground. And we built kind of a similar harness to what I built there. Where you can put your AI generated code on the left, on the left. You can scan it and get your results for that code. There's also a fun little challenge on that page. If you can get AI to generate code that gives you a score lower than .30 PDR, which is production drift ratio, we'll get you a frontline seat on the beta. But you'll also get yourself showcased at the bottom on the crawl. So give it a shot. Take a look.
Meanwhile, I'm looking for people to join our beta. We're gonna basically blast out mid-July, hopefully. So we'd love for you to join if you're interested to make the product better, to sanity check us. Basically, that's it. And you can also reach me online or outside. Happy to talk more. Thank you.