Steve Ruiz - Is the canvas the future for AI?

The more that I look at the landscape for tooling, the more convinced I am that the infinite canvas will play a pivotal role in how we interface with AI.

How do you do human plus AI plus multiple AIs and, and multiple humans collaborating in a single document in real time?

So I wanted to dig into why the canvas is such a powerful primitive and all of the hidden complexities that come with designing a great tool.

There are very few companies, products, anyone working on that problem, that we are in like massively uncharted territory, but also like some of the most ambitious stuff happening in software.

Welcome to Dive Club. My name is Ryd, and this is where designers never stop learning. This week's episode is with Steve Ruiz, who is the founder of TL Draw, where he spent over 3 years and $5 million building the perfect canvas that powers a lot of the startups that we've studied on this show. So we're going to do a deep dive into canvas UX and all of the things that it unlocks for the future of AI. But one of my favorite parts of this conversation is just hearing about Steve's journey, because it starts in a place that you might not expect.

So I studied fine art in university, undergrad, and then, uh, again for my master's. I can still paint and draw. I mean, it's something that I was really interested in, not just as a, like, a craft, but also a career and kind of an industry of, like, how does visual culture get made? How does art get made? What are the lives of artists like? How do I participate in that? But also how do I like support that? Kind of between university and grad school, like I did a lot of art writing. So I was like doing art reviews and journalism around different exhibitions at the time in Chicago. I did 2 years at University of Chicago, which is, it's a very kind of conceptual program. So it wasn't just about the craft. It was really, you know, very, very academic. During university, I met a lovely woman who is now my wife. She got a job at Cambridge. So I moved to the UK. We Got married and I got a studio and I was doing my art in England. You know, creative careers are really, really fragile. So after maybe 6 months of being in my studio or maybe a little longer than that, about a year of being in my studio, things aren't really moving the way that I want them to. And I'm not even sure if I wanted them to move the way that I wanted to anymore. When I was in Chicago, I was doing like, basically working for lawyers for part of the week and then working in my studio for the other part of the week. It was like a high-paying day job. So, so to speak, like to, to be doing legal research, basically something that would probably be being replaced by ChatGPT right now. You know, hey Steve, here's a legal question, go to the law library and figure it out. England has different laws, which is not, honestly was not something that I had thought about before I landed. I was like, oh yeah, I'll just be able to keep doing like, you know, this type of thing and having this like kind of analytical side that I use for 3 days a week. And then maybe like the creative side that I use for 5 days. I wasn't able to, to work. In that, that type of, type of role. So I was just, I had a lot of like excess analytical, uh, mental energy going on, right? Like those were always kind of two things that I, I had kept in balance and stuff. And so I'm like, you know what, I don't want to go back to school. I don't want to like retrain to, to do something that I wasn't super passionate about anyway. I'd never really tried to combine these, these different parts of myself. I'd always been very defensive about getting a creative job because I thought that that was something that I kept in my studio for work. Which is true. You only have so much kind of creative juice during the week. So anyway, I was like, you know what, maybe it's time. Like, let me close my studio and let me try and find a job that lets me take advantage of both things, both parts of myself. I guess the obvious place for that when we were in Cambridge was publishing and design within publishing. Learned how to use Adobe InDesign because I knew that people were going to use that at these publishing houses. Started going out for interviews and eventually got a Interview, got a job. Now I was working in Adobe InDesign all day and I was like, all right, cool. This is a good start. You know, I'm employed. Um, but let me, let me keep going into design. What kind of designer do I want to be? My head was in publishing because that's like, I'm like the kind of the opportunities that existed in Cambridge and I got really into ebooks actually. Ebooks are fantastic. They're like HTML and CSS, like cracking open ebooks and like figuring out how they work and how they were typeset, um, how they were packaged and distributed and all that stuff. So I got really into ebooks. Then I was like, you know what, this is all basically just web design anyway, right? Like we're, I'm not trying to teach you about CSS, I'm talking about like moving things around. Uh, and I had a little bit of like technical HTML like skill from just making like WordPress websites for other artists and myself like during college. So I had like a little bit of that, that technical, uh, knowledge. This was like 2016 at the, at the time. Some really interesting things were happening. The role of the designer within web design, like, had emerged that really wasn't there like 10 years before. It was much more kind of hybrid, at least as I understood it. And that there was this kind of like product design thing that was happening. The really good designers were, where they were building stuff that actually worked, you know, this was when like Uber and Airbnb were starting to leverage prototyping tools like Origami was out, Framer, very early Framer versions were out. you know, with the IDE after the JavaScript library. And I was like, oh, okay, this is, this is what's really specialized. 'Cause I knew that I needed some sort of specialization, but I also was like, I don't want to get into this in a way that is boring or in a way that is like dead end. Like I would really want to get into this. That turned out to be the, the, the kind of the, my wedge or my, my way in was through prototyping. So it was mostly through Framer Classic or what became Framer Classic, which now is, doesn't even exist. So it was, it was through early versions of Framer before it was a website design tool. It was like a prototyping tool with code, like code on the left, uh, um, screen on the right. It was like a little IDE. I was using CoffeeScript and it was trying to be as simple as possible for designers to say like, here's my Sketch file, let me label my layers. And then now I can say like, okay, layer this button.

It's a trend that I've noticed too, where a lot of the designers that I look up to, they have these origin stories that are tied to either Framer Classic or Origami. And yeah. If you got in early with those tools, it really was a differentiating factor. And also it, I mean, you had to have an appetite for complexity back then to be able to learn that, which I think says a lot about the level of like agency and determination that you even have as a designer.

Highly influential. And I hope that there's a parallel today for people who are kind of coming into the industry. But that, yeah, that was, that became my thing. I was like, all right, this is going to be the thing that I'm going to get really good at because no one's good at this. Everyone seems to be into it, but no one can do it. This typesetting job that I have, I don't really like, but you know, I think my contract is up in 6 months. Let me try and find a full-time job in 6 months doing this thing that I find interesting. I'd started contracting after like 3 months on the side and then yeah, got my first full-time job over the summer and then, uh, eventually got a normal startup job, I guess, within 6 months.

Real quick message and then we can jump back into it. I saw a scroll-stopping tweet the other day. The creators of Tailwind are working directly on paper to train the output to be perfect. They even invested in the company.

So just think about the possibilities for a second.

In the future, you could design something in Paper and then just right-click and copy the perfect tailwind as if the creators themselves wrote it by hand. Or maybe you take an existing code component and import it into Paper to make edits directly on the canvas. I mean, this is going to totally change how we design and deliver UIs for the web. And it's just another reason why I'm betting big on Paper as the next great design tool. You can try it out today. Just head to dive.club/paper. If you're like me, then you know adding motion to your designs is the easiest way to make them feel premium. The thing is, I'm not a motion designer, but that's why Jitter's new AI brainstorm feature is a game changer. I just drop in my design and then get instant motion ideas that I can tweak, refine, and make my own. It's seriously so easy to animate your work with Jitter. I cannot recommend it enough. Just head to dive.club/jitter to try it out today.

Okay, now onto the episode. I wanna zoom ahead of the story a little bit because you have this art background, you make the determined effort to learn prototyping, break in that way, and it didn't take you that long to start working on a canvas SDK. So how the heck did you get to the point where you're like, I'm gonna start a canvas company?

All right. So That's the wild thing is that like my first job in tech was 2017. I started working on TealDraw in 2021, right? So I like learned to code in 2017 and then I was working on some pretty gnarly dev tool-y type stuff like within 4 years of that. Then I had the startup, you know, within 5. So it was a, it was, it was really, really fast career, so to speak. Because I was kind of in this world of, of being the designer who prototypes. Like that, that was my role. That was my role when I worked in an agency. It was my role when I worked in product. And eventually I ended up working for Framer doing, uh, kind of education and content for designers, like trying to make more Steves in a way. Uh, throughout all those roles, like I was just really, really aggressively learning and, and also like speaking a lot about it and writing a lot about it and like teaching, running workshops and things like that. So my own knowledge just expanded really quickly, especially once I was trying to like teach other people. I was like, okay, now I gotta really know how React works. I really have to know how this other thing works. I think if you're like a junior developer, you kind of get like kind of slow ball, like rolled into the industry a little bit just by saying, all right, here's a small ticket or here's something easy that you can do or whatever. And you don't have as much of an opportunity for like really ambitious projects. 'Cause all of the prototyping that I was doing was just really ambitious, short projects that I would get very quick feedback on and then, then kind of move on to the next one. You know, if I, if I cast myself back to, uh, 2003, I was working, uh, at a pizza place, uh, in Chicago and my job was to cook the pizzas and cut them, cut the pizzas, right? And put them in a box and put the box ready. In Chicago, you can cut a piece, uh, a pizza square cut, right? I don't know. Do they do that where you're from?

I grew up in St. Louis. Square cut was everything.

Same here, right? But sometimes, you know, these uncultured people would order pie cut pizzas, and so we'd have to do that. It was so easy to get it wrong because like you just get used to cutting it one way or another. But it was like a special request. Hey, pie cut, you know? Like, oh God, okay. Well, we got this request once for a pie cut pizza with 11 slices. Could you cut it into 11 equal slices? I'm like looking at this pizza and I'm like, I don't know. I don't know how to do this.

And get your protractor out.

Yeah. I called someone else, you know, and they come over and they're like, I don't know how to do this either. And suddenly we have like all the cooks, the whole office was like sitting around these pizzas being like, wait, would you know? No, it can't be that. It has to be equal. And we just, uh, you know, 3 pizzas later, we managed to, uh, to get this thing just by luck. And then I was like, I was always like, yeah, how would you have done that? Like, there must've been a way to, to, to cut it. Years later, I asked this question on, uh, Quora. When Quora was out, like in 2008 or something. I was like, hey, here's the thing that happened to me. How, you know, you guys are all mathy, you know, people on Quora. It was early Quora when it was good. Uh, how would you have done this? And there, it became one of the most popular questions on Quora.

No way.

That's so cool. Yeah, yeah. And so, so that question just sort of like always lived in my head of these like little, little like visual tricks, uh, kind of visual computation things. But it wasn't until much later when I could kind of code that I kind of found my way back to this stuff. How do shadows work? Or how do like splines work? Or these other things. In the open source work, that, that's the type of thing that I started working on. Since it was all visual, I was posting on Twitter and, uh, and people were liking it. Like, oh, here's how to do, uh, isometric stuff, or here's how to do splines, or here's all this. This is mostly happening kind of by now, kind of during COVID I'm doing prototyping for Play. It was this great team, great product. I'd also worked on a project in the summer where it was like 2020, so COVID, um, between Framer and Play, I knew I had a couple of months before I would find my, my next job after, um, after Framer ended. I'd become kind of also obsessed with state machines and, and state chart. What I mean by state machines is there's only so many states that a user can be in, right? They can be logged out, they can be logged in. For each one of those states, they have these certain events that can happen while they're in that state. And then you know, at the end you have a list of here are all the states, here are all the events in my system that can happen. So it's this like recursive way of describing where are you in the application and like what can happen. As soon as I learned about it, I'm like, oh, this would be so good for designers and so good for talking about how a thing works, right? Kind of a cheesy Steve Jobs quote of like, it's not just what it looks like, it's like also how it works, right? It's like, that sounds great, but I don't really have any tools for designing how it works. And so I had built an app called State Designer, and while I was working on that, I needed arrows and I needed these arrows to like point to what was gonna be next. You know, like if I'm clicking on the sign-in events and I want it to like go to the, the next thing in this graph. But the thing was that the graph needed also to be like responsive. Thinking back to it, no, it didn't need to be responsive, but either way, but you said that and I was like, wait, really? I just, I just felt like it should be. And, and so I didn't know where the boxes were gonna be. It wasn't like I could just draw an arrow once and just reuse that arrow because, you know, things might be in a different place. I didn't know ahead of time where the things were gonna be. And so I needed like come up with a way to draw an arrow between these two boxes. You could do it in a like really naive way, which, you know, looked terrible. It's just a straight arrow. And I'm like, but I, I gotta be able to do better than that, you know? Like if you have a box over here and you have a box over here, like what's a good, you know, I would just draw it on the paper, like right box here, box here. What would that arrow look like? And then like, you know, I was like, okay, what if this box was bigger and this box was smaller? Like what would that arrow look like? Or what if the two arrows were, you know, horizontally aligned? Like what would that arrow look like? What, okay, what if this one's actually inside of this one? What would that arrow look like? And so I'm just drawing, you know, hundreds of boxes and arrows and combinations of different sizes and placements and all that stuff. And then I'm, I'm looking at, I'm like, I, I, I sense that there's a sort of pattern here. Like, let me try and formalize it. Let me try and code this up. And it became the most complicated thing that I'd ever tried to do with code, which was just try and just draw these perfect looking arrows. The amount of edge cases and like, oh my God, but no, that's like, the intersection would be lost because the thing's inside of it, or it's too close, or when do I decide that something's too close and all this stuff. And it was, turned out to be, uh, highly subjective. Number one, at the end, I was just like, well, there is no answer to this. It's just like, what do I think is a good looking arrow? And then I'm like, well, I know what I'm— I've been painting and drawing for like, you know, 20 years. I go, I know what a good looking arrow looks like. Of course, if anyone should notice this stuff, then it should be me. And I was posting about this on Twitter and like some of those posts on Twitter, even though I had a fairly small audience, like we're getting a lot of interest and people were like following along. It was like, yo, check out this guy. He's losing his mind. Over, over arrows, you know, get a load of this. I would have to be making these debugging tools and it would look like a kind of like a spring system, you know, the collapsing and expanding as the arrows would bend around the different sides and pick the which route it was gonna take and all this stuff. I ended up with something that worked pretty well. It went into my State Designer app, you know, but I also open sourced it and shared it as a, a library called Perfect Arrows. And that, that got pretty popular as well because it was a problem that seemed like it should have an answer to, but like, for an open source project, it was very unusual because there was no answer. It was like a, it was kinda like a design answer, you know, but expressed through code. This was Steve Ruiz's take, and by this point, educated take on, here are all the parameters of the problem of you wanna draw an arrow between two things. Here is my best shot and making it look good in all of the circumstances. And people really liked that. And it seemed like something kind of unusual and kind of new for a, a developer or programmer to be trying to tackle that type of problem. 'Cause a lot of the open source that you, you see, it's a very well-known problem. You know, I want to be able to sort a very long list or whatever. I want to convert between this data type to this other data type. You kind of knew the parameters of the problem. Now it was just about implementing that. How do you implement that in a way that is like, really reusable, really like, you know, lightweight and also really fast and performant with the idea that like on a good day, if you did this yourself, you would end up with this, the same code. Or if you had a lot of time to focus on this thing, you'd end up with the same code, but you don't have to because it's, it's an open source thing. It's just shared, right? And you're kinda like giving back to the developer community. But for, for me, I guess it was like, yeah, here's this thing where like, you probably wouldn't obsess over arrows, but if you did obsess over arrows, like, and, and you had good tastes in the era. I was like, this is probably what you would end up with. But that's already just so far from like the normal way that open source is done. And I liked that. I was like, oh, this is, this is great. And also, hey, remember that job that I had at Framer where I was trying to make content that people really liked for Framer, which was my job at the time, you know, the design educator. I was trying to make content about the Framer product, but technical content that appealed to designers, you know, because at the time Framer was much more technical and much more codey. And I, and I couldn't figure it out, like tutorial videos. No one, no one would watch the tutorial videos and the the blog post, no one would read the blog post. No one, no one actually really wanted to learn React. I think that was part of it.

There's a reason for that.

I was still, I was like, why couldn't I just make like good content? Like I know that audience exists. I know that when I went to Framer meetups in London, there'd be like 200 people there. And I'd say, how many people have used Framer before? And like 4 people would raise their hands. You know, like there was just an interest in this type of content and a very aspirational interest as well. How do you make content that people with those types of interests would care about? And, and it felt like this Arrow stuff was like getting closer. It felt like people didn't have to read any code. They could kind of see the, the complexity of the problem and see the, uh, decisions that I was making. And I could talk about that really easily in a short Twitter thread, you know, with like GIFs and like, that was great content. So I wanted to keep going. The next kind of little moment or vignette or like kind of chapter of that story road to, to TealDraw was Play was like a mobile app. I wanted to record some videos about Play, like how to use it. And I could, I could connect my phone to my computer and like put that into OBS so that it was like, you could see my screen. But what you couldn't see and what I had really relied on when I was making tutorial videos for, uh, for Framer was that on the desktop you have a cursor and like, you know, when you're sharing your screen, like the cursor kind of is your, your your hand, you kind of like are like, look over here, or like here, you know, you kind of like are guiding the eye of the viewer using this cursor. In this world, I couldn't do that because my computer was like connected to my phone and I didn't have a camera with my finger and I couldn't touch the screen because if I touched the screen, then that was actual inputs on the, the system, right? And I'm like, you know what I really wanna be able to do is just draw on top of my screen. Kind of like, uh, like an American football, you know, game where you're like, mm-hmm, this guy here is gonna run over to here. You know, you're doing these big fat yellow arrows type of stuff. And so I I did it and it, it was really cool. And by the way, I learned a lot about drawing on top of your screen. You know, it's called the Telestrator. This, this thing that was invented in the '60s to like draw on top of your screen, Telestrator. I'm like, all right, I'm gonna make a Telestrator. And I, and I did, and it was like really nice. And it was an Electron app that was in front of your screen, but it was transparent and it would allow events to, to pass through. But if you like kind of flipped a switch or like did a keyboard shortcut, then it would start capturing events and it would start using that as to, to run this drawing tool and the drawings would kind of fade away and it was exactly what I wanted and it was really cool and I used it and it was, it was great. Then I was like, well, you know, this is cool, but the stylus that I have, 'cause you know, it was like a digital painting stylus, like had, it was a Wacom, you know, it was like kind of an expensive, really nice stylus from like the, the art days also. Like, uh, and it, and that could do pressure. Yeah. Like I knew that that could do pressure 'cause I could use it in Photoshop and stuff. So I'm like, how do I get that into my little Illustrator app? You know, I found, oh, okay, this is how you get the pressure off of a pointer event. That's really easy. But like, how do you make a line that gets bigger and smaller based on the pressure? No answer. Dug a little deeper. There was like a, you know, cuz I'm like, I'm sure I've seen this before. They're like, oh yeah, there's like a signature, uh, thing for like React Native. Uh, how does it work? All right. It works terribly. It's like, it's like the worst. Uh, I mean, it was, it was cool. It was a good ambitious project, but it was like, I would never have shipped this, like this was just like, this is clearly not the answer to the problem. Like there, there's gotta be a, a better thing, right? And it does it by making lots of little tiny lines and, and just varying the width of the, the line, right? 'Cause in the browser you don't have like SVG, you don't have any of these primitives of like a line that's width changes as the line moves along. So you have to fake it and you can fake it with like line segments that have like wider segments. Narrower segment, narrower segment, narrower segment. Or you can do the thing that like Photoshop does, which is called a, like a dab brush where you take a single shape, let's say it's a circle and you just repeat that same shape lots and lots and lots and lots and lots of times getting smaller or bigger depending on the pressure. And because the shape is so close together, you end up with like a, what looks like a single continuous shape. The only problem with both of those things was that they only worked with raster images. They only worked in like pixels. I was like, well, I wanna do this in, in SVG. Like, I don't want, I don't want little shapes and lines that don't look good anyway. I want like a polygon, like I want points that wrap over whatever the points that I drew and that constitute kind of like a, the shape, like a vector shape. Turns out no one had really figured that out and I took it upon myself to figure it out. And I took it about, I, I started this because I had just watched a video about how you do racetracks if you were programming like a retro video game. He wanted to have like a racetrack. And I was like, oh, I could do the same thing. You know, you take all the kind of the middle points and you kind of go out left and you go out right. And that's how you make the racetrack. But I'm like, you know, if you just went further to the sides, further left and further right when there was more pressure and then like less to the left, less to the right when there's less pressure, that would create a line that kind of like got thicker and thinner, right? I could do that. I can figure that out. Let me jump into it. And that turned out to be a really hard problem.

I knew that was about to be the next thing you said.

I'm posting about this on Twitter. I'm sharing these like little like, uh, demos and, you know, debug mode views of skeletons of these, these polygons. I'm getting people in my, my DMs or in the replies being like, oh yeah, I worked on this for my PhD and my whole PhD was just about the corners, you know? And I'm like, oh shit. Like I'm really into it. You know, now like this is, uh, I'm like way over my head and, uh, be having calls and talking to folks, you know, who are like, no, you need to like learn linear algebra, buddy. Like you need to, if you want to do this right, you're going to need to figure this stuff out. And so I did. And, uh, you know, vectors and 2D vectors and okay, uniform multiple magnitude. All right. Like, yeah, I got it. Like, got it. Cause you know, what I wanted to do was make the ink. So I'm like, whatever I got to learn to make the ink, I'll figure that out. And then just again, like kind of obsessively working this problem for, for months on Twitter in public to the point where like folks were just like, dude, you gotta like, just call it, you know, like you gotta be, you know, I'd be like, no, no, no, there's still so much other stuff to try and to learn or to, you know, I haven't even scratched the surface or whatever.

I'm like sitting here with a smile on my face because I feel like I just got to know you a little bit where one, you have this appetite for absurdly hard problems that most people would never go down that rabbit hole. You also very clearly are a fast learner, but then you have this obsession with the details and a willingness to tease apart every little piece from first principles in order to figure out the best way to build something. So taking that experience, and then also there's some interest in teaching and educating and explaining ideas, and you're able to recognize the fact that that's also in many ways probably the best way to learn something. So if we combine all of that. You've spent years in tool design, like really, really deep in tool design. So if you were teaching some kind of an upcoming content series on tool design, what are some of the main principles that you would be hitting in order to help a designer listening really go deep into that world and understand just the types of things that you have to think through?

I think of all tools as like kind of decision-making tools. Like a color picker is a great tool, right? It's not the only way of representing color. Like you could pick a color like using like hex codes or RGB codes or something manually. It's just, that's bad. It's just not a good way of making those decisions. You, you're not dialing anything in. You're not getting that like really quick feedback on one decision or another and being able to compare things. A good tool will allow you to, to do that, to, to very safely make a change and go back, have that safety net of I'm not destroying anything or I'm not like screwing anything up while I'm working on this. Which is why I think design systems kind of like, anyway, the, I thought it sounds like, you know, you need that, like that, that, that safety in order to, to, to make those decisions. You also need to just be able to compare options. You need to be able to make those options. It's a lot of dialing in. It's a lot of, uh, balance between precision in terms of the being able to, to do things precisely and then a lack of precision in, in other ways in order to allow you to make a breadth of decisions. In other words, like, if, if the app only allows you to just do the gaps, you know, but it gives you a really good control over the gaps, like, that's great, but like, that's not the only thing that I need to do here. If you have no choice but to make every decision a precision decision, then like the speed of, of operating just becomes really slow or, or even like kind of too much to, to hold in your head at the same time because like you're having to make too many decisions, I suppose. Uh, even things that aren't important, you might have to make decisions on, whereas a good tool will allow you to kind of focus on the decision that you're making or the work that you're doing, which may or may not be precise, without burdening you with having to make all those other creative decisions.

You obviously have an eye for what good tools are, and you can see all of the details and the thousands of micro decisions. So as you're using these different canvas-based tools, I'm sure you get to the point semi-frequently where you're just like, Well, that could be improved. Well, I could, you know, I could see how we could do that a little bit different. So then I want to dig into this tension where it's like, how do you wrestle with one, the desire to innovate and improve while simultaneously capitalizing on the familiarity that exists?

Right, right.

And you know, the real value in matching something one-to-one, even if you can see a better way to do it. So how do you think about that tension as a tool designer and someone that's—

Well, that's a big—

kind of working on that. Foundational layer like TailDraw.

The reason why this can be a commodity product is, is we're an open source product is because the canvas is kind of a known thing. It's, it is a commodity, or at least that's the theory is that like when you use a canvas product, you, you automatically kind of bring with you tons and tons and tons of affordances that you've picked up by using Figma or by using Miro or any of these other tools. And you expect it just to work the way that it's supposed to. You don't bring those same type of expectations to every piece of software of like, the tool has a kind of like, it's a known thing, right? But the, the known thing for a canvas is very complicated.

Yeah.

The example I use, uh, for another one of these like really well commodified and yet super complex things is like a, a text editor, right? So if you're typing into a text editor, and you kinda like pause and they keep typing and then you say, ah, that's not right. And you, you hit undo. If you hit undo and the thing that was undone was the last character that you typed, just they did undo again and it went like, boop, like just one character back, you'd be like, this thing is just broken, right? 'Cause it should go back to where you paused, right? It could be anyway, but like that's the way that it works, right? That's the, the convention, very strong convention around undo redo in text editors. If it doesn't work that way, it's not like, oh, well, this text editor just works a little different. You know, I gotta press this a lot of times in order to get back to where I want to go. It's like, I cannot use this. That's like, you know, uh, IRS-level, um, you know, website, like, terror. I mean, it's, uh, it's just completely unusable. Even if the rest of it all works, like, if you get one of those really important conventionalized features wrong, like, It just is like, well, this is not a text editor, is it? You know, the canvas has the same sort of things that should happen. Like if you pinch on the canvas, the thing should zoom in or it should zoom out, but it shouldn't zoom out towards the center of the screen. It should zoom in to where you're pinching. And if you're zooming out, it should zoom out from that. That should be the origin of the transformation of the canvas. And if it doesn't work like that, it feels broken. It feels like, oh, these, this is like a, a tech demo. This is not a, a real thing, right? If you select a bunch of boxes and you, and you rotate them, they should all rotate together. That does put me as a, like a toolmaker in a, in a spot of having to recognize what of the thousands and thousands and thousands of features inside of something like a canvas needs to be the same way every time. And then also identifying, okay, which ones are actually different here, right? Like how does alignment or justification work that is different between these different apps? And is there a reason for that? I do. Notice the fact that like a lot of our decisions with TealDraw, or a lot of like my decisions with TealDraw are gonna be increasingly influential on what those norms are. Because at some point someone's gonna say like, okay, well what does ClickUp do in this case? All right, cool. What does Inflight do in this case? You know, and like, what, what is the, you know, these, you know, what does Autodesk do in these cases? And like, like, oh look, they all do it the same way.

Hey, really quickly, let me tell you about the all-new Dyve Talent Network. I've hand-assembled over 100 of the most talented designers and builders that I know, so I can recommend them to my favorite companies. So if you're listening to this and you're open to new opportunities, the Talent Network is anonymous and super low pressure. It's just an easy way to see what's out there without having to post on social media. So if you're interested in joining, or maybe you're looking for your next hire, head to dive.club/talent.

It's almost like you hold up a magnifying glass that the vast majority of people do not have access to. Like you're seeing things at a level of detail that is unique. I wanna zoom out for a second because there's an interesting trend that even I'm seeing as I do more of these demos where the canvas as a paradigm for this next era of tooling is quite clear. Like there is an uptake. It's a good time to be in the Canvas SDK business, apparently. But you said something last time we talked that, that was pretty interesting. You talked about how most of today's apps are still conservative uses of the technology.

What do you mean?

Can you unpack that a little bit? And I want to ultimately help people get inside your brain a little bit where you're imagining where this could go and stretching people's ability to envision the future.

I think within, within just the category of design tool, there's a lot more that you can do in design. I think, I think you're, you're doing some of this as well, like of saying like, this is an environment for creating production assets, or this is an environment for, for creating websites or applications, or this is an environment where the design is executable in some way, kind of like Tilda Computer or some of the workflow tools that we're seeing. Or this is a design that is like mapping back to a, a, a real physical process even. Like I've seen tools that used the canvas in pharmaceutical, for example, where you have these really complex workflows, either doing research or production that need to be designed, but you can only design the parts that haven't run yet. So it's like this workflow, it's like time is moving along this and everything back here that you can't do anything about anymore because it happened, but everything this way you can change, you know, and like learn from here in order to change. It's fascinating, right? The way to do that easiest, given the complexity and given the relations of all these different things, is to do that visually and to do that like kind of, you know, where place where you can zoom in and out and move things around and all that. I think workflows themselves are like a, still a really very popular right now, but, um, also like kind of expanding category of, of what you can do with workflows. And I consider workflows a kind of a subset of, of, of canvas. Within like kind of the whiteboarding category, that's, that's pretty well, well known, but you start kind of going into these verticals, right? Where I think Miro, for example, like people use that for UX research, for team meetings, they use it for, uh, education, for like remote offsites, for onboarding people, for like so many different use cases in Miro, which I think is a strength for Miro that it can accommodate all those things. But it's also kind of a little bit of like a bad fit for all of them. You know, like you say like, oh, what would Miro look like if the only thing that it did was, um, facilitate team, you know, onboarding events or remote offsites or something like that? You know, what would the feature set be? Would probably be a lot less, number one, but also it would probably have things in there that are, are unique. The way that you represented people on the, on the canvas, you know, might, might be different or might be, uh, more, I mean, I, I don't know because I'm not building the, the, that product, but what I've seen is that there's, there's interest in developing those, those different verticals much deeper in ways that eventually don't really look like whiteboards. They, they look like, um, you know, things like Padlet, you know, where it's like, God, they're like rebuilding HyperCard essentially because they wanted to give these like presentation tools to, to teachers to, to build these environments for their students. To explore. I've seen classroom tools where there's even some of the AI stuff coming in where you have, uh, auto content that, that is being generated on, on the, the canvas in response to like the questions from the students in response to the, the research that they're doing. It's just a visual way of presenting that information. Again, same canvas. I think the multiplayer canvas experience is like so good and so underexplored. And I, I think even things like, uh, been building a lot of like starter kits and one of the starter kits that I want to create next is just a board game. Like I want to have a dice on the canvas. I want to have a card deck of cards on the canvas and I want to see what people build with that because it's a multiplayer real-time canvas and now I have dice in my hands. Like, all right, let's play some D&D, man. Like let's, let's play some poker. Like you have all the primitives there though. I need to select, I need to move, I need to drag, I need to activate. I have, you know, collaborators and they have their different spots and drag and drop areas, all that stuff. So it's like so many entire like kind of product categories can fit into the canvas. But the, the ones that we're familiar with are like, again, it's, it's like a really early generation.

Even just seeing like we're recording this a week after Figma announced the Weavi acquisition, like even just that is gonna introduce so many designers to a different way of thinking about what a canvas can do and these chained workflows. And we were talking about this before we hit record, like people come to me with demos and I'm seeing a lot of canvas-based demos. It's starting to feel clear to me that a lot of the coding that I'm going to do might be rooted in the canvas where I'm seeing different versions of my localhost side by side and comparing and contrasting and creating branches and everything exists on a canvas and it's like, like, whoa, more, I'm just, more of this future feels like it's going to exist on the canvas in a way that it's pretty exciting.

To go back to the, what makes a good tool, essentially, like code, great. It's really not good at that ideation stage. It's really not good at making decisions and comparing things together. There's ways to do it and we're kind of, even some of the AI tools that, that are out right now are like Cursor with, you know, multiple agents working on multiple, like, kind work trees and stuff so that you can kind of switch between them. It's all very, it's very clunky still, not for lack of the, the genius of the, the products or anything, but it's just like, it's just not the way that you kind of compare things. It's not the way that you tweak and dial in and, and all those things. You, you can do that on the, like, there's, it's still like, it's not an accident why people really like Canvas tools within the design and the space and this, this idea of having an infinite space in order to compare and, and like branch and, and just go deeper and deeper and kind of rewind and all that stuff. Like way easier to do on the canvas than in a Git history or something like that. It's just not impossible, but like prohibitively hard. If you're gonna do it, you're gonna do it a fraction of the amount of times that you could do it in an environment that was more geared towards that, right? That, that number of iterations, that's such a big thing. And, and, uh, you know, like how many, how many different versions of this thing can I whip out before I decide to, to make a decision?

Can we talk a little bit about your experiments? You're, you're always posting these little things on Twitter. I've seen some fairies floating around recently.

Steve Ruiz. Right now I'm in the, uh, the Marriott, uh, in Lisbon where I just presented, uh, fairies at the Lisbon AI conference. Uh, and let me tell you, it went really well. Nice.

Nice.

I'll tell you, talk to you about it. Uh, we, we sell the SDK. We license it to other companies. You know, our value proposition is that you can use TealDraw to build cool things and, and very different types of things. And so it's kind of incumbent on me to build cool things and very different types of things. Right. And I'd also learned, you know, during those kind of days before TealDraw that like the best way to market a tool like this is you just build with it. You build interesting things with it and you kind of develop it a little bit in public and all that. And like, unanswered questions are kind of like things that are, uh, obviously not done or maybe even not doneable are most interesting to, uh, builders, audience, right? Kind of wanna follow along as someone's doing something and you also kind of wanna wonder about how you would do it. I think that's, that's true for me and I think it's just true for most developers and designers. And so yeah, the things that we've built with Tilda, there are a lot, but the things that really went viral and that, uh, came out of nowhere basically were like, uh, GillDraw Plus AI in, in various ways. I'll, I'll kind of speedrun this because it, that's a whole different podcast, right? But like we did Make Real, which is where you could draw a website or draw something and then select it and click this button called Make Real and it would create a website, you know, and put it on the canvas. 'Cause our canvas is, can, you can do that and it would be whatever you drew, right? Like we would just take that screenshot, we'd send it to an AI and say, hey, you're a 4,000-year-old senior web developer who loves their designers and wants them to be happy. And like, you know, your, your designers who you love just gave you this, um, this low-fidelity wireframe and asked for a working prototype. Can you build that? And, uh, and then we do it. And it was 2023. It was, you know, the vision models had just come out and, uh, it was actually a designer in Sawyerhood at, uh, Figma. Sawyer's awesome, by the way. Sawyerhood. Builds all sorts of cool things. But he had basically prototyped that using TealDraw and that started getting viral. And then we took it and we ran with it, right? We're like, all right, let's put this back on the canvas instead of in, in some modal window.

I remember that tweet still, like scrolling and seeing that for the first time.

And I was like, oh my gosh, it, it took over Twitter for like a couple of days. Yeah. And because then, then we kept on discovering new things, right? Like we discovered that if you drew on top of the website and then we, we sent that as the next prompt, even just with an empty white box inside, like, hey, this white box contains your previous website that you made. Here's the code that you, you made last time. Make a new, new prompt, right? Using, using whatever the user has selected. And if you, if you had just kind of like crossed out an icon, somehow it would connect the dots, be like, oh yeah, that's in the top right corner. It must be crossing out the menu icon. Uh, all right. In my next iteration, I'll just get rid of the menu icon. And then you'd have, had the next, next iteration, right? You had the next working prototype. Which you had created again, just by drawing. And then, you know, people are like, oh, you could just put screenshots next to it and say like, hey, make this look like, you know, stripe.com, the screenshot of stripe.com. Or like, here's, here's like a picture of a certain icon, make this icon. And just next prompt and next prompt to next prompt. You could just give it like, you know, figures like, uh, like you'd see in like UX documentation or something. I'm like, this is exactly how this rotational dial should work or whatever. And it would be like, all right, I can do that. I can do that. I can do that. It was just fascinating. We were learning this in real time. It was the first time any, I mean, this was pre-Vibe coding apps and stuff like that. For a lot of people, this was their first time making something that works, like producing an artifact of like software in any kind, any shape. But it was madness. There were like millions and millions of billions of views on these tweets and engagements. And my phone was ringing off the hook and we were just like all getting RSI from like reading Twitter and it was like 9 solid days of like virality just based on this, like, just draw a website idea. After that, you know, it was, some things got a lot easier. Fundraising got a lot easier. Uh, but also it was like, well, this is, this is like the perfect use case for this canvas. Like if we didn't, if I hadn't already been building TealDraw, like once the vision model dropped, I would have started building TealDraw. I'm like, in order to take advantage of this wonderful technology, you're going to need a really good hackable canvas in order to just work with images because this model that can understand images and you're gonna need to create those visual prompts, you know, for it and modify them and all that stuff. But it just so happened that we had the thing, uh, and that we'd been building it for, for years and it was like just ready to go. And, uh, it was a wonderful coincidence and we started doing more kind of these AI demos. We did one where you would be drawing and we used like a real-time image generator to like draw in real time as you were drawing. I don't know if you ever saw that.

Oh, I definitely saw that.

Yeah, yeah, yeah, yeah. We learned a lot from that. One was that like stuff's expensive and we shouldn't spend all of our, uh, investment money on demos. Fun little demos. Check it out in the world.

So you get lucky on the generative stuff. What are the chances that in the same way that we now recognize that a canvas is obvious for generation, we look at more of these agentic workflow as like, oh, of course that happens on the canvas. So given the fact that you're probably not trying to 100% just get lucky, like, what are some of the ways that you're trying to explore or push that forward or capitalize on what appears to be the next big jump?

The conversation that we had in kind of the beginning of 2024 was, where do we think this is going to go? ChatGPT had come out, like the image models. I was like, okay, this— everyone's like, all right, this is going to be defining technology of our our generation. What's our role in this future? What's the role of the canvas? And ChatGPT was really just blowing people's minds and we were all just thinking about it constantly. We were just like, well, chat, ChatGPT, chat works because chat works for people. Like I can chat with my friends, I can chat with, you know, my, my, my wife and my, my family, whatever. Chat works really well for people. It just also works well for, for AI. The canvas works really well for people. But, uh, Should it also just work for AI? Like, is that gonna be a reason why the canvas becomes more popular is because like, it's already good at collaboration. It's just a good environment for collaboration. We'd spent years already kind of unpicking, okay, what is unique and good about the canvas? But it really made us step back and think about like, why, why is it actually good for collaboration? Like, what can we do in the canvas that we can't do in, in a chat? Things like working simultaneously, but, but in a way that you don't see what other people are making, but you know it's over there, you know, and you can kind of come over and look at that and then come back and look at your own stuff. But like it's happening, but it's not like in your view or in your feed. It's not distracting you. You can work in parallel even though you're working in the same doc. It's very hard to do, by the way, in, in like, uh, Microsoft or, uh, like a Google Sheet, by the way. Like that type of parallel, but in the same document, very tough. But you could do it in a canvas. You could do it. You could kind of tell what people were doing. Also based on like where their cursors were, you could also see like who's working together based on like the clustering of, of collaborators. You could leave notes that people pick up asynchronously through comments. I mean, like the, as we thought about more, you could always chat, you could lay in, you know, video very easily or audio to, you know, like these other modalities could just kind of plug in in a way that makes more sense as like a real-time thing than it would in a, in a chat. Yeah. So we kind of developed this theory or this thesis around Right. The, the canvas just might be a good place for intelligences to sort of work together. Suddenly you have something where you're like, here's a, a screenshot of a whole bunch of noisy sticky notes everywhere. Like what happened during my, uh, weekly planning session? You know, make me an outline of that, structure that, put it into the database or something. And, and that had never been possible until 2023, 2024. Yeah. So, so the, the thing that we wanted that, that we realized You know, we, we would, we would need really is this like, well, I wanna collaborate with AIs on the canvas. I want little virtual collaborators. I want some of the cursors on the canvas to be people, and I want some of the cursors to be AIs. And I might want to have my own little private AI assistants. And, you know, some of 'em might just belong to the board or just be other things. And they should be able to, to work with me and see what I see and make the same things that I can make, but like be AIs in the same way that I could chat with an AI or have a, a chat in my Slack or member of my Slack that, that's an AI. That was the vision. Okay, we're gonna, that's what we're gonna do. That's the thing that TealDraw will be able to facilitate because we have all the bits and pieces there. Is it possible today? We looked into it and we prototyped and it is not possible today. We could prototype, but the bots were just bad. They were bad. They would play chess with you or checkers with you, but they would like draw hexes in the wrong spot and they wouldn't know it. And you'd ask them like, hey, did you draw that in the right spot? And they're like, uh, No, I drew that in the wrong spot. I can notice that I drew that in the wrong spot. Let me draw it in the right spot. And it would be like way over on the other side or something like that. Like they couldn't figure out the coordinate system, all that stuff. We tried to limit it and teach it and like kind of figure it out how to like prompt in such a way that it got the right information, but it was, they were just bad. And so we're like, all right, so they can do this. It's not like we're gonna ship a feature that, that has this. If you remember, there was a company called Diagram, Jordan Singer's, uh, company. Yeah. Ended up selling to, uh, Figma. And, and that was part of their, their proposition was like, okay, we're gonna have these like virtual collaborators. Yep. They ran into the same thing really quickly, which is like, oh, it just doesn't work the way that we thought it would. Like, yep. This is not something that models are, are great at. We were in this unique position of having a fairly lo-fi kind of goofy, creative looking canvas anyway. Even though this like sucks, like, let's still share this. Like, let's still build autocomplete and like start tweeting about it and sharing it. Let's try and build some of these, uh, Gentec or like these prompts, prompts to generating content. On the canvas, even though it sucks. It's gonna be shitty, but it's also gonna be amazing. Because we would, we were all totally impressed by it internally, but it was clearly not enterprise software. It was clearly not anywhere near the maturity that we could really stand behind and saying like, this is, this is as much software as the rest of the app. It was just hilarious. And it was like so entertaining and it's like just amazing. And you could like see it as a pointing towards the future. And it was funny. It was like really funny. We did autocomplete. Over that summer, uh, Lou Wilson mainly working on autocomplete, Brian Reid also working on autocomplete, and we made some videos about that, but it was just too bad to ship 'cause it would do things like, we would tell it, here are the last 3 things that the user did and ask it for what are the next 3 things that the user will do. You draw a circle and it would be like, hmm, all right, drew a circle. I, I don't really know what he's doing here, but let, let me keep watching. And then I would draw like an, uh, a smaller circle inside of the circle, kind of off to the left. And the, the model would be like, I know what he's doing. He's drawing a face. I'm gonna draw another circle, you know, off to the right. And then I would be like, that, that is right. And I'd hit tab and I'd accept it. And then that would be sent to the model. Okay, the user drew a circle, drew a circle, drew a circle. And the model's like, oh, I get it. The user is drawing a line of circles. Let me draw another one. You know, so it would be like, eye, eye, and then like another eye over here. And it would be like, oh, now I really know he's drawing like circles. Let's just go like circles forever. Would draw like an arm and it would draw like this part of the arm and then this part of the arm and then this hand and then the fingers. And then it's like, oh, I see. It's like kind of like a tree being expressed, you know, with where 1 becomes 5. Now each one of these should become 5. So it would just like add fingers on your fingers and stuff. It was really like kind of like body horror. But Autocomplete was awesome. We eventually took that code, which involved turning the canvas into text and sending that text to the can— to the model along with the image. And other information about like where the user's camera was and other stuff. We took that and adapted it to just a, just an app where you had a box and you could, you could put that box anywhere. You could make as many of these boxes as you want, but the box had a text input. You could just type into the text input, draw me a cat, you know, make me a diagram, do whatever you want. Right. Uh, and it would just generate that within the little like work area that you, you defined for it. I mean, it was very quiet. We launched it as like teach.tildraw.com. You can still go there and play with it. It's gotten better because the models have gotten better underneath it. Just like MakeReal has gotten better because the models have gotten better and just updated the models. But it was, it was mostly a demo of like, hey, this is possible. It's like a demo of like, hey, you can get a model to do the kind of pelican riding a bicycle type of like, uh, drawing thing, but in TealDraw. And it was very cool for it to be generating, not like an image, which they're much better at, but generating like stuff, like generating the same stuff that I can make in TealDraw, the same primitives that I can make. And the, the demo that I always do is like have it draw a cat and then I draw like a rectangle, tall rectangle next to it with like a little yellow rectangle on top. And I say, make the cat blow out the candle. And again, the, the thing that it sees is a screenshot and a bunch of like kind of XML that describes the different shapes on the canvas. It doesn't get, you know, here's the candle and it's at these coordinates or anything like that. But sure enough, it'll just make little blue lines coming out of the mouth of the cat. And like delete the, the yellow little rectangle and like probably draw some smoke and stuff and be like, I did it. The cat's blowing up the candle. And it's like, uh, it's extremely like shitty, but amazing. Like no one's losing their job over, uh, over this thing, uh, knowing how to, how to use the canvas. And you know, the cat's kind of a bad drawing of a cat and the, the smoke is a bad drawing of smoke. Like it's not great. It's not even good, but it's like, Wow. You know, like this is, there's, there's something really interesting here. I thought a lot about like, how do we frame this in a way that is narratively appropriate to the skill level of these AIs? Because if I just said, all right, these are your virtual collaborators, they're just not good, right? They're, they do crazy stuff. They do, you know, things that no human would do. And so they're like, they're just extremely not people. And so framing it as like virtual collaborators like seemed wrong. So I was like, all right, maybe the ghosts, you know, that you're kind of like invoking or like spirits. And I have somewhere, I have like the little drawings I'm sketching as I'm thinking about this, all this stuff. And then I'm like, it could be a little like bugs or they could be like fairies. They're small, right? So they kind of fit the cursor size. They're not people. They're definitely not people, but they're like kind of humanoid. They're not like bonded to you. Turns out that there's a lot of different types of fairies, by the way, Scandinavian fairies, which are kind of Okay, but, but not very friendly. There's like Irish fairies, which are terrifying. Don't read about Irish fairies. Bad. Steal your kids, come down your chimney, that type of thing. And then there's like English fairies, which are kind of just charming. They're the Tinkerbell type of things that we're used to from like Disney lore and stuff. So I'm like, all right, they're definitely, definitely English fairies. Let's, let's make sure that they're English fairies. That's also appropriate. We're in London. But they have these powers and they have accessories and like, you know, oh, great. Like, let's go deeper on this. As we got deeper into it. A lot of the problems of dealing with agents started teaching me why the canvas is such a good place for collaboration to begin with. One of the biggest problems, if you ever, ever tried to like vibe code with like 5 agents at the same time, is that, uh, it's very hard to remember which agent is doing what and which agent is which and what context they have. So even just telling them apart, oh yeah, what terminal was I in? I don't know. Again, like, I don't know if you've ever done this, but you can imagine like the screen full of just like chats that are just running, you know, as these things are, are coding and you're like, all right, that one's doing the authentication. This one's setting up the project description. This one's doing this and this. So there's just a, a which one is doing what problems, telling the difference between them problem. And, and that actually works really well in the Canvas because they just look different. You know, give 'em different hats, give 'em different wing patterns and whatever. Give 'em different clothes, colors. There's the, what is the state of all of my agents that I'm trying to run at the same time? Even if it's just one, like, is it waiting for me? Is it thinking? Is it doing something? Is it working? I want want all of my agents to be totally maxed out and running at all times, right? I don't want anyone to be, to be waiting if I'm, if I'm really trying to push things. I, uh, and the system should, should make that easy. And so that's another part of the state that we can represent visually. There's the, like, what are they working on? You know, like, are they, is this person writing this thing or is they, are they making wireframes or others? The canvas makes it very easy for the same reason why it's, it's good for people. You just see where the ferry is. See where the little cursor is. The complication of like addressing tasks to multiple agents at the same time or, or, or orchestrating, uh, the, these types of systems. This is what we're doing like very, very recently. Uh, this is what I was just demoing here in Lisbon. I want to give a task that is more than any one of these agents should work on at the same time. And then I want the agents, the fairies to like self-organize around solving that task. Say, hey, I want you to create wireframes for my app, but also I need you to write the PRD based on these inputs. And then I want you to make like a chart of like how those wireframes like interact with each other, like a user flow. And the fairy will start flapping to represent it working. It'll think, it'll like kind of like do one of these, a little character on the canvas, you know, touch his chin, kind of tap his chin and be like, well, that's too much work for me. Let me summon some other fairies to assist with me. And then that fairy that you talked to will kind of switch into an orchestrator mode where it is now creating tasks and assigning tasks to the other agents in the system to go do those things. And then also like checking in on the progress of all those things and, and, you know, assigning more tasks when, as people finish. The rules in order to enable that are, are very small relatively, but like suddenly, like they just, this crazy emergent behavior like happens on the canvas. The talk that I gave, I had like 8 agents, like all working at the same time. It was kind of chaos, but it was like awesome. Like it was, it was well beyond what I'd ever done on any other paradigm. And like the parts that were bad were still like, you know, like, yeah, the model doesn't know how big text is or doesn't know not to put things on top of other things like reliably and to spread stuff out. The parts that were good was that I knew what everyone was doing. I could tell the difference between all of them. And I could know when things were going wrong. Also and be able to say, oh no, no, no, stop, stop building that. That's just wrong. You know, bad fairy, uh, all those types of things. So the thesis isn't very creative. It's just like, well, it's good for people. It'll be good for you guys too.

And it's cool to see again, you just think through every little detail from first principles, even down to the posture of the fairies as a signal for what they're doing. Like there's so many micro decisions in that more agentic foundation, I'm appreciating listening to you talk about just your thought process even for it.

I mean, I, I'm very lucky to work with some other really creative people, Max Drake, Lou Wilson, mainly on this. Uh, I'll say so, Mima Kurbalo. So I've, I've kind of built that team around me to, so I'm not, it's not just Steve and his ideas, but we, we do have some of the craziest conversations when working through these features. Like, all right, like what if, what if there was like a pond On the canvas, you know, like, like an enchanted pond, you know, and it's like, yeah, yeah, yeah. Because like, you know, you'd wanna like have a fairy that kind of runs the pond and if, if anything enters the pond, you know, it should operate on that. That should be the prompt to this agent. In other words, like establishing a domain, a folder or whatever, and having a, an AI agent that like essentially manages the, the contents of that folder. If anything enters this folder, I want you to run this workflow based on on what we've agreed. Makes total sense. Okay. Yeah. Like, yeah, it's a pond, you know, that's enchanted naturally.

It can't be anything else than an enchanted pond.

The metaphors actually work. They work in both directions where some things will start from kind of the technical side that, you know, the AI world.

Okay.

How do, how are we going to do MCP? You're like, all right, well, maybe the, the fairy is like kind of warging into, uh, into Notion and warging and, you know, like, and it's like eyes roll back in its head. As it's accessing this information, because it's not going to be able to do anything else. Maybe it whispers to a butterfly and the butterfly flies. I don't know. We need some sort of metaphor for this accessing information from a different, uh, that's not accessible to the user directly. And then some, some of it, it kind of goes in the other direction of saying like, yeah, fairies have wands, you know, like, what do we do? Can we do anything with that? I feel like, like, you know, I'm reading, uh, PDFs about, uh, fairy folk tale. And I'm like, yeah, a lot of fairies like leave gifts for people. Like there's a lot of like gift leaving and gift giving in fairy lore. Like, how would we do that? And be like, oh, you know, you could kind of leave things for the fairy. Oh yeah. What would you leave? Oh, you know, maybe you'd say like, uh, extra context that if you're working in this area, make sure that you read this first, which is something that we do all the time in like agentic coding of like little context files or agents files or You know, please read me before working on my tests type of files. You're like, yeah, let's, let's, we could do that on the canvas, like little scrolls or little notes or little letters or something like that. And they could leave them for each other. And I was like, oh, this is great. Right. So having that layer of metaphor is actually really great for coming up with ideas for, for, it has been for us. Yeah.

I remember talking to Mike Smith from Smith and Dixon and he talked about how once you hit on the metaphor, it just starts unraveling. and it like accelerates ideation because it starts to compound. And I can tell you put yourself right in the middle, you know, you gave yourself a nice little, uh, fairy lore foundation, which in itself I think is a microcosm of who you are as a builder. The fact that you've went so deep into fairy lore, but you're at the point now where it's like, oh, it's just, you can't even keep up with how fast the ideas are coming.

It's great. Our, our wireframes, our, our TealDraw docs on this stuff, uh, we post a lot on Twitter as we're kind of building these things. Uh, Max and Lou also like, uh, great follows for with this stuff because we're just figuring it out as we go, but there's just so, it's really hard to miss and we are absolutely figuring this out. You know, we have to like remind ourselves that the thing that we're figuring out of like, how do you do human plus AI plus multiple AIs and multiple humans collaborating in a single document in real time? There are very few companies, products, anyone working on that problem that we are like massively uncharted territory, but also like some of the most ambitious stuff like happening in software, right? So like, it was like, like if you wanted to tackle a problem, that's a big problem to tackle. And, uh, we just kind of launched ourselves into it. They're real, really interesting problems of like, again, yeah, like how do you handle orchestration? How do you, how do you handle, um, waiting, turn taking, for example, or like following of like, uh, the different kind of states that the AI is, is gonna be in. It's actually very similar to like video game AI where you have, you know, these little strategy games like, like StarCraft or, uh, CRPGs or something that we look a lot at of, uh, which have solved a lot of these problems where you have these little entities that have their own little state machine of like, I'm waiting, I'm acting, I'm moving, I'm like patrolling, all these things. And they kind of like move between those states based on enemy approaching and now they'll aggro and now they'll, switch into a fighting mode or something like that. And we're doing the same thing. It's just that we're also using like AI, AI now to like control the behavior while they're in that, that state. But it's still a lot of like programmatic switching between, between things and setting up those, those like roles and modes for these, these fairies also, which I think is something that you're gonna see elsewhere. I mean, it's just like the, seems to be the way to solve this problem, like the multi-agent orchestration problem. It would be the same in code. It just would be impossible to see in a way. It would be impossible to like manage, or at least very difficult. Hopefully they, they figure it out because it's really cool to see, see them working together. And I could imagine having a fleet of AI coders who can talk to each other and email each other or whatever is, is gonna be worth it as well.

Same. It's, it's, uh, it's becoming clear and I just appreciate you letting us get in your brain a little bit. Like, I feel like I got to know you in the way that you think and process things a little bit over the last hour plus and I've thoroughly enjoyed it. So I appreciate your time and I will look forward to more Twitter demos because they're definitely my favorite parts of that little bird app right now.

Before I let you go, I want to take just 1 minute to run you through my favorite products because I'm constantly asked what's in my stack. Framer is how I build websites. Genway is how I do research. Granola is how I take notes during crit. Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobbin is how I find design inspiration. Paper is how I design like a creative, and Raycast is my shortcut every step of the way. Now I've hand-selected these companies so that I can do these episodes full time. So by far the number one way to support the show is to check them out. You can find the full list at dive.club/partners.