Loading summary
Transcript83 lines
- [00:00]
Pablo Stanley
There is a danger in using these tools, I think, because if we delegate too much to it, we're not forcing ourselves to think. And this is what was happening with me when I was trying to do the pixel art. I'm being shaped by the tools that I use. Feels like a diction because it's so good. My belief is that we need to use it in a way that expands our ideas, it magnifies our curiosity, it allows us to go deeper, but. But also broader, where suddenly maybe that thing that was like a little spark in your brain suddenly could be amplified into a gigantic star that is full of fire.
- [00:40]
Rid
Welcome to Dive Club. My name is Rid, and this is where designers never stop learning. This week's episode is with Pablo Stanley, who's one of the people who I've looked up to in this industry for a long time. So we're going to do a deep dive into his journey, building creative tools. Everything from his. All the way to how he operates as a staff designer at Vercel, where he gets to build the future of V0. There's a lot in this conversation, and Pablo's a joy to listen to. So let's dive right in.
- [01:12]
Pablo Stanley
I'm showing Effecto, which is yet another design tool that nobody needs that I. That I wanted to make. My idea was I want to make a design tool where little robots are actually there with you in the canvas and you collaborate with the robots. And this was before Figma decided to do this. I was like, what is going on? Why don't we have agents on the canvas? So I created my own little tool for that. And I was kind of on vacation, and then I was like, ah, let me make this thing. Actually, this started not as a design tool, but, like, more as an effects tool, like with shaders and mesh stuff and all the ASCII stuff that now everybody, it's like, if you don't have a tool like this, you're not making it.
- [02:00]
Rid
Yeah, this is the aesthetic of AI right now.
- [02:03]
Pablo Stanley
Yeah, exactly. With the theater and just, like, all this stuff. So I did this, like, last year. I was trying to do it with layers. Like, how can we do this with layers? How can we add text and stuff? And then I was like, dude, I need a canvas. I need to zoom out and actually add stuff. And then I went down the rabbit hole of turning this ASCII thing into, well, this design tool. So, yeah, this is like a. Pretty much just like any framer Figma sketch, where you have the layers on the left, you have properties, panel on the right and then you have canvas, you know, and everything is code. So that's something that I wanted to do. Like the part of the challenge was like everything is actually code. And it's very opinionated because I wanted to make it in a way that what LLMs, what is their default, which is usually HTML and using divs and using tailwind classes. So I was like, okay, that's usually what LLMs love doing. So I am going to do a tool that just uses that. So like for example, here, all the classes here like by the default is that you can actually use like tailwind classes. I don't know if this is visible there.
- [03:14]
Rid
Totally. I love that you brought that in line too. That's a nice little detail.
- [03:17]
Pablo Stanley
Yeah, it's just like a. Like whatever depends on what you are selecting. Then the tools are in line. For example, this is an image. So it just like gives you like what is it going to be the fit if it's going to cover contain like a. Like a. And also opacity. If it is a box, then it keeps you like what is the background color, the stuff in the. How is it going to be the padding and all that stuff and all the controls that you would expect having here on the canvas. But also like for example here it has a padding that is. That is something you would expect from. Let me actually change this to the light theme. I prefer light theme. I don't know what it was on dark theme. Like here all the controls are like I was saying, it's all tailwinds. It has an agent like I was calling it Jules. And then here you can connect it to your own. For example, if you want to use your own CLI agent, you can do it too, like with your terminal or just use the one that is internal and you can say you can click on anything and then just like ask it like make a variation, you know, for example, it all creates it in the canvas so it duplicates it and then it's going to make a variation.
- [04:26]
Rid
I remember.
- [04:27]
Pablo Stanley
I don't know how this is going by the way. Hopefully it's working. I should have checked before John up and it does. Hey look, it's. It's changing so you can see it's just streaming the changes as they're happening. And since again, since the canvas is actually a reflection of the code is you can just like see it live
- [04:42]
Rid
happening, you know, real quick message. And then we can jump back into it. If you still haven't tried paper, even though it kind of Feels like everybody on this podcast is talking about it lately. They just made it way easier to get started. Because you can now copy and paste from Figma directly into Paper's canvas. All of the layers and their properties, including images and SVGs are imported in an instant. It's pretty big deal. And you can try it out today. Just head to Dive Club Paper to get started. Framer AI Agents just launched and it is exactly how I want to build pro websites. You can get the power of working with AI agents, but directly in a canvas that is tailor made for shipping production sites. For example, I have like five different CMSs for dive, which isn't exactly my favorite thing to deal with. But now I can have the Framer agent do everything related to CMS management directly inside of Framer. And of course you get SEO, staging, links, localization and everything else that you'd expect. But honestly, at the end of the day, the thing that I love most is just being able to explore design and build with agents all inside of Framer. And if you head to Dive Club Framer, you can get 30% off framer pro to start building today. Now onto the episode, by the way.
- [06:02]
Pablo Stanley
Yeah, I kept the shaders so you can see that this thing is also still. All the effects, all the shaders still are there. And also something that I did again before Figma was doing any of this, I was also doing animation stuff. Like, I think I went down the rabbit hole of just like I want to build my own design tool that does it all. So you go to animation and then you could just like animate anything, the whole timeline. But the timeline is. I was like, I don't want to deal with the keyframes. I really like how animation is done by other tools. Like, what is it called? There's an animation jitter. Yeah, exactly.
- [06:40]
Rid
That's my favorite tool.
- [06:41]
Pablo Stanley
It's actually, it's more about you're editing the animation, you're not editing the element. So like for example, here, let's see if the AI. There you go. So like now the AI made all this animation for you and then you can just like edit almost like shapes, you know, like all of these things. You can. I want it to be a little bit snappier, so it lacks a little bit less, you know, so you can just like select any of this. And now it's still too slow. So it's almost like editing rectangles, you know, now it's a little bit snappier. You could also do stagger, just like a, like a subtle Staggering, you know, so. So that way everything is staggered.
- [07:18]
Rid
How long did you spend on this? I mean, because you've built so many full features, but also there are a lot of little interactions and thoughtful details and this is quite impressive. What are we talking here?
- [07:27]
Pablo Stanley
Couple of months, I think. It's weird because I spent a very long trying to make this thing affect effects. I spent a solid month and a half. This all works in shaders and it works in 3D and I was trying to make it work in 3D, you know, so like, I was actually. Let me see if this is still live. Yeah, this is still live. So you can see that I was working with shaders and actually with an actual canvas and I was trying to add my own tools. So I was trying to make it work with the canvas, meaning that then I can actually add text layers here.
- [08:06]
Rid
Hi.
- [08:06]
Pablo Stanley
But this is all. This all looks 2D, but it's actually 3D. This is all 3D layers. But the LLM, like I was trying to do everything here, but the LLM gets so confused about this dude, because I was trying to do out the layout with this stuff. You know, I was trying to do Flexbox with this and just like, hey, let's make it horizontal like a command G. But this just breaks so much. Oh, man, look at that. No, no, no, no. It was just like a nightmare trying to make this work because the MA just. It's insane for it to work. And LLMs will just get so confused trying to make this work because all of this is not. Is not apparent. But this is like actually 3D. Is it in an actual 3D canvas and a 3D space with a flat camera? And because of that it's not real HTML. I spent so many tokens trying to make this work. And then once I said, like, screw this, this is dumb. What am I doing? Why am I trying to force an LLM to. To understand effect of this way? That is just insane. I'm just going to do it everything from scratch, but now with actual basic HTML. And then that's when I jumped into this. And then it was magic. Then it was so easy because then suddenly the LLM was using the actual in the canvas, the actual language that it understands. So I spent a long time on the wrong direction. I don't know if there's a lesson there, like sometimes you go down the rabbit hole, but you need to know when, when to say, like, okay, this is dumb. This is not working. The usual commentary and the usual belief is like, you have to keep pushing man, you have to. Whenever things get hard, you just have to keep pushing. And it's like, no, no, no, hold on. There has to be a moment where you say, like, no, this is dumb. And this actually happened with this too. Like at a certain moment I stopped working in Effecto. I was like, okay, this is dumb. I don't know why am I even doing this? I was building this tool Effecto and with agents and it has design systems. Oh yeah, it has design systems and stuff. And, and everything is just like something that. All of this is fed to the, to the LLM. So it's going to understand then all the, all the settings, all the ui, it's, it's here. And it's something that the LLM understands. But I was realizing that I was, that I was building a tool that I was not using. I was not dog footing this tool. You know, ideally I should have been using Effecto to build Effecto. You know, I was not doing it. I was just like straight up working with the agent. Yeah, why not?
- [10:44]
Rid
Why not? What was happening there? What was the disconnect?
- [10:46]
Pablo Stanley
Well, the disconnect is that I don't design like this anymore. That's it. Like, I don't use the canvas anymore. I use the canvas to draw, to make my comics, to do hand drawn stuff, doing things. Here I was using more teal draw. This was a cam, the tool that I was using. I don't know, like, oh, you can see that there's still some old. This was kind of like my design tool in some stuff. This was really what all I needed. I don't know what I was doing here. Oh yeah, look at that. I was doing a sketch of a dumb thing. I think, for example, this is a new thing that I was working on, a new tool and I was like, this is how I want it to look.
- [11:25]
Rid
Oh, I can picture that design. I know what the high fidelity version looks like. It's cool to see this representation.
- [11:30]
Pablo Stanley
Yeah, exactly. So this is like a. Yeah. And also like a, like a very basic.
- [11:35]
Rid
Did you ever use balsamiq in the, in the day? It was like Excalidraw and Balsamic. I don't know how you say it.
- [11:42]
Pablo Stanley
I remember about it, but I never.
- [11:45]
Rid
This one, I used to use it all the time. Like, it was so great. And part of me wonders if this is actually the right type of tool to pair with coding ap. It's just ridiculously fast wireframes and that's it.
- [11:56]
Pablo Stanley
Maybe there's a, there's a comeback for A tool like this. Actually, there was another one, I think it was called, called Whimsical.
- [12:02]
Rid
Whimsical, yeah. Yep.
- [12:04]
Pablo Stanley
Yeah, yeah, Whimsical. I, I, I love that, that tool too. And I stopped using it and it was like diagrams, but they also had like kind of a wireframes. They had this thing too.
- [12:13]
Rid
Yeah, yeah, cool one.
- [12:15]
Pablo Stanley
Like there's a comeback for tools like this because the LLM already knows. You can tell the LLM, dude, this is just a wireframe. This is just to show you the, the flow, but use my design system. You already know what my tokens are. This is starting to sound like.
- [12:28]
Rid
And I don't even really care about my tokens in the canvas that much. Like, sometimes I do, sometimes I do, but 90% of the time, like, I just want a rough approximation and then I find myself giving the disclaimer back to the models. Don't use the exact designs from the canvas. Prioritize the design system. I've made that prompt 500 times.
- [12:48]
Pablo Stanley
Yeah, yeah, exactly. Like a. Take this only as a guideline.
- [12:51]
Rid
So you have this moment in time. You have this moment in time. You've been using Teal Draw. You're realizing you're not dog fooding your own product. Then what?
- [12:57]
Pablo Stanley
Yeah, it wasn't really for me, honestly, I was more like a building a tool for like, people in marketing. I feel like my whole shtick for my whole life has been like, trying to make design more accessible and more, I don't know, the democratization of design in a way, that was my whole shtick. But at the same time, I was realizing, no, but my, all of my, my actual work is happening in the terminal and it's happening with these agents, you know, so. But the thing that I've been feeling lately, man, is, I don't know, this stuff is pretty isolating. So I built this tool, by the way. Like, this is my most recent tool. More than anything, I wanted to work with agents, but in a collaborative way. Because something that I noticed, like with my team at Vercel and V0, we all are using these tools. You know, we're all using agents, and we're all using them on our side. You know, we're all using them on our terminal, on our computer. We use a tool called Gather and we use standups and we on Slack and we share the things. You know, there's this kind of a disconnect from what you're doing and who is actually doing it, because you will go. And it's just like, hey, we need to work on this. And then you go with your agent, you know, and you go to the terminal, to the black void, and just like, hey, dude, let's do this. And then it does it. And then you go back to Slack and say, like, hey, guys, look, I made this. You didn't make this. Everybody knows you didn't make this. And it's okay, we know that you used an agent, but you're presenting it here. Here's pr, you know, and everybody's doing this. And then there might be some feedback. Hey, this is not working. Or like, hey, we should fix this. So then you will go and grab that and then bring it back to the agent. It's like, hey, dude, you embarrassed me. This is not working. No mistakes. You know, at the end, every. At the end of every prompt, my
- [14:52]
Rid
pre prompt for everything is don't embarrass me in front of my engineering colleagues.
- [14:56]
Pablo Stanley
Exactly. Yeah. Like real engineers are going to see this. I will go, and then I will fix it and I will come back. It's like, guys, I fixed this. It. Now it was the agent. Why not just, like, have the agent there, you know? So why not have my agent be part of that conversation and actually see what others are saying? Like, a lot of the planning, a lot of this feedback is happening with other humans, you know, but the agents are like, in isolation, in a different place. And the work, the collaboration, in a way, is happening in isolation too, with this black void. Always a green robot. Let me show you the landing page. By the way, like, something that I hit is just a little here, obviously, because now we can do this. Also, all of this has music, so I don't know if you. Do you play music, man?
- [15:42]
Rid
I do, yeah.
- [15:43]
Pablo Stanley
Yeah. Okay, so maybe you have used a tool like a co o later like us or synpads. Like a. So this is in the background. It's actually a syn path.
- [15:52]
Rid
I love that you brought doodles back into it too.
- [15:54]
Pablo Stanley
Whatever I make, I will, like, bring doodles. Anyway. Let's actually use it. Let me just like, get started. It's just like a discord or like a slack, but where agents work with you, you know, and we have humans working with you, but at the same time, you can just like, talk to agents. This is what I wanted to do. Just like, hey, can I bring agents to do stuff? You know, and you could connect like Claude code or Codex or Cursor and they run on your computer, or you can just like add an agent that runs on. On a sandbox. So, for example, let's ELO read. Let's call it ELO Read. You can give it instructions, but really it's just like a. I don't know, like a system prompt, if you wanted to. But it's already good, you know. Hey, can you add a little Easter egg about Dive Club by Ridin or homepage in the footer? Shout out. Let's see what it makes. So, oh, by the way. Yeah, so this thing is connected to my GitHub. Like, it's already connected to my repo, so it already knows. And here it's just going to create a thread and it's just like it's coding, you know, it's just like it's running on. On a sandbo. It's just doing everything. And I could have someone else's agent at the end be tagged. I could have asked Ellore to tag an agent to review its pr, but I could also at the end ask another agent to review the pr. There you go. It finished. Let's see. There you go. So, like now it created this thing. So I can go. And it's building the preview, but I can go see the pull request. I can see what was changed. So, hey, there you go. So there's an Easter egg, a quiet. And I guess it's going to be in the footer. Yes, on the footer. Typescript file. Is it Dive Club?
- [17:40]
Rid
Nailed it.
- [17:41]
Pablo Stanley
Okay, cool. So I added that. And this is just like, this is using Vercel's. Yeah, like, so it's still building it. And over here, the cool thing is that it's actually looking at the preview from Vercel. So once it's ready, you can actually just preview it from here and then you can approve it, request some changes, or even reject it.
- [18:01]
Rid
I think. Think a lot of people are feeling this shift and I think your two tools perfectly exemplify where previously. Yeah, you're working with agents, but you're on the canvas. You can kind of like touch and feel things and move things around and directly manipulate them and, you know, click and just change that padding just a little bit. Whereas this is almost like slightly abstracted way of working, you know, it's, dare I say, orchestration.
- [18:25]
Pablo Stanley
It feels weird. You know, I've always taken pride of the things that I. That I make, that I. That I put my hands into it, you know, that I duplicated the art board and then changed things around, you know, did a sketch first and then I inked it and it's just. It all feels like it's coming from my Hands. So there's a little bit of pride on that. And then we measure, I think wrongly, we measure or value or success or, I don't know, by the amount of output or the quality of that output. If you are a little bit more artistic like me, how much of that is a little bit of you? Oh, there you go. Like, let's see, is it. Hey, look at that. Oh, dude, look at that. There you go. You know what? Let's approve it. Approve, bro.
- [19:15]
Rid
Beautiful.
- [19:15]
Pablo Stanley
There you go. It approved. You didn't hear, but there was a little music. Oh, nice.
- [19:19]
Rid
Love the competitor. I think this is a hilarious microcosm of what it's like working with AI too, as an aside, where it's like you're doing a thing, you're doing a thing, and then it's like, oh, a new thing to review. And then you go over here and you review it, and then maybe another thing to review. And it just feels like I'm playing whack a mole with the agent.
- [19:36]
Pablo Stanley
A lot of our work is becoming more like a orchestrating manager, like directing of these things, you know, and it's weird because I've been having this, like, kind of a crisis where it's like, is this even me? You know, is this even mine? You know, what is this? If I'm not making it with my own hands, if I'm not actually drawing the rectangle, if I'm not writing the code, if I'm not a. I don't know, like a place in the things by myself and trying different things. And I feel it's a different way of creating. It requires, I think, a different part of your brain, you know, and you could argue that managing directing is not as creative. And that's. That's how I feel, you know, because I have seen stuff that I did, like, years ago. And, like, I can show you, like, I'm going to show you like a gorgeous. I was seeing, like this thing and I was like, dude, this was like so good. Like, I made this page and this video and it was all done. I mean, it was done in webflow, you know, but it was all along with care, you know. And actually this. These images are AI. So there was still AI, you know, the images are. These are not real people, but this is. Well, that's really me. But hey, all the. The screen recording, how the animations happen, all of this was done, like, the separation from the background from this. Yeah, I use AI to separate it a little bit, just to fill in the blanks and to separate this Photo. But all of the rest of those things, they were made in a way, actually making it. And I feel like I haven't done stuff like this. This feels more creative than this thing. I don't know. Now this feels robotic in comparison to that. This feels like. Because I had the help from AI to make and I was directing it what I wanted, but I didn't make this in figma. I didn't put this in figma. I was like, dude, like, let's do a grid. Here's. I think I did a TLDR draw of why to do this. And then I was like, dude, like, I just put some cars, man, with the image and I made a bunch of images. So just use one of those images and then put some of those. Let's talk about these things here. So a lot of those decisions were also made in collaboration, you could say, with the AI. But I was like delegating a lot of that thinking also to it, which is. Is. I feel, is. Is not great. If I continue in this path where I'm delegating a lot of the creation to the AI, I feel like I'm going to become dumber and I'm going to become a worse designer. But at the same time, you could say the argument against this, a lot of artists didn't make it themselves. They will teach others to actually make it. Like, they will have a specific way of doing things, and then they will have students actually make it. Like, Diego Rivera would do this. A lot of his murals, he didn't actually paint at all. Like, even. I'm pretty sure that Michelangelo did this. Like, he had painters, like, actually doing it. He was directing other painters doing it, you know, and he had the sketches and everything. He got the idea, he had the vision, like, also Rembrandt, he actually. Some of the paintings from Rembrandt, he didn't paint them. He would actually direct students to make this. Andy Warhol wouldn't even hide it. He would just call it the Factory, you know, he was like, it's a factory and I'm not making. I'm just signing it at the end, you know, And. But it was all, you could say, his direction, his judgment. At the end, it was his signature. At the end, it was his. I don't know, his reputation too. I don't think this is new, you know, it's just. It's accepting that using AI, like, how much of that creation you want to give it, and at what point do you want to give it where you feel I am at that level, I'm so. I'm at that level of Andy Warhol. I'm at the level of Rembrandt, where I will give. Give these AI agents the ability, the agency, to do it for me with my direction. You know, I don't know if you, you know, this artist, Saul Lewitt, he did a lot of minimalist, but he used these things called drawing instructions. Do you know about this?
- [23:43]
Rid
No, I don't. No.
- [23:44]
Pablo Stanley
This guy was the original prompter, you know, because this is how he would do it. He. He. He believed that ideas are. Are kind of a machine, you know, and a machine that creates art. And this was what he museum, you know, just like eight on a wall surface, any continuous stretch of wall. Just use a hard pencil and put a lot of points around a random and then make all those lines connect to each other. And that is what he will make. And then at the end, he will say, that's my art. I. That's. That's my art. Yes, I only gave the instructions. But even when he was dead, some of his instructions were still being used, and they were still being said as, this is a soul. Lew, you imagine that, like, there's another one that is like about like a. Like doing four inches for four hours. Let's.
- [24:39]
Rid
Yeah.
- [24:39]
Pablo Stanley
This one within four adjacent squares that each four by four feet. You will pay these draftsmen four dollars an hour. I don't know. He had a thing for four. You know, it's like, hey, it's four inches long with four colors. And then he will create a stuff like this where it's like a. It's all lines, you know, and he didn't make it, but he wrote the prompt. And this was in the 60s, by the way.
- [25:02]
Rid
It's so co. That's cool, because that's the thing. It's like in my atrophying muscles as a designer. Yeah, in some ways, I have to be. There's no way that I'm not. But then every once in a while, like, I will have an idea that I would not have pursued in like two years ago, three years ago, you know, but now I feel like I can do literally anything that I can think of. And so I have a concept that is novel and then I execute it. And yeah, maybe I one shotted it, but I don't actually care because it was the idea that was novel. But it starts. It gets so muddy because for every time I'm doing that, maybe it's five other times where I'm like, hey, show me a variation Actually show me six variations, and then I just pick one,
- [25:40]
Pablo Stanley
which is something that I'm pretty sure that Warhol did, too. It was like, guys, I don't know, like, he would just be directing the silk screening, and he will be just like, here's a photo that I took. Now enlarge it and put it there and paint it and do it in multiple variations. We're going to select some of them, and then I'm going to put my signature at the end. I mean, he also did it in a way that was of contour against just like art. You know, he was saying, like, hey, look at this thing. That is just repetitive. And that is that. You could argue that is not art. And I'm going to tell you it is art who decides what's art, Right? But you could say that a. A bigger example to what we're going through is, like, Rembrandt, a lot of his paintings, it wasn't him who painted it. And still there's historians and people in museums who don't know which ones are actually happening. His, like, with his cats, you know. But this was the deal. The deal was he will teach students how to paint like him. So at the end, there was a student who got some knowledge out of it. You know, there was. There was a kind of a. I don't know, a transfer of that knowledge to those students. And those students, like Diego Rivera, too, he would teach them how to do murals. And then at the end, those artists would be able to create their own murals, too, with that style or with a similar style, you know, so there was this transfer of knowledge that was happening, too. And maybe, yeah, at the end, the credit was going to the artist, to Diego Rivera or to Andy Warhol or to Rembrandt. But those artists were able to get something, which is something that I feel we're losing with junior designers, because that's something also you would do with junior designers, right? You will hire a junior designer who is still, like, learning, and you will teach them like, hey, this is how we use our system. This is how we use our tool. This is how, like, they will try something, and then you will try to guide them on how to do that. I feel like that we're losing that because now we're delegating instead of to junior designers, we're delegating these kinds of things to the LLM, to those things that. And we will guide the LLM to do. No, no, not like that. Not that purple gradient, bro. And then you start manually. You're guiding this thing to create an output that is okay, you know, and then it doesn't have all that AI slop, but all that knowledge that you might have and all that adjustment and filtering that will do as a potentially a more. A designer that has had some years under your belt is not going to a junior designer anymore. It's just going to another model. And I'm pretty sure all these models are learning from this stuff too. So next time they're going to not make those mistakes anymore. But then what's going to happen with the junior painters, the junior designers, that the artists who are still learning and who are there trying to be mentored, what could happen is that they could use AI as their mentor. And then that's. That's where I think we're to going. Going where those who are going to prevail are going to be those who just use the tool in a way that transforms new creations and that don't just delegate everything to the tool, but actually come with curiosity, come with maybe an idea or maybe just a question. And then they use this infinite machines to just amplify those ideas or take them in different directions. And I feel I'm. I'm excited about that. I feel like it might already be happening and we're not noticing it. And I'm pretty sure that this is happening with younger people.
- [29:05]
Rid
We say AI native, too. That's the funny thing. It's like, we're like, well, now I'm a native. It's like, no, you're not a native. You're a millennial. The AI native person is 18 years old and they've literally grown up in this, and they're going to fly by all of us.
- [29:17]
Pablo Stanley
Exactly, yeah. In the 80s when hip hop started, it was criticized and music made with synthesizers. I mean, now we accept said like hip hop, it's just like one of the top styles of music types of music, you know, and. And electronic music is the same, you know. But there was a time when we will question that and artists will question that this is not real music. You're just using samples from other musicians and you're mixing them up and you're supposedly creating something new, but you're not. This is not real music. Oh, you're using. You're not using an analog, real instrument. You are delegating the sounds to a machine that is just like synthesizing sound. So this is not real music, man. A lot of us that are our age, we question AI. I question it. I question myself using it. You know, I use it all the time. I would be dumb not to use it, honestly. But at the same time I still have that old thinking where I question I was like, I don't know if this is real. You know, a lot of my writing on this is very. I want to stay positive but at the same time my, my negative side comes. It's like I need to, I need to work on that. I need to talk to my therapist about that.
- [30:27]
Rid
There's one question that I can't stop asking myself. What if companies applied to talk to you rather than the other way around? And that question is the foundation for the all new Dive Talent network. And it's working. Like right now I'm helping many of the most exciting startups that I know to hire the designers and builders who listen to this show. So if you're curious what might be out there and if you want to get on my list, or maybe you're even looking for your next design hire, head to Dive Club Talent to join today. Maybe for a second we could actually talk to the younger designer who is listening, who is curious, who wants to go all in on this way of working, who views AI as a tool, as an instrument, and yet they don't have a bunch of reps under their belt. They don't have the surrounding environment and encouragement that comes from a place like Vercel that is very AI pilled. So can we just zoom in on parts of your workflow and what your day to day work looks like working on these models? Maybe we could use, you know, one of the recent releases. I know you just did like design mode and v0ton that went into that. Like help us understand how you are collaborating with these models on a daily basis. What it looks like to explore different ideas.
- [31:45]
Pablo Stanley
I use this terminal ghosty, I use Claude and then dangerously skip permissions. I'm like, don't ask me questions, just, just I'll let you cook, you know. So something that I do also is I use agents and which is it creates a tool, it creates a list of the things. Right now I'm just in my root folder, but from here I can just ask it anything. So it's really just a chat, you
- [32:09]
Rid
know, help us imagine a type of kickoff session that you would use when you're working on like a meaty project at Vercel. This is the black void, right? We're just looking at the black void.
- [32:18]
Pablo Stanley
Yeah.
- [32:18]
Rid
You don't even have a visual of the product surface area that you are working on. Where do you even start? How do you Even point it correctly.
- [32:24]
Pablo Stanley
One of the things that I use is, for example, I use TLDraw a lot. I use it just like a. For example, this was for design system thing that. Where I was trying to just like put together like how to display the different fonts and how type scales and also like the palettes, how to display the UI for this. And since I'm already working on the repo and in the repo there's already a design system, I don't feel like I need to go into high fidelity as much because a lot of that stuff, like the fonts, the spacing, all of those are already rules in the design system. With the agent, all I need is just like a direction of what I want to do. So this will be artifacts that I will give, for example, an agent just like, hey, I'll write a prompt just like what I want. What is my success criteria of what I think it should do? I would also ask it to. To ask me questions too. Sometimes I wonder if giving it a screenshot is too. If I'm still on the ideation part, I wouldn't give it a screenshot. And I will use it more as a collaboration tool where it's like, hey, I have this idea. What do you think we should do? You know, and then it would come with some ideas. And I had this idea, I'm thinking it should be like this, but what do you think? You know? So then it will give me some options. Sometimes it will validate my idea, which makes me feel really nice just repeating it back.
- [33:45]
Rid
It sounds like the. The vast majority of the chats or new sessions that you were doing with AI, you're not jumping right into like an execution. It is very much so. I kind of want to work on this. Maybe you have some preliminary thoughts. What do you think? That question, you said it twice. Is that something that you're asking most of the time? Sometimes. Depends.
- [34:02]
Pablo Stanley
Depends. Like some stuff is just the typography is wrong. It should be the size and you need to. There's a bug. This is not working. It depends on what stage you are. If you are. For example, here I think I was really just starting, you know, I had an idea of like how this should look, but like a one little heading and I want to drop down, you know, with a search, which I didn't make, but I. I just described that I need to draw it, you know, so in. In that case I would sometimes just start like, let's plan it. No, actually not even plan it. Let's just collaborate let's, let's do brainstorming, you know, in a way and also ask it to ask you questions is really good because then it will ask you things that you didn't even think about.
- [34:48]
Rid
I want to get a bit more context for how you're working at Vercel. So like on this spectrum from you know, ceiling of one line, tailwind fixes, all the way to shipping full blown features like how much of the front end are you actually owning as a designer?
- [35:03]
Pablo Stanley
There are different types of builders or makers or people collaborating in product development teams I think and I don't feel is the same as designers and UX designer and the copywriter and the PM and the front engineer and the backend engineer. I don't feel those division, I feel those divisions, divisions are getting blurred, you know, and, and, and those types of roles are. I don't know if they're going away. It's just like there's so much org stuff that has happened for years that I don't think they're going away. But actually in the actual work those things kind of disappear. And it's more about like who is prototyping. That is one that I think a lot of designers are doing that and maybe PMs and prototyping us in. Like I have this idea, let's put it together and let's test it out, you know, and it could be just a wild idea. And you do a lot of those prototypers are, I think making a lot of weird stuff or trying a lot of different things. So to your question, how much of the code you're doing? I think I'm in that area where I do a ton. You know, I would put a lot of code in our GitHub. That doesn't mean that all of it gets chip though. Somebody shared a screenshot. I don't know if it's still the same, but at least in that moment I was the one putting more code. Like after cloud code it was me and then another designer, Tom John, who is also working in V0. So the two designers, we were even making more code, even more than other software engineers in our code base. We're putting more code out there. How much of that was actually shipped? Not a lot. And that's because we were just trying different ideas. You know, we're like, hey, what if we do the composer that animates in? What if the homepage has more stuff? What if the homepage is just cleaner and sin? Like what if the sidebar has this? And what if the sidebar has that all of that stuff like now is happening in code. So it's kind of like instead of having a ton of artboards and Figma files, now it's happening all straight code. And you're having a ton of PRs and different things that you tried that are in draft mode or maybe ready for review, but they're never reviewed. I feel like that's kind of a good place for us to be. And PMs. Then there's the ones who perfect that code. They might take that code and then cherry pick some of that stuff to turn it into a PR that is actually going to be chipped. For example, this is another one that I chipped. This. What is it called? It's annotations. And then design mode that is over here. So annotations I added in a way that it's like, hey, you just want to. Instead of having to describe something, it's like, hey, make it bigger. You know, so now I didn't have to say, hey, the hello world, the hello, I don't know, span in the heading. Let's make that bigger. I can just point at it and say, make it bigger, you know, and then the annotation is here. So it's actually attached to the node and is doing that. So. And then another one as well. Design mode. And design mode is more just like a. More here, but actually just like using the things that you would expect. Actually a lot of the stuff from Effecto after.
- [38:19]
Rid
Just about to say there's that. There's that contextual little menu there at the top. It's cool.
- [38:23]
Pablo Stanley
Yeah, yeah, yeah. Like also the layers list, which is more like the blocks and the elements list at the nodes on the left. And then you can rearrange and you can move around and. Yeah, like contextual menus, depending on what you have. So selected all of that stuff. I built it in a gigantic PR because like this. None of this existed. This doesn't. Didn't exist. This didn't exist. Annotations didn't exist. A lot of the sidebar. This is not the sidebar. The Inspector panel that I made. This is. We're still working on this. It will be weird to just do this, for example, first and then do the layers list and then do like a lot of that stuff. You need to do the whole thing, you know, Especially when you don't know
- [39:04]
Rid
where you're going sometimes too. Like a lot of you're still exploring. I find that so tricky where I end up making PRs that are way too big. But Then I want to ship a lot of them because I don't have a big team. But I'm like, well, I didn't know how to split it up when I started. You know, like this has replaced me exploring on a canvas.
- [39:20]
Pablo Stanley
Yeah. So even this thing like these things that are like manually you can just like the gap between the words, the gap between the elements, the padding, all of that stuff does deserve to be their own PRs, you know. But for me testing it as you're saying and for me actually doing, doing it, I had to do a gigantic pr. A gigantic pr. Where I was doing it was just design mode that actually still more advanced at what is shipped because it has the sidebar here and it has some interactions here that haven't been shipped. I was the one prototyping this and then engineer will be the one cherry picking stuff and actually making it a reality. It was like okay, I'm going to cherry pick this thing and then I will put in reality, I will do the contextual menu and then I will make it a real reality. So there's that role that is of the person who maybe and I see that others have mentioned this that is, that is not the prototyper but is the one that is makes it for real more in a team. And this will be a software engineer, you know. And this depends on why you're making real. If it is just like front end stuff then it's going to be someone who knows enough of the front end and potentially some of the back end to just make it real. And then so it's performance, it doesn't break. So all the dependencies are there. So it doesn't like you're not introducing something that is going to create a bug that you didn't even realize because you were just trying to make this work. But while doing that you just like introduce something that is breaking other parts of the code base that you didn't even know. Because I'm a designer and I'm a dummy.
- [40:49]
Rid
You know the big prototype that you're making is that off of production code base or do you have a separate playground repo that you're building off of that? The engineer is then cherry pick.
- [40:58]
Pablo Stanley
Oh no, it's. It's on top of production code, all product.
- [41:01]
Rid
Okay, cool.
- [41:02]
Pablo Stanley
I, I also want to be able to be using or real tooling or real everything real. You know, there are some things that you could do that is just like on a, like in a sandbox or like in a HTML or whatever when you're Just like playing around. I believe at least in a tool like this, you want to connect to the, I don't know, to real projects, to the real agent, you know, here. And that way you will test it the right way, which is something that a app PR in a way, just something that is not at least depends on how the restrictions and the permissions that you have in your repo. But it's not going to be chipped unless someone else approves it and then unless it passes all the tests. So it's okay to just create a PR and then just to be safe, put it on draft and just play around with it and just use the real thing. And that's a part that just makes a tool like V0 so powerful because you're connecting to the repo, you know, you're connecting, connecting to the GitHub and you're working on the actual code base and you're not just working on a static artboard, we're just mimicking. And you're just like trying to think of all the edge cases, but at the end it's hard to think of those. So you end up just creating the happy path, you know, or just the static path, because you're not testing and you're not finding out the things that usually happen when you're testing thing with real data or with the real tools and real components.
- [42:25]
Rid
You know, there's another implication of how you're building and one big prototype that I'd love to learn a little bit more about, which is like, this is a media release, right? There's so much strategy, there's so many UX decisions, there's so many overarching product decisions that I would imagine a bunch of people had opinions on. So how does this way of building change the way that, um, you share ideas with the team, get feedback, bring people along from the journey, make sure that everyone's on the same page so you can get this monstrosity of a release out the door.
- [42:56]
Pablo Stanley
You can go into a rabbit hole, like AI psychosis rabbit hole. If you're just working with terminal in isolation, you know, because you go and this thing that will always say, yeah, yeah, let's build that, they will always agree with all your terrible ideas ideas. Then you go build a monster that nobody wants, you know, so you want to avoid that. But yeah, by having humans bring the friction that we all need real creation and I don't know, things that, that feel more original are going to come from multiple perspectives. Having friction and having pushing you pushing back and pushing you to do, to think different, differently. And LLMs, they're not that good at doing that. And, and I think humans, we still, we still have that. We can be jerks sometimes. You know, that's our superpower. That we could be like, ah, that sucks. You know, and it's okay. It is good to share that stuff and put it out there. It's like a record, a video of your thinking and then ask for, for advice. As for feedback. Feedback, put it on Slack. Put it in a loom share also chair. Like now with this thing, the cool thing is you can share a preview link, you know, like a vercel preview link. And then people can actually open it and click around and then find the things and then they could tell you where it broke. You know, that's usually how it works. We will have a channel that is specifically for PR reviews and then we'll have channels specifically for projects. Like, for example, the Design Find Mode project had its own Slack channel. And we're just like talking about it and we're just pushing ourselves to just like do better, you know, Because I will put something as like, hey, this is cool, right? And then I'll have a PM or engineer or someone tell me like, ah, what if we do this? Hey, this kind of sucks and then you fix it. So like, it's all about collaboration and that shared knowledge.
- [44:54]
Rid
I want to talk about the loom piece because you've made like, you've made a heck of a lot of videos, right? Like, you have a lot of reps under your page belt, more than a lot of average designers who have not put themselves in front of a camera like you have. So I know there's like this 101 set of advice for what makes a good loom video. Giving the context, talking about the problem, whatever, yada, yada, yada, yada. I want to ignore all of that. I want Pablo's 201 advice. Like, what are you intentionally doing to make your videos more compelling?
- [45:24]
Pablo Stanley
Nobody wants to suddenly see being tagged on a video that is 10 minutes long. You know, Know, it's like, oh, dude, really, you know, so you, you want to keep it short, unless if you really need it to be long, then you better be telling a good story, you know, that, that length better worth it, you know, and whenever I, I realize, oh, this is going to be like a longer video. So I will try to tell a story, you know, like, start with Gabe, why am I presenting this? Where did all come from? I would try to. Sometimes I would sketch the stuff for example, here I was talking about Robotos. This is a project that I made some years ago. And it will tell, like, how things came about, you know, like before it was vectorized, like, how it was actually first sketch. And a lot of it. Well, for example, like back in the day, I was. We're building a map and stuff, and I was trying to convince people of an idea, you know, So I made this map. And this was while I was doing the loom video of.
- [46:25]
Rid
Of this.
- [46:26]
Pablo Stanley
I was like walking people through this map and I was like telling them, okay, guys, like, I felt like Charlie. And it's always on in Philadelphia, like, showing like all the diagrams and his conspiracy theories. But I would tell him, like, guys, okay, so we start with this, you know, and then this from here, this becomes this. And then we get some tokens, and then we get some prices for people. This is going to be tokenized, so only these people are going to be allowed. But I was. I was using like a first, a graphic, my idea, that was still very conceptual. I was trying to guide people through this, to this vision. You know, it just points at the
- [47:03]
Rid
fact that you spike in so many different directions, which I appreciate. Like, you got the UI skills, you have like a little bit of code background. You're, you're. You're doing all the technical things. You're living in the terminal, and yet then you have all of this artistic ability and the illustrations. And I think it feels sometimes like we're entering this world where everybody is being pulled more technical. I'm sure a lot of people listening feel that. I know that. I do. So maybe before I let you go, one final question I have is how do you think about protecting your creativity as we hand more of our output to the models and we're doing more of the things in code, and more of our decisions are at the orchestration level. Any thoughts on the future of staying creative? As somebody who's really built a career on that skill set?
- [47:48]
Pablo Stanley
This project, I had never done pixel art before. I made this, I don't know, like two months ago or two months ago. And I made all the different things to create. Just like, I don't know, I think it's like 10,000 characters or something or that you can do with combinations, you know, and then I forced myself to do it by hand. I didn't use AI to do this stuff. So this was like me learning a pixel art tool that is not Procreate or Photoshop. That was a challenge, challenge for me. It was a challenge for me. To understand, like, how to do this gradients, you know, with this pattern to just like simulate shading at every turn. Man, my brain wanted to use AI. It felt like a drug, you know, it felt like I was. I'm hooked to this tool that can do it all. So now my brain wants to do it that way, you know, wants to use that tool. And instead of trying to do the pixel art stuff that I want, wanted to do, my brain kept going to like, why don't we create a pixel art tool with AI and code instead of doing the pixel art? If you do the tool, then you can do later the art. So my brain wanted to do that. I don't know if you ever heard McLuhan. He said that we create our tools and after that the tools shape us too, which is great. You know, like new technologies change. Change our way of thinking too. I think it was Socrates who was against writing. He was against writing because he thought that writing was going to erode or thinking or ability to memorize things. He thought that by putting in writing, we're just like suddenly delegating or thinking to the written word instead of trying to use our brain. This thing goes back for a while. That's why I'm also still very positive and very optimistic about AI, Even when I have been my own existential crisis a lot of the times while using the tools. At the same time, I am like, we're going to figure it out. Because back, like, I don't know, thousands and thousands of years ago, we were having this debate where the smartest people were against writing because they were afraid it was going to dilute our thinking. In a way, he was right because it did change our way of thinking. But he was wrong and that it was going to just like make us do dumber. You know, there is a danger in using these tools, I think, because if we delegate too much to it, then we're not forcing ourselves to think through. And this is what was happening with me when I was trying to do the pixel art. I'm being shaped by the tools that I use. Feels like a diction because it's so good. I think that you want to be able to force yourself to not delegate all of your thinking to this tool and use this tool, this tool the right way. My belief is that we need to use it in a way that expands our ideas. It magnifies or curiosity. It allows us to go deeper, but also broader. Where suddenly maybe that thing that was like a little spark in your brain suddenly can be amplified into a gigantic star that is full of fire.
- [51:00]
Rid
I'm so appreciative that you ended on this Pixabots experience example. I'm challenged by seeing it even, you know, because it is. It's so tempting to just use the models. Use the models. I don't actually need to think until Claude finishes its response and then I'll pick up thinking again, you know. And so seeing you do this by hand, embrace the friction, I think it's beautiful and I find it inspiring. I'm sure that people watching will be inspired as well. And honestly, Pablo, just thanks for coming on and sharing. Sharing not only what you've made and how you're working, but also just what it's like, you know, living in this world today and everything that's changing and embracing this, this new way of working. I super appreciate you and have looked up to you for a while and just grateful for being someone who is continuously sharing what you're learning and thinking about in this industry.
- [51:49]
Pablo Stanley
Ah man, thank you, thank you. Appreciate.