The Design-Code Roundtrip That Isn't — Jonathan Gordon, ReWeaver AI

AI Engineer · 18 min · 247 sentences · from YouTube's caption track

Each timecode opens YouTube at the start of that sentence. Line anchors (#s42) are the cue ids in the WebVTT, and every line carries its start and end seconds. All transcripts has every talk, and the whole corpus as one file.

00:01[music]
00:12Hello everyone.
00:14I'm Jonathan Gordon.
00:15I'm a founder of Reweaver AAI, a new company, you know, on the scene, let's say.
00:20I want to share one thing with all of you that was really fascinating.
00:23So, I I plugged in my laptop and I realized I had to mirror.
00:28So, I no longer have my speaker notes.
00:30So, I went into Claude and I said, "Can you extract my speaker notes from my slide deck, please?"
00:35And I had my speaker notes now.
00:38I love AI.
00:41The suspense was killing me.
00:42I was talking to Claude now.
00:45Who knows if it got it right.
00:46I don't know.
00:46Whatever.
00:47Um, so I also realized that my title slide buried the lead.
00:51I shouldn't have put it up.
00:53Um, but nonetheless, let's play with this.
00:56So, uh, yeah, my name is Jonathan.
00:58Um, I'm here to talk to you about the design code roundtrip that isn't.
01:04And I guess probably the best thing to do first is to explain what I think a design code roundtrip should be.
01:12Um the design code roundtrip is a full loop between design and engineering in both directions without any loss of fidelity and with a persistent provenence.
01:28So it knows exactly where everything came from.
01:30You know that perfect dream world that we live in where there is no drift in between the gaps of design and code.
01:42Um, today's tools, design is amazing.
01:45It's incredible.
01:46It's magic.
01:46It's I ask for something, I get it.
01:48It's clickable.
01:49It's interactive.
01:50It's amazing to me.
01:52But nobody really looks at the code anymore, it seems.
01:56And so, I kind of want to go there.
01:57I want to go into that space.
02:00Whoops.
02:01Of course, I have to get my mouse to the right location.
02:04There we go.
02:05Um, a little bit about me.
02:07past 30 plus years um I've been building and designing coding tools developer tools idees at these companies um so I've spent a lot of time with as a designer I've spent a lot of time with design and engineering teams
02:24trying 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
02:35um it was never a perfect science We never got it.
02:38We never found that magic sauce that just made everything come together where intent matched the outcome.
02:47Um, but I developed techniques.
02:50I negotiated with engineers.
02:52I brought them out for drinks.
02:53I made them my friends.
02:54Um, I got things delivered to customers.
02:58But the the loop was never closed.
03:01Um, and it's because our outcomes diverged.
03:04engineering had one set of requirements, technical constraints, design had a vision for the future, a new rebranding, whatever.
03:11So, this has existed, you know, dare I say, for decades.
03:16Um, then along comes AI and LLM and prompting ourself into a fully running application.
03:26In a sense, now we have one intelligence that understands design intent and the same intel in intelligence can write code.
03:37So I thought to myself, oh my god, I think we might be able to close this loop.
03:41At the speed of inference, we could close this loop.
03:45And so I was curious.
03:47Um, I'm curious by nature.
03:50So I went all in.
03:52That's my GitHub before vibe coding happened on the left on on my left on your whatever.
04:00Um then after so I think everybody probably gets a sense of what my life was like from April 2025.
04:08And if you want to scroll till today it's it's even more so.
04:12Um, 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.
04:28Then there was a bill.
04:29Um, 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.
04:39Um, and this was my life vibe coding from that point in April until today.
04:48Um, I'm trying to figure out can I go from design to code?
04:52Can I go from code to design?
04:53Can I build a tool to go from design to code and code to design a full round trip without any loss of fidelity?
05:01That pixel perfect dream that we have.
05:04Um, I remember vividly uh one day I was, you know, just hammering away at the keyboard, just vibing my way.
05:13I was really feeling the vibe.
05:15And, uh, this wall of text was coming by and I was completely ignoring it and code was being written, just watching that come by.
05:24And I remember seeing a statement that was an inner HTML statement.
05:29And I remember from way back when that inter HTML was a security vulnerability that people can actually inject into in HTML and I stopped it.
05:39I said, "Wait a minute, wait a minute."
05:41to my LM, "Wait a minute, what did you just do?"
05:45And it explained to me what it did and it was very proud of itself.
05:47And and I said, "Revert that.
05:49Do this instead."
05:50Blah blah.
05:51And I got into this mode of like, "Oh, maybe I need to steer this thing a little bit better.
05:55Maybe I can't just go blindly in.
05:57Maybe I need to look at the code now.
06:00And I've looked at a lot of code in my life.
06:02So I went ahead and went in and looked at the code and I Whoops.
06:06I'm sorry.
06:07I clicked too ahead and I found I found issues.
06:11And 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 roundtrip workflow.
06:23You could roundtrip between code and canvas.
06:26I 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.
06:37And it was magic.
06:38It was incredible.
06:39I couldn't believe you could build a Figma artboard from a prompt in Cloud Code.
06:45And then I had to go deeper and I had to look deeper in the same way that I looked at vibe coding.
06:49Like, is this real?
06:50Is the hype real?
06:51So 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.
07:00Does that mean there is no even handoff that exists anymore?
07:05Um so I'm monitoring trying to keep up.
07:08Things are happening at warp speed.
07:11But they said the roundtrip was solved and I started messing around and realized it wasn't.
07:17And so I want to share with all of you a harness that I built.
07:23Whoops.
07:24Oh, wait a minute.
07:25Local host, where are you?
07:27Local host, come back to me, local host.
07:31Okay.
07:33I don't know what I don't know what just happened there.
07:34And now I'm afraid to restart this.
07:36Um, okay.
07:37I think we're I think we're okay.
07:39Um, I created this harness.
07:41And what this harness is is on.
07:44I'm going to say left.
07:45I hope everybody is that your left.
07:47It is your left.
07:48Okay, good.
07:48[laughter]
07:50On your left is code that was generated by AI.
07:52This is this is all real what you're seeing here.
07:55Generated by AI and on your right is a design.
08:01Be it a canvas that that I created in Figma, be it something I created in Sketch.
08:06It's not really relevant what the sources are here, but the reality is I'm trying to illustrate a round trip.
08:13And so a round trip you know starts with code or starts with design and it has a prompt associated with it.
08:19So some 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.
08:27So there there are tools that do this that can extract code and build design systems from graphical canvases.
08:33And so I can do that.
08:36And it updated the code and created some styles.
08:39And it also actually created um a design system that works in runtime here.
08:44So this is like a a real app that got built that is also living in Figma.
08:49So there's a link up here.
08:51I won't go there, but trust me, so we can say stable.
08:54If I click that link, it would go to Figma and show me the full-blown design system that was built.
08:58And 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.
09:10So code and design together, you know, really work well when there's a design system and there's a code base that understands it.
09:17Now move back and forth.
09:19You throw something over here and you say, "Okay, I want to build an orange button."
09:23And I've added a company field and an orange button.
09:26The code is updated.
09:27The design is updated.
09:28This is awesome.
09:29Could I go back?
09:30Maybe.
09:31Um, but I have a button up here called show drift.
09:35So, show drift is rewaver AI working right now.
09:40And this is real rewaver code for the first time introduced to the public ever.
09:45And 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.
09:55There are across several different dimensions that you can see here.
09:58Design quality, code quality, performance, design tokens, etc. One of the ones of note that I find really important from my perspective is at Microsoft I worked on accessibility and I learned a lot about what it means to build an accessible software system.
10:15And I I want to be honest with all of you.
10:17I was very frustrated when I first saw LMS come out and they generated code that was inaccessible period out of the box.
10:23I thought what models weren't trained on accessibility.
10:27Um, and I was reminded 20 years ago when you know engineers needed to be trained on accessibility.
10:33So here we are again now training LLMs instead of engineers on accessibility.
10:39So found issues.
10:40Um, here's an issue where has no Arya live region.
10:46So it won't be announced by screen reader.
10:48A blind user using this won't get an announcement about this element.
10:52So Rewaver found that and Rewaver says it can fix it and Rewaver fixed it.
10:58Now the red went away, but there's also a blue issue here as well.
11:01Um so Rewaver stacks up issues and you know basically scans scans the code and scans the design and produces u guard rails to a sense but also a way to fix the code and make it better.
11:16So I did that across multiple dimensions um you know with the intention of seeing if anybody had solved the drown the the roundtrip problem and it didn't go well.
11:28Uh I never got really the full round trip.
11:31So I really tried hopefully this slide tells you I tried five different tool setups trying to do code design code roundtrip both directions birectional lots of lossy issues uh
11:44you know bindings were lost um design change survived but code didn't I'm not going to say we're not going to get there um but even if we do get there and we're able to do this
11:57I wonder if we'll get fully there And maybe we need tools like Reweaver.
12:02I shouldn't say maybe, we do need tools like Reweaver to help us understand the drift.
12:10So that whole experience for me really highlighted something from my past.
12:14Um I had I had built a lot of software development tools, designed and built software development tools and developer tools in their nature are deterministic.
12:24You write code, you compile it, you get an SA a it it'll every time you run that code, you'll get the same result.
12:31When you put AI in the middle of that or in the front of that or the end of that, you're not going to necessarily get the same outcomes.
12:38Now, there are tools that will help you understand, rewaver being one of them, that there's a mismatch.
12:43There's drift there and we need to be aware of drift.
12:47Drift lurks in the dark.
12:50You need to look at the code.
12:51You need to find the drift.
12:52You need to fix the drift.
12:54And you do that with deterministic guardrails around the AI.
12:57The AI is still there.
13:00So I ran another experiment, 12 iterations on a codebase with complex enough UI to it.
13:06And I did one where it was just pure AIE, just LLM all the way.
13:10And it degraded a little.
13:11It degraded a little bit, but it started at 30% quality, 30% fidelity, 30%, you know, true pixel perfection.
13:20And then I put it on top of deterministic guardrails where we found the issues, we fixed the issues.
13:27You can't get to a hundred because that 10% is human judgment, human decision-making.
13:34So the human is still there in this equation.
13:38Um, so what is it today?
13:42Uh, today I I would call it we're locked into AI.
13:45And that's okay.
13:46We'll go there.
13:47We'll embrace that.
13:48But we're locked into AI for design to code.
13:50We're locked into AI for code to design, looping, chat bots, what we call span the chain workflows where you jumping across tools.
13:59And there's always token costs to be aware of, of course.
14:02So in this world, the agents are in control and the humans in the loop.
14:06I'd like to propose something else.
14:08Before I do, there are three blind spots we need to be aware of.
14:11One is the model itself.
14:13It's going to you can ask it questions.
14:14It'll give you answers, but it's nondeterministic.
14:17It's probabilistic.
14:19There will be drift in the moment when you're writing code.
14:22Drift 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
14:36gloriously over your codebase.
14:39Um, we want to do something about it.
14:42So here's where we think it isn't meaning what it could be what it should be fully birectional 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
15:00provenence 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.
15:13We have to control the drift.
15:16It's deterministic reconciliation at its core.
15:19So with deterministic guardrails, and I'm happy to talk after if folks are interested in what I mean by that, accept or refuse.
15:28So if they know there's a fix, they will fix it.
15:32If they don't know there's a fix, they will tell you there's an issue, but you need to fix it.
15:38And with Ruby Weaver, there's zero extra token costs.
15:41So, we're fully local LLM, but if you want to open up Claude or whatever and connect to us, you can.
15:48But at its core, and our core principle is the human is in control always.
15:53In control of cost, in control of code, in control of design, because that's what we've been doing for decades.
16:01We've been in control.
16:02We don't need to lose control.
16:04And 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.
16:15I call it winnywig.
16:17Can I use that winny wig?
16:20So what are we building at its core?
16:22What we're building are nine dimensions of deterministic guardrails.
16:28Inside of this is a lot of stuff, but these are our top level um software quality, software production readiness dimensions.
16:37Design consistency being core.
16:38Of course, when you have a design system and the code isn't consistent with it and vice versa, we need to fix that.
16:44So, there's a lot of design consistency um work that's going into the the foundation.
16:50Accessibility is its own dimension.
16:53um maybe selfish of me but I think it's core uh 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
17:07and we need to govern that code now we're not going to change the code rewaver actually doesn't write code you write code reweaver will do what you want it to do so if you say apply the fix
17:19it'll write the code for you can see the code being written You can say never mind undo.
17:24You can ignore it.
17:26So at the end of the day, catch what drifts in a closed loop before anything merges.
17:30That's the goal.
17:33You can try it out with your own code today.
17:35Right now, you can go to reweaver AIPplayground 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.
17:47You can scan it and get your results for that code.
17:50There's also a fun little challenge on that page.
17:53If you can get AI to generate code that gives you a score lower than30 PDR, which is production drift ratio, will get you a frontline seat on the beta,
18:06but you'll also get yourself showcased at the bottom on the crawl.
18:09So, give it a shot.
18:11Take a look.
18:12Um, meanwhile, I'm looking for people to join our beta.
18:15We're going to basically blast out mid July hopefully.
18:20Um so would love for you to join if you're interested um to make the product better to sanity check us.
18:27Um basically that's it and you can also reach me online or outside happy to talk more.
18:34Thank you.