Subscribe
Share
Share
Embed
Conversations with designers, founders, and builders behind some of the best work
SOP Pietro Full.txt
English (US)
00:00:00.080 — 00:00:28.600 · Speaker 1
And that thing became very addictive to me. Like this feeling that you can think something, materialize it, and then one day it just works really well. It was just like a feeling I couldn't escape. And I just got completely, like, addicted and absorbed into it. When I think about the moment that changed forever for me, I was on my screen like mouth open, taking screenshots in and to all my friends, and I was like, what the hell is going on?
This thing is, it seems like these things understand?
00:00:28.640 — 00:01:56.090 · Speaker 2
Pietro Serrano is one of those people who just can't stop building. He's a designer turned engineer, built one of the first AI powered search engines before perplexity existed. Created cloud engineer and open source tool that earned over 11,000 stars on GitHub, and got him hired at anthropic. And somewhere in all of that, he found time to make designer GPT one of the earliest attempts at AI generated UI.
Now he's building Magic Path, an AI powered design tool built specifically for large scale teams. And I really wanted to talk to him because these last few years he's been living in the future, building things that kind of felt like demos at the time but feel really obvious now. He's got this philosophy about vibe coding that I think more people need to hear.
He calls it slow food versus a fast food. This idea that not everything needs to be text to app. In 30s, we get into the launch of their new Figma Connect feature that went absolutely viral on Twitter last weekend. We talk about why round tripping might actually get solved this year, and there's this really great moment where he describes watching two AI plugins combine to do something that he never programed them to do, and how it's changed, how he thinks about what these models are capable of.
This is state of play. Let's get into it.
00:02:03.110 — 00:02:08.830 · Speaker 2
You've got this background that I've always been so fascinated with. Designer to engineer.
00:02:09.869 — 00:02:29.910 · Speaker 2
You build and launch your own products. You also have this incredible pedigree that's moved you between like, uh, Facebook and Anthropic and all these companies. You just you're just plugged into everything. You're like a garage tinkerer of sorts. Where do all that come from? Like, what's the what's the motivation?
00:02:29.950 — 00:04:43.420 · Speaker 1
I feel like for me, I always have this urge to, like, create, um, in any shape and form. It was just, you know, it was always like, different kind of mediums from from art to music to design. And I feel like code to me just became another outcome where it's just another way to express like my creativity. And what I start soon.
Realize, especially with AI, was that you have this really incredible, powerful tool, but the sort of user case are really sort of unknown, right? Like, like, you see, like every week there is like a new app that's sort of like explored in terms of like popularity. And I can really show you, like, I don't know, a demo of something that I built like two years ago.
There was like exactly that, right? Or like you start seeing like, you know, things like Cloud bot or, uh, design agent that run inside of your computer and like, do stuff. I was doing stuff like that, like, you know, two and a half years ago. And I think because my motivation was always like, I never let the tech sort of limiting what I think I could do.
Right. I think especially in a world where things are so new and relatively like unknown, the worst thing you can do is limiting yourself, right? So like starting from a perspective to say like, oh, this technology is like it's never going to work or like, you know, if you remember, like in 2021, 2022, everybody was like, yeah, AI is cool, but what is it?
Right? And I took a completely different approach. I was like, no, no, no, trust me. Like, I want this thing to run on my phone. I want this thing to like, answer my emails. Right? And so it was like, I think that's when I look back. that to me is like, what really moved me was this idea that like the today limitation wasn't what I was designing and building around it, right?
I was designing building around what I thought was going to be the word in the next, like 3 to 5 to, you know, five years. And that is like that engine that keep farming up because then that sort of expectation that I was building up with what I was building got met by the model capabilities. Right. And now you start saying, oh, shit, like this thing that wasn't working really well like a couple of months ago now.
Boom. It's amazing. Right? Um, and that thing became very addictive to me. Like this feeling that you can think something, materialize it, and then one day it just works really well. It was just like a feeling I couldn't escape. Um. And I just got completely, like, addicted and absorbed into it.
00:04:43.420 — 00:05:17.550 · Speaker 2
I have so many things I want to ask about. Like your stack I'm in the middle of, like, molt bot or clod bot. Molt bot, you know? And it's like blowing my mind. It's it's one of the it's one of the times where the hype is being met like it's it was hyped up and for good reason. I want to start kind of back with designer GPT, which I think was really your first attempt at like playing with the technology.
And we'll pick up right there. But take me back to before designer GPT, like, what was what was driving you? What were you focusing on? What problems were interesting to you at the time?
00:05:17.990 — 00:08:35.640 · Speaker 1
There were most like like like a philosophical aspect to it. Like, I remember the first experiment I used to do were things like, I want to create a simulation of like many of these little things communicating to me. Or I remember one of the first things I ever built using the GPT three API was like, okay, like I want to ask a question and you create a set of expert based on that question.
So let's say I will ask a question about philosophy, and the chat will pop up with Plato and Aristotle and Nietzsche and like all those people. And it was just like mind blowing to me because I was like, wait, like you can literally like simulate and simulacra all those people out of the blue. and it was almost like this need to see how far I could push the technology, right?
I was like, wait a second, like how much I can do with this? How many of these little things I can create? How many of these personality I can manage together? And that's basically Skyfall into like I, I built the very first authentic web browser, which I call it zing. So this is like before perplexity what I look back like, what is the post that really put me on the map in terms of like what made me go viral in the eye space over the weekend?
I, I built this thing using, I think, GPT four API. At the time it was called zing. It was a web browser where you search, but you search with AI, right? So I would just go and look at the things. And I at the time it didn't have tools. There wasn't there wasn't like, you know, AI couldn't run tools and stuff like that.
So what I would have done was I would run the Google search API, and then the Google search API results will be provided as a context, and then they will respond. Right. So it's like this really weird, sort of like little building blocks that you build by yourself. And then you little by little, you start seeing the power of it.
Right? And so it went from this, like, sort of like weird. Esoteric experiment to like, okay, now how can I apply this idea as to something that is more tangible? So it was like a first it was this, this web search engine, which actually I have to close because I give it for free. Like I build it and release over it and like, like I think at one time it cost me like $10,000 the first week because people were just going and just like hammered this because it was like, this is amazing.
I can ask this philosophical question and I get answered the right way. Like, what's going on? Like it was just like, mind blowing. Um, and and then, you know, it was just like, it's sort of like, keep going and experimenting with more things. I build, of course, like, you know, designer GPT, as you mentioned, cloud engineer.
Cloud engineer is like still, I think like one of the coolest things that I built at the time because one, he lent me a job on anthropic, which I was really happy about it. And two, was also like sort of like the first demonstration of what an agent in the terminal could be like. Before cloud engineer, there was no an idea of an I.
You run into a terminal and now like something that we give for granted. Like it's like the when you think about, you know, the way that people interface with AI right now, if you're like in the space, you do it in the terminal. And for me, what was fun at the time, it was almost like, um, a need because I was like, wait, I don't want to build a UI around this.
It's gonna take me forever. But the terminal is right there. I can I can access, you know, from any ID, I can access it from every window in my computer. Like, how cool would be if I just have the little thingy run in there? And I think that turned out to be the winning, uh, sort of like framework because it just works from everywhere.
Right. And and I think, like, Cloud Engineer was really the one that really opened me up in terms of like, what can I do with agent, what an agent can do? Um, and basically.
00:08:35.640 — 00:08:38.560 · Speaker 3
Just like, like how smart these things are, like, I feel like.
00:08:38.840 — 00:10:40.190 · Speaker 1
The reason why Cloud Bought is really resonate with people is because now they're sort of having these, like, little mind blowing moments every day. And I think, like, if you've been in this space for the past three years, you started building your own pipelines in this type of way. You did see these things and you did see this thing coming off quite often.
Actually, I have a really funny story with design GPT at the time when I was building this LGBT like OpenAI, I didn't even have tools, right? It was just a thing that was called, uh, I think it was called plug ins. It wasn't even like the actual tool. It was like this thing called plug ins. And so I did a plug in.
There was basically a shell of what designer GPT end up to be. And then I had another plugin that was, uh, to generate images via API over stability, uh, stability, AI model one. You know, the shitty the first model that we had. Right. And what was crazy about it, I can never forget. And when I think about the moment that changed forever, for me, it was this moment at the time.
On OpenAI, you can actually activate multiple plugins at the same time. So you can say like, oh, I want this plugin, this plugin, this plugin. I had my designer GPT plugin on and I had the image generation plugin on, but I didn't know, I didn't notice that. So I was like, hey, make me an architectural website.
So it makes the architecture a website. But then as he's making the website, he's also making the images for the website, which I didn't ask. I didn't program there. I didn't top the model. He could do that. I didn't say anything in the system prompt of any of the plugin that those those plugins were interchangeable.
But the model, because he knew he had access to these plugins, he understood they can put two and two together and just to get together. And I can never forget I was on my screen like mouth open, taking screenshots, sending to all my friends, and I was like, what the hell is going on? This thing is, it seems like this thing to understand.
And that was like GPT four, right? And so I'm glad that now people are getting to experience this, because I think that's the magic of AI. When you start seeing like, holy shit, like, this thing is quote unquote, a man of its own, it's not just like repeating stuff. You can actually take action on your own and it can do the right thing sometimes.
Right?
00:10:40.230 — 00:11:52.020 · Speaker 2
It's saving me real money, too, right now. And I have I feel like there's not enough people in my network to talk about how incredible this technology has become for me. In the last 14 days, I have shipped four apps public facing apps that can be consumed, one of which three apps. One's going live on Monday and it's like a real robust thing.
I suddenly I was always a front end engineer, a designer who loved to, like, really bring interactions together. And that's kind of where my savvy stopped. And so these AI coding tools are really they've leveled up my prototyping. They've allowed me to just ship crazy apps out of nowhere and make them look really good.
By the way, not just like shad skin components anymore. And so I'm having this existential crisis about like if, if I can just spin up software, what is the value of software? And I'm like, I find myself asking this question and I look at your pattern of creating all these tools design GPT you have cloud engineer with like 11,000 stars, right?
Something like that. And and I think you gave that away like you just said. Here's to the community.
00:11:52.060 — 00:13:41.870 · Speaker 1
And actually, what's crazy about Cloud Engineer was that the Bell Laboratory lab, which is what the atomic bomb was first theorized. They reached out to me. This was like a couple years ago, and they were like, hey, we've been using like, like this cloud engineer, nonstop like, but we're doing like a research with it.
Can we, like, say to you? And I was like, they actually asked me to invite they invite me to do a talk there. But unfortunately I was like, in California, I live in New York now. And I was like, oh, man. Like, I couldn't do it. But then we ended up doing it like on zoom, which was amazing. And it was just me talking to like 25 scientists and like, and that's even like the crazy thing about AI, it's like, because it's such a new field, you can, like overnight in a way become an expert.
Not that I define myself as an expert in any way, but it's like overnight you can become really good at like that particular aspect of that interaction or the way that you interact with the models and to the point they're like 25 astrophysics from Bell. Just listen to you. Right. Like that's like it's really insane, right?
Um, but I think back to your to your original question, like, what's the value of software, I think. Like, to me, what I see, the what's happening, there's going to be like a pretty big division in terms of society, right? There's going to be and to be fair, like if you look back at humanity, there's always been the case.
There's always been like the producer and the consumer. Right. Um, and I think ultimately there's still going to be people that are going to be just consumers. Like, I, I, I'm so not really sold on all this idea of like personal software. Um, I, I go back and forth about it. Right. I feel like, like it seems unlikely to me that a lot of people are going to start making their own apps.
There's going to be like a small percentage of people who are going to do that. Um, but I don't see this to be the winning case. Maybe for the next like few years. Maybe it's going to be different after that once they all get really fast and really good. And, you know, it's really like sort of like a one, a one button experience.
00:13:41.910 — 00:13:43.470 · Speaker 3
Like making this happen. It does.
00:13:43.470 — 00:15:27.820 · Speaker 1
It. Um, and of course there is experience. There are experience today there like I'm shifting that direction. But I do believe because of people sort of in their way of, of of living and working. I also see with my friends like, like like I have, you know, and you say it too, like you see it in your network. And I bet your network is pretty successful.
There are people probably the same background to yours and, you know, like designers or people in tech, like I have friends that, you know, like they very successful, like in Wall Street, that they don't even know what Claude is like. Like they don't even know what anthropic is like. Like, I remember when I used to say, I work on anthropic.
They look at me like, oh, like they just thought I worked, like, I don't know, like, I guess a solid shop or something, like, you know, they know. And I think like ultimately that's just the nature of humanity. You're always going to have consumer and producer, but then in the producer, they're still going to be the people that are going to rely on, you know, a very strong brand or like a very strong foundation, a very strong, scalable product.
Like, I think there was a really funny case recently with anthropic, where one of the designers, she tweeted out a A bad perk of a company expanding so much is that then you start to use this very heavy SaaS tool. And she says she hates workday. She actually deleted the tweet now, but she was like, she hates workday.
And everybody to tweet is like, how come anthropic is not going and build their own workday? Because to build workday, you need an insane amount of expertise. That's like legal. Like, you know, you need people deployed in every different state or that you have. So you need all those like regulations. So it's like I think like personal software is going to be there for the people that need it for certain specific things.
But I still believe that like brand and established company are still going to have a presence because of that, because like the things that you can control just via software, basically.
00:15:27.860 — 00:16:07.320 · Speaker 2
It's made me realize and, you know, it's not a profound thought, but that a lot of these, a lot of software is interfacing with a much larger business model. You know, a lot of infrastructure that probably has nothing to do with software. And it's something that I've started to lean into when I think about what I'm going to plant my flag on for, like, the things I ship.
How do you pick where to plant your flag? You've had you've had all these things. I mean, you you've created from plug ins to your previous startup. That was really about image generation. And now you're going all in with Magic Path. Your thesis has to have been evolving. And how do you apply that to like where you pick to put your time?
00:16:07.440 — 00:17:00.730 · Speaker 1
Totally. I think my the biggest differentiator that I saw over the past year and a half, two years is that ultimately, the only business they survive are the one meant for enterprise and professional. And you can actually see this also in the bigger AI ecosystem, right? You get the Google, OpenAI and anthropic.
I think the reason why anthropic is winning right now is because they really focus on the enterprise market, and the enterprise market is the one that once you win it, it's really hard to lose the game, right? Because you lock them in. You have, you know, they have their data, they have their brand there.
So it's very hard like the inertia to go from a tool to another is much more complex, right? But when you look, for example, a case like OpenAI that really focuses on the consumer market, and the consumer market, unfortunately is not great because like, you know, it allows you to there's a lot of bad actors.
There's people that don't want to pay their people. They're going to, you know,
00:17:01.810 — 00:18:41.150 · Speaker 1
really abuse your service. Right. But enterprise is a much more sort of clean cut type of experience. Right. You sell by the seats. Um, and so my thesis, especially with Magic Path, was I think there is a need for a tool that is not just, hey, I'm coding thing for fun, but it's actually something that really fits into the workflows.
And, you know, things like the Figma Connect I think was like a big sort of, um, interpretation of that. And that's like the biggest virality I've seen from the people talking about Figma Connect. You know, it's funny, it's been this it's been like, this is the new flow for designers. You make it in Figma, you go to Magic Path and then you either continue their or you bring it to cursor.
Right. And I think that's what's important. Right. Because you can spend so much time building all those apps, building all the different experiences. But if you don't nail even just one very specific workflow, it's really hard to survive. And so my thesis has always been like, how do I integrate myself into existing workflow?
Or in this case with Figma Connect? How do I create a new workflow? Like how do I create a new space for myself? What I see. Nobody was really competing. No. Even Figma was competing in that space. Like they even themselves give up, right? They're like, oh, this is never going to work. But we made it work. Right.
And now how do they sound? And boom, there's a new workflow and there's like literally thousands of tweets that talk about that. And I was like, here's the new workflow for design in 2026, which is which I think is really fun. And so I think for me, if you stick to your ideals and if you stick to your intuition, what do you think the market is going to go?
At the end of the day, the market is the biggest instructor, right? And the data and the results will come because like you just sort of follow that the specific path.
00:18:41.750 — 00:20:01.100 · Speaker 2
Yeah. And you know, the thing that we're exploring this years this quarter's survey is about the role of prototyping in software development now because it's like, yeah, indie indie teams me, I can ship software that mostly works now. And it looks and behaves and does the things I want now at scale. It probably still has a lot of issues.
And I'm hearing like, I have a friend who works at DoorDash and he's like, I'm really trying these tools. Like I'm trying to figure out how to use this in our workflow. And I'm just like, it's just not doing it. It's not, you know, that we have so many constraints. We're working across multiple legacy code bases.
There's like some some it's like, do I really need to prototype or vibe code and interaction pattern when we kind of already have this like static documentation? You know, they just have such different needs at certain sizes. And and so my you know, what I'm trying to figure out is, well, where where is prototyping?
Uh, where does this fall into the entire process. Like you, the designer might not be coding right now, but you can spin up like a full fidelity version of what you have in mind and bring that to the table of stakeholders to make decisions. And and so my my question to you is like, how do you see magic path being used right now with this focus on enterprise.
00:20:01.100 — 00:21:06.670 · Speaker 1
If you work on a big corporation, there's a lot of red tape, right? Like things need to be approved. Your stakeholders need to agree. And for the longest time in history was all being done by the PRD, right. You have this like, static document that only the PM will understand, and then the designer maybe will understand it, and then the engineer forget about it.
Because if the designer, you understand the engineer is not going to do it right. And so now you have this incredible tool which is prototype. And it basically turns that pure D idea into like something that's more immutable and shareable. Right. And so for us, like we're magic really like court like a really interesting space is that, You know, people are making all those those things into a canvas.
They're making all those ideas. And so instead of saying like, oh, you know, I come up with one thing, you now have 20 different prototypes you can share with your team. And then each file, each and only each canvas is shareable. So everybody can just go there and like, you know, visualize it. But then each single design is shareable.
And so, for instance, one of our clients told us, well, Magic Path is replacing loom for us because for example, like even let's say that like let's say you're like you're using like a
00:21:07.910 — 00:24:51.930 · Speaker 1
lovable or a cursor, you still have to know, like you know how to deploy things. But we made it. We made it so simple for people to just like, grab the link when something is generated that they don't have to go and record the loom anymore about it, right? Because you have to deploy it, or like they have to run the localhost or all this like really complex thing for people that are not like engineering first, but you know, you just shared the link into slack and now all your team can just like go and play with the prototype.
Right. And so there's that one element first that it's like I think the, the, the prototyping clearly parodies. But then there's the second element that you touched by, which I think is also important to to talk about it, which is some people don't they don't still see the value of this. And I think the reason is because and this might be my hot take, we did this wrong.
And I tell you why we did this wrong. So when you look back when vibe coding started, right, I think the premise were good, but we went too much over one direction where it was like, oh, you know, there is this idea of the text to app, right? And I think that works wonderfully for somebody that is starting a product from scratch or has never done, uh, build something with coding before.
So there's extreme value in bad coding. And of course, like it's a huge market. Right. But I think what that left out was this idea of like, well, you know, coding is not just this empty vacuum, right? There is like so much more around there's like the libraries that your company is allowed to use. There's the infrastructure that your company is allowed to use.
There is the identification system that your company is allowed to use. And so I think like we are most kind of like forgot in a way like 30 years of tech, right? Because we were so excited about this technology. And of course there was like an insane incentive from a money perspective, right, that we push people into this direction.
And so, of course, what's happening now is that people are confused, right? Because like if you if you were as a designer, go to your engineering team and say, hey, I made this thing lovable. The engineer is going to be like, I'm sorry, this is great. But like, what the hell I'm supposed to do with this? Like how I'm supposed to fit this into our system?
I will have to regrow this from scratch like nothing is usable, right? And so we took a different approach where it was like, well, front end is interchangeable, right? Front end is like, especially if you work on web, right. Like 90.9% of people they use react. And so for us we only focus on front end like we don't actually do backend, we don't actually do like, you know, you can do it if you explore your stuff into courser if you want.
But that's where we think the real experience from a design and product perspective should stop. It's just like you should care about the front end. First, make that really, really good and detail and as good as you want it. And then only once you're done with that, with the help of AI, you can go and integrate that with your existing ecosystem or give it to your engineer.
Right. And so in a fast in a funny way, it's almost like the difference between like fast food and slow food. And I don't know if, you know, I come from Italy, so I have like a background and I really like, you know, taking like this, like six hour lunches and like stuff like that. But it's just like, in a way, it's kind of like that.
Like, I think vibe coding is a bit of like fast food, like it's great. Like sometimes you need it, right? It tastes amazing. But then when you look back, it's like, hmm, this is going to upset my stomach a little bit now because, you know, it's not working in any of these other stuff. Um, and so I think that's the problem that people are having because it's like this industry just telling them, it's just like, this is the way you have to do stuff.
This is the way this is stuff. And so I'm on the opposite side of things. I'm like, hey, actually, if you trust me, I think there's a better way to do this as Assemble is a work in a team, right? I think if you're a single person and you want to build your company from scratch. Yeah, I think by coding is a great thing.
But if you want to take your, your, your time, if you want to take a step back, enjoy a little slow food. You know, a nice pizza margarita, you come to magic path five.
00:24:51.930 — 00:27:13.480 · Speaker 2
Coding is Taco Bell and Magic path is margarita pizza. I think that's that's fantastic. But but also, you know, this year specifically and I've been paying attention to this for the last few years, but this idea of round tripping, right, going back and forth between code and canvas, everyone's tried to solve this, right?
We had Zeppelin really trying to solve this. We had like, you know, we had permeation like these little different versions of like, well, here's one way you can do handoff. Like handoff is what we called it for a long time. And that seems like a dying idea, but it still is happening. Whereas this year it feels like round tripping is kind of this white whale.
And it seems like from what I saw with Figma Connect and, you know, because all of us are trying to find these loops, how do I take the thing I designed and give it to a, you know, a tool that will turn it into some code? Either I want it to turn it right into the app, or I want to turn it into some code so I can give it to an engineer or whatever.
And there's like playwright, there's just taking screenshots. There's MCP that you talked about, but Figma, connect to me is what you brought. I mean, because really you there's a couple ways into Magic Path that can like back into your existing setup that I thought was fascinating. You have the web copy, which is huge.
I mean, I can vibe I used it this morning. I vibe coded up our whole talent network and then I use web copy. I do, I use web copy on my localhost just to pull it in. Or I actually had a version pushed up to a stage and I pulled it in. And then I'm in there like tweaking my table. And it was just it was the wildest loop to be able to create.
And then with Figma Connect, we've got like one of our designers working on another view and I pull that over and it's like a one for one representation. That works. And it made me say, and I and I think I said this to you last week, I was like, dude, I think in 2026, like, we're not going to just get closer to solving round tripping.
I, I think we're going to solve round tripping this year. And I think, like, I think you just like, elevated a real promise of getting closer to that and solving round tripping, I think is is going to introduce a lot of creative ways that people are building this stuff. Uh, how are you? I mean, like, how is it being received right now?
You got a million views on that Figma connect tweet. How are people actually using it right now?
00:27:13.520 — 00:30:49.220 · Speaker 1
Well, we've been completely, like, floored by their reception as being probably one of the best things that we launched in terms of like, you know, the way that people have reacted to it. And I think there's like a couple reasons. One, of course, that you mentioned is like the fact that it's just 1 to 1. Right?
And I think that is mind blowing people, especially because we also preserve the assets. Right. And the your icons are there, your images are there. Everything that wasn't your design is there, which has never been done before. MCP can do that, right. And so I think there was this instant gratification, right.
Going from something that you spent so much time to it, like refining you, you know, hours into those pixels to something that now it's like alive and interactive. Because another thing I think it's interesting to talk about from, from a, from a technical perspective, as you mentioned, the thing works, right?
And that was a very sort of active choice myself and, and my co-founder, me from the start, what he was just like, we could have made it just imported this, this static figma thing. Right. But then what would be the fun in that? We wanted to kind of like go a little extra level. What it's like. No. Like if you have a view, it scrolls.
If you have a button, a hovers, like if you have a search bar, you can tap in it, right? But it's very intentional. We made it. So there is a there's like you know, we call it make it even more sort of powerful. Like maybe like it makes another view or like things like that. But then at the end of the day, it was like, this is all about precision.
It's about like how we can take your vision, make it real. Adding a little bit of flavor without taking you out from the picture. Right. So of course the overstay will match your designs. Your your things will be clickable. The input would be input and stuff like that, but nothing more than that. Which I think it's really resonated with people.
It almost feels like a level of respect to their craft, and I think that's what's really resonating in a world where for the past two years, the biggest thing is the biggest sort of drama is being like, I cannot do good design, and I can just do, you know, the AI slopping up all my design? Now, finally, you don't have to complain about this.
Like, it's funny. Every time I see a tweet, everybody say somebody say it's like my engineer can never match my figma design. Boom, I post figma. I was like, now you can't complain anymore. Like, it needs to shut up now. Right. Um, and so I think like, there is like the that's that's the reason why it's been, it's been received so well because it's just such a visit notification.
And also another interesting thing from a from a product perspective for myself as a CEO, I think like as magic, magic path is right. And what all the things that Magic path does, AI is also so it's so much into people's faces right now. So right. So it's really hard to sort of like impress somebody, right?
But when you do something like that, when you, when you take like, well, for years was like the holy grail of designs, like how do we go from design to code? I mean, think about the millions of companies that have been trying to do this. So the millions of company they're trying to do this via like no coding experience, like you have like bubbles for like many, many years.
Right. Like, I mean, I can mention like a million company, right. And so for the first time ever, like, now this thing works. You can go from a, from a design to code, right. And once you have that, that's just a starting point for you to create more of that style, creating more views for that design, adding new functionality, opening to cursor whatever you want to do.
Right. But the base is there. Your ideas are there, your craft is there, your font is there, your typography is there. So it's just like it's just a no brainer. Basically. Like I have people like I maybe got like 100 emails the past weekend or people just saying like, hey, I use this thing. I subscribed. I was like, well, it's it, you know, it's it's like that.
Good.
00:30:49.260 — 00:31:29.760 · Speaker 2
Our labs team right now is working on like creating a mini audit picture for you to give you just our take on what we're seeing. And the question that's coming up is and we're trying to figure out how to answer this because like we I realize this is a really hairy question. What makes a good canvas editor, you know, like from quality of life to like, critical must haves.
Um, and so we when we were going through magic Path and thinking about how to, how to create this lab audit, that question came up and I realized, oh, that's a really complex question. And I do not envy you for having to solve it.
00:31:29.800 — 00:32:51.930 · Speaker 1
It's it's really hard and actually. So there was a tweet I saw the other day that was very interesting, uh, which basically resonated like with the way that I'm thinking about Magic Path. But it was from Card Party, you know, the, the, the famous AI, um, engineer. He, he was like, oh, you know, the the ultimate interface of AI is canvas, basically.
Like, I think the idea right now is that, you know, like chat interfaces are just, uh, the branding, right? It was like kind of like the morphic version of iOS apps. Right? And there's like so much more that we can do with it. And I think canvas is the right thing. But then the issue with canvas, if you do something like this is a canvas in code, don't really go hand to hand.
Right. And so we're we're basically I still believe we have the best model editor of any of those apps when it comes to like the code that you can edit right away. But there's so much work, there's so much more work you can do. Right? Um, and I think like to me there's like like I think for me, like the magic editor.
Like the manual editor. I think it's probably like 80% of what it should be. And we're working on a lot of features. It's going to really bring it to parity, to Figma, like, you know, things like multi select and like maybe move from one thing to the other, like stuff like that, which we give for granted in general canvas tools because there's so much easier.
Right. Because every canvas tool is basically just a representation, a representation of some form of JSON file.
00:32:51.970 — 00:32:55.810 · Speaker 2
We're looking at Figma on the right and magic path on the left.
00:32:55.810 — 00:35:04.960 · Speaker 1
So what I'm going to do, the way it works are you do command L that you're going into magic path, and then you paste it like simply like, you know like you will paste anything else. We come and leave. Um, and then I'm going to do a few more. So let's see I'm actually going to do this one. I always love this one. So again command L and then I'm going to paste it.
And you can see like another important thing for us was like how do we make this experience. Feels very designer first right. Very native first. Like I think like the idea of just having like, your figma in one window and like something that turns that into code in another one is just like, so powerful that I was like, we have to make that work.
And luckily we were able to do it. And so I'm going to also copy this one. This is like a fitness app to kind of just show you like the breath or different things you can do. And so all of this stuff should be done in a second. And so I did like a two websites. Oh and then let's also do this one. It always blew my mind because it's so complicated.
So I'm going to copy this one and I'm gonna paste it as well. And so I think what's important to sort of like emphasize with this experience is that like what we're doing here, like we're taking something that is like extremely complicated, like a figma file. And just to give you some, like some, some nerdy details of people might appreciate this Figma files, or I will say Figma designs are like one of the most complex, um, Nesting of information.
You can basically work with like even a very simple component. I can imagine like a card that say just like sign in on it. It might be maybe like 500,000 lines of code. It's actually crazy. So the idea why I keep saying like, hey, look, MCP doesn't work is not because I'm trying to be, you know, mean against MCP necessarily is because, like, MCP just don't get to the point of what you actually are like need.
Because, you know, like that context is just so much for AI. The end up's not. It basically ended up like not actually making the things like you want it, right?
00:35:05.000 — 00:35:13.920 · Speaker 2
So majority of the context coming from Figma MCP is just like, I don't I don't, for lack of a better term, like porting into the actual source of what you want.
00:35:14.640 — 00:39:48.280 · Speaker 1
Yeah. So when you use a Figma MCP, you're basically taking the Figma node and just convert that into into something. And so you see here when we're making. So once you start producing that you know, things get down pretty fast. And so now what I have here. You know, I have this like, website, right? Oh, what's cool about I can like, share this.
Right. And I can like, you know, you can see like, things are like, you know, there's, like, everything is there. Like the images are there, things are interactive. You know, there's like, uh, like there's like, little overstate. It's like very tasteful. Like what I was saying before. Things are very tasteful.
Well, like, look at this. It's just insane. Like. Like they. I really understands how to use that information and, like, making it a way that makes sense. Like, this is just beautiful. And, like, even the fact that, like, you know, the header was using, uh, a serif font and the Subahdar was using a sans serif, it even kept that, which is really cool, right?
But now. Oh my. Oh my God. I mean, look at this. Like, every time I see this one, I'm just like, how do we pull this off? I really don't know. Like, look at this. Like, this is code, right. And so just to compare it to the, to the female design. Right. And so check out what this has done. Right. It extended the page, right?
He understood the intentionality around, like, what this design was going to be. Right? Like, it's just insane. And of course, like, here, it's like the window is small in this figma design. So, like, the things are sort of like resizing, but if I resize, see, it remembers that on Figma it was like 2 to 3, right?
It's pretty crazy. It's like and then it's just like, you know, it's just like even this little like pattern here, right? Like the fonts, like everything is there and like, this is real code. This is all things that you can just go. And now what's crazy about this? Once I have this right, I can just like. And so this is actually something that funny enough.
We we launched this today. So before when you use Female Connect it will just import your design. But now what we did we added back the magic path agent. So it gives you like intentional uh, potential changes into like what you want to change about this design. So it's a very quick loop into like, oh, going from your design that you just brought to something else.
So for example here, it's like, oh, this is your premium operative website. Blah blah blah. It's like, should I wire up like a stock list locator so people can actually search for nearby store? I can also make a product card clickable to show details for further information, so it understands the intentionality behind the designs.
Right. Which is like really cool. Here we have like you know, the the a fitness app. Let's see. It says one meter wire up the workout cards. So tapping on them launches into different experience. Right. But now what's really cool is like, okay, thinking about this stuff that people are not considering, they can do with this.
So, well, first of all, of course I can go here liking course or I can just type when I want. Maybe I can say like, oh, make you know, the main viewers lights up when I scroll stuff like this. But because we also have basically like the best mono editor of all of those tools, you can like move stuff around. Right.
I can go here and I can say like, oh, actually, you know, I don't want this to be green. I want it to be blue, right? It's pretty crazy. So very quickly, you go from this like one design that you did to like something that you can edit right away. And of course, if you in this case in Figma, we are using Munroe as a font.
It's there, but I can also change it to Poppins. This is actually a preview of a feature we haven't announced yet, but we're adding custom font. So for the listener of this podcast, custom font is coming up soon. So meaning you can bring your own font now to Magic Pop, which I think it's amazing, right? You make something with AI and you can use your custom font.
But then another cool thing we had today was, okay, let's say that I have this design from Figma and I really like it, but I want to create a design system around this, this, this Figma design now, right. So what I can do here, I can click on more option and I can say extra team for design. So what this is going to do is going to look at the Figma design that we just imported.
And it's going to create. It's going to give us the color palette, the typography, the effects and rules. There's not going to be any rules because rules are stuff that you should add, like things like I want the animation to always go. And so look at this now we went from that Figma design. So you recognized that, you know, there's no rounded border.
This is the primary corridor. This is the foreground. It also does a dark theme adaptation for you, so you may have to worry about that. You can select which one is the default mode when you generate. So in this case I'm going to leave I'm going to leave light when I go to typography. See my font is there body font is more rope.
Is using the right typography scale the same in the design? I mean insane stuff that we can do this type of stuff right now, right? So now this feed.
00:39:48.320 — 00:39:52.520 · Speaker 2
In, does this feed into a design that I want to create? Yeah.
00:39:52.560 — 00:40:13.319 · Speaker 1
So check this out now. So this is now it's like you even extract the name for the website right. So the website is called AirTran. So he called the team AirTran. So that's already saved. So now I can go here I can if I can create I can either edit it okay. Something new I can say I don't know, make us an ink card with a side image.
And I'm going to go here into team and I'm going to use
00:40:14.560 — 00:40:45.130 · Speaker 1
boom and I'm going to use it. Another really, really cool thing you can do is that I can say I can start a new design and I can say, hey, uh, create the screen for a financial app based on the design of, um, tablet. This thing is called tablet, I guess. Uh, making sure it's the right one. There's two issues, the right one.
But let me just. This is two cold tablets. Um.
00:40:45.690 — 00:40:50.530 · Speaker 2
So you referenced the component and it recognized it as like a keyword or something like that.
00:40:50.570 — 00:42:35.440 · Speaker 1
Yeah. So you can basically one other thing that a lot of people don't know in Magic Pop, you can actually once you. And so I think this is also an event. Going back to your question about what's making a canvas a great canvas, right. The great thing about having now this on a canvas is that you can reference all those things together, and it's a very visual way to build your app.
Right? So like this is a very hard thing to do in cursor because you have to like a lot of you and I'm not talking to cursor but applies to basically every every five coding app. Right. You have to load that view. Look at the view. remember how it looks like, right? But now what I have here, I just like, you know, I have, uh, this.
So this is like the the here we make like a signing. Signing card is using the design system, right? And this could be, like, the perfect signing card to, like, get into this. Right. Because using the same design system, the same component. Right. But this one will actually use the components that you see here because I mentioned the design.
So this was like a new design from scratch creating using the design system. And this instead is oh, now I'm going to make a mobile app that's based on this particular design. Let's see. And also I don't know if you notice how fast magic path is. We also the faster I post a bunch of stuff around this like a couple weeks ago.
But we are the faster agent across any tools we compare us to. Lovable like Lobo takes like eight minutes to do. What we're doing right now here is taking like, I don't know, like a minute and a half. But that's also because, like, it's a very look at that, right? That looks straight up something that could have come from that design.
Like it's using the cards correctly. I mean, that's just beautiful, right? So that, to me, is the magic of a tool like this. It's a very new way of working with AI, where you're just not limited from that single view you're working on, but you can just integrate all those things together and it just works beautifully.
Right. And now I'm.
00:42:35.440 — 00:42:41.320 · Speaker 2
Like, now I can come in and start tweaking this and manually designing it to to the extent that I need.
00:42:41.320 — 00:42:51.960 · Speaker 1
To. Exactly. And look, this is actually even crazy. I just realized this. So look at this. So this is the WebView. Let's go into Mobile view. Look at the little thing that he made here. Look how predecessors.
00:42:53.000 — 00:44:56.510 · Speaker 1
I mean this is just insane. And now of course another thing I can do, I can duplicate this. Right. And I can just see like a comparison on my mobile view with my web view. I mean, it is it's just unbelievable. Like, it's just unbelievable. Um, another thing you can do, which is this is what gets really exciting.
I'm going to create a design system out of this one because I'm very curious what this will look like. So I'm going to extract the team from the design system. And by the way, this thing that you can do. Like from any you can do it not only from Figma imports, you can do it from any design that you construct. So let's say you're working on a design, you really like it and you're like, oh damn, I really wish I could turn this in the design system because I really like the design.
I just construct and maybe edit it. Now you can, you can just turn it into a design system, basically. Um. Oh, that's just beautiful. Look at that. Like the fonts. Like all of that, right. So, so this is what's really cool now. So I'm going to I'm going to blow your mind a little bit. So we also have this thing that it's sketch to design right.
So let's say I'm working on a share card or like an invite invite invitation for a party to announce that, you know, I'm working on this thing called velocity, which I guess is a bar, right? So I'm going to do this and I'm going to say, uh, invitation opening my new bar call. Okay. Um, and then I'm going to be like, like, uh, can I see, like, a little thing here.
And then I'm going to say, uh, Imma g so the model knows that there's going to be an image. So basically I'm just drawing a wireframe. And so the way you do it we have all this drawing tool here we have shapes. Here we have text. We have draw three. Draw. Um and then I'm going to say here, you know uh I'm going to use a text and of course you can.
You can also use the same keyboard using Figma like T for text, A for stuff. Um, so I'm going to say, um, you know, date of the event and, um, location. Right. Um, and then maybe like a CTA, something like when I say CTA. Oops.
00:44:58.430 — 00:45:44.489 · Speaker 1
So now what I can do, I select this whole thing, right? I say make it real. Of course, we didn't use the component reference, but you see it used it like the colors and like the fonts from that design system we just created. Right. Which is really cool. So it's like a really quick way to take any things that you create and turn it into some typography system, some color system and stuff like that.
And so now these are the cool thing. So let's say I have this view in this view right. So those were all both like Figma import you can see like you just import them perfectly right. So one thing you can do now I can go into this component and I can say, hey, when I tap on the second tab element, uh make the explorer view
00:45:46.130 — 00:49:35.790 · Speaker 1
up here. Right. So basically we are connecting these two things together. So now when I click on explore boom I'm in Explorer. But this is code. Now let's connect together. It's not just a prototype sorry. It's not just like you know like a figma prototype. You just like static static static. Now this is all code now like this works like this.
Works like the things that hover like over screen. Right? Like. And it's like in iOS kind of hub format, right? Even remember that when you open that tab it needs to say explore like you did here. Like of course. Right. Which is really cool. And so like it's a it's a, it's almost like you go from like your original like visual idea that you had in Figma combine and really change almost like clay in a way.
Like it's almost like a really fun, playful toy. And to me, like when I, when I think about like the the future of design, to me this is the future of design. It's not like, oh, let's just like, make designers forget everything they know about their craft and everything they knew about, you know, what they love about their job.
Because at the end of the day, it's like if we remove the love that people have for their job, I think we fail for society. I think we fail as a society. Like like, I don't think like when we tell people like, oh no, now you have to design in cursor. Are you guys crazy? Like, like you're going to alienate an entire generation of designer just because you want to pump your your your your evaluation.
I think it's crazy to me. Right? I think designers should do what they love. Like, they should put stuff on a canvas. They should perfect their their craft, but then they should give them the tool to actually understand. Like, how do you turn these things into code? Right? And so do you see here when I go back to the idea of like the tasteful thing.
Right. It's like, oh yeah, this, like little tasteful animation, right? Like even remember that here's like an SVG that needs to look like a month. I mean, pretty crazy stuff, right? Um, but what I was going to show you now was like, okay, now we have this thing, right? We also have variance and flows. So I say, okay, I want to let's say I want to try different colors of this design.
Right. I can just do that. And I'm going to ask for two variants. So I'm going to pop that up right. And so now what's going to do is just going to make two design variation of that, which is not going to change the design, but it's going to change the color because we ask for it okay. This has an about page, right.
So I can go here, I can do flow and I can say okay make the above page. So what's crazy about this now because you already have all the good design content that came from the Figma file and all those components. He's just going to make the page. He's going to look like that page. Right. So you have to design the thing once, right?
I mean, it's it's actually pretty crazy when you think about it, right? Like, it's such a new way to explore and do things with design, while of course always have code that you can open in curves or open in anti-gravity. Um, copy it directly if you want. Right. Like, you can really just do whatever you want.
But I think, like, this is like the thing that once people are going to start clicking to it, it's going to be really, really tough to give away because it's like, okay, now I get this. I can go back to like my original like, like type of workflow where I have to go into MCP and like start one single view and then understanding all these different things right here, I can just like bring my design and then just have fun with it.
I think, I think like I always joke with my my team, right. I think like I always like to say the reason why it's very hard to compete with us is because we're just having fun, like, you know, like we're just having a good time, right. And and I think, like, that's a really important thing. I think as a founder, if you want to start your own company, like you kind of have to have fun.
Okay. Look, how sick is this? Right? We kept the design and the. I just intentionally just changed the color. Right. It's just making sure the different variation, which is really cool. And of course, like, I just say different color, but, like, let's say a different color, like a cyberpunk style. Different color.
More warm, different. You know what I mean? Like I left the prompt like, very well. Like I could have say, convert this in Japanese, right? Uh, which is really sick.
00:49:35.830 — 00:50:31.440 · Speaker 2
I wonder if it would be. And I'd be interested in trying it because I wonder if I'd get value out of it. But the initial thought for me right now is I'm just trying to connect all of the tools that I use to my authentic workflows. I want a notion document spun up with the PRD. I want a prototype stage set up when it's coded.
I want a magic path set up from that coded base with my design system and with the ability to to canvas edit what I've generated in code all in one fell swoop. But then I want it spun up immediately in Magic Path, so that then I can open up magic path and then start working, because I kind of have like an abstracted layer of how I work.
I work with my bots through slack, and then I'll go and open up a CLI or a cursor, an IDE to look at the code when I need to, or open up notion to edit the document if I need to, and I'll open up magic path to edit the design if I need to, you know what I mean.
00:50:32.120 — 00:50:44.400 · Speaker 1
How would you feel if like Magic Path was accessible via slack for you? What do you like? You just passed the Figma link and he mixed up the thing for you. And then that code base can be seen by your agents.
00:50:44.800 — 00:50:54.360 · Speaker 2
That would be really interesting to me because right now I have a slack channel called garage, and it's just me and some agents and and that's where a lot of work is getting done.
00:50:54.400 — 00:51:01.160 · Speaker 1
You are so advanced like you are leaving already in the future. Like like you're like the top, like 0.1% of.
00:51:01.400 — 00:51:06.360 · Speaker 2
Which I acknowledge. I acknowledge that, like, I talk about this workflow with people and they look at me like, what do you mean?
00:51:07.000 — 00:51:15.220 · Speaker 1
Yeah. They're like, it's like, what are you talking about? What are you. You're you're in a child with three agents. I didn't FBI, a CIA. I don't have their phones.
00:51:16.580 — 00:51:27.540 · Speaker 2
But but, I mean, it's, you know. And so that's why I was like, I texted you last week, and I said, hey, any any, uh, you know, you're thinking of opening up an API or some sort of skill or something, because that would be fun to play with. You know.
00:51:27.700 — 00:51:53.260 · Speaker 1
Like, imagine if, like, every vibe coding tool get access to this feature, right? Like you're instantly elevating every coding tool in the world. Um, but I think for now, like, we kind of want to make sure, like, you know, people get to experience like the experience that we wanted to experience it. And then, you know, they can just go and, and potentially maybe one day we'll do, we'll do the, the API thing, but uh, but I but slack is coming.
Just so you know, that's why I was asking you.
00:51:53.300 — 00:52:47.150 · Speaker 2
This is just absolutely incredible, man. And I also one thing that's like continued to pop up through this conversation is just how fast you guys are shipping. And I and my favorite tools of the last couple of years are coming from these teams who have a shipping cadence that just seems like it seems crazy how fast some of these teams can ship and you guys have that culture.
There's a lot of designers out here right now who are trying to improve their workflows. They hear us yapping about all the hype of these different tools and agents, and they hear me say something like slack, and I'm working in my channel with my agents, and, you know, they what am I supposed to focus on? How does this actually help me right now, today?
What do you say to people who want to play with magic path, who want to play with the tools but have a sense of overwhelm, and also aren't sure how to plug it into their existing workflow?
00:52:47.230 — 00:52:52.830 · Speaker 1
Totally. I think it's a great question. My suggestion to people is go where
00:52:53.870 — 00:55:09.560 · Speaker 1
they're basically go to the application of products. They're trying to meet you where you are, right? I think a lot of products, a lot of application and taking the opposite approach, which is like it's either our way or no way, right. And I think like the Figma connect for me in a way, is also like an unbelievable thing.
Like when you think about it. Right? Because I was of course like one of the biggest proposition of like design as text or image reference or web capturing. Right. But I really believe there's this element of craft that you just cannot remove from designers. And there's an element of the need of moving things mechanically around.
And like having a almost a comfort space of a few hours where they can play with it, to then feel comfortable to turn something to code that is so innate to the designer. And so my advice for every designers, they're there. You know, this feels very overwhelming because I completely agree with you. It's like it's so overwhelming.
Like every day there's a new tool. Just go to the tools like, you know, use all the tools, try them all out. Right. I don't think there's like the in there, like there's like the best overall tool or the worst overall tool. I think at the end of the day, it's just like what works best for you, right? And if you're a designer that it's really cares about its craft and it's time and the way produce things.
Magic path is your place. If you are a designer that is just like once you quit spun prototypes and, you know, do all this thing. This could also be your place, but it's just not something that, you know, you're gonna, you're going to use only for. If that makes sense. So we want to make sure like, everybody sort of feels heard.
Right. And so it's really basic like what what works best for you. And at the end of the day I think, like you, you see the results, right? Like like here. You see, we did the floating like we went from a home page on Figma to something that it's like the about page, and it just looks like the same designers did it, although there's like a crazy animation happening here.
Uh, but, you know, it's like now it's the about page, right? We don't have to design that. We just. We already did it, right? Um, so, yeah, it's really like choose your own adventure type of type of thing. I actually don't believe, like, I don't believe there's ever been a better time to be a designer because you have so much choice.
But then, as overwhelming as you sound, just stuck to your intuition, stuck to your foundation, to your values. And then I think you're going to be pretty happy because there's a lot to choose from.
00:55:09.600 — 00:56:05.760 · Speaker 2
Pietro said something that I thought was really interesting, that if we remove the love that people have for their work, then I think we fail as a society because there's a version of this AI story where designers are just told to work in the terminal, learn to prompt and essentially forget the craft. And Pietro's pushing back against that pretty hard magic path is betting that designers still want to craft their interfaces by hand, have more control, make the final outcome look exactly like their design, and based on the reception of their Figma Connect feature, I'd say he's on to something.
If you want to try it yourself, the link is in the description. But if this conversation made you think a little differently about the future of design tools, please subscribe. We do this every week. I'll catch you in the next one.