How Grok Bot designers use AI agents to build personal sites and product prototypes | John Bai & Peng Zheng

19:39Peng Zheng:Yeah, it's done. And I think it's published to the website now.

19:45John Bai:Very cute. cute we have this i'll capture the swing i love it if you want a real easter egg at night you know we have the secret guy putting up the swing and during the day the swing is the swing is gone because that's what's happening with the very controversial swing at the bernal heights park but i love this how fun and just something that i would have never imagined you could do before. This is so cool. You know, this is a personal use case, and I think a really lovely one. But let's switch over to work stuff, because John, you've been using GrokBot to design GrokBot and have some really interesting workflows you're going to show us.

20:27Peng Zheng:Yeah, happy to talk about that. I think for me, some folks have already read an article that I wrote that was how I design using, no, no, how I design GrokBot using GrokBot. And I go over a couple of different ideas of how it's unlocked productivity for me, how it's really made some of the tasks that used to be really inaccessible or really boring, more accessible and a little less boring. One of the ones I wanted to talk through today was on Figma Bro, which I also shared out as a bot template. So other designers out there who want to try it can use it. Hopefully you can help improve it and share it back with me and I can update it in my own rock bot.

21:04Peng Zheng:I just want to talk through two quick use cases and that's the first one being on the screen right here this is an actual prompt that i gave it using voice recording so i'll just read it okay here's the situation i have a link in figma as an example on the left i have a screenshot of a couple of icons that's this over here that need to be essentially placed next to each of the bots in the exact same placement i have the second screenshot which shows ones that don't have an icon next to them so take the icon scale it up put it in the same position as the rest of the bots that I've screenshotted and ensure that they're in the same position, scaled up icons so that I have a whole set of these.

21:36Peng Zheng:If anything is unclear, tell me. And the reason we needed this was because Ben was doing some community assets and asked me to put together something really quickly. It was 8.52, so I was wrapping up at the gym and I was able to just screenshot in Figma these two separate art boards of work that was already in progress, one being from the icon library and the other being from the brand book. And doing so, I just pointed to those. Had the bot do its work. I didn't even read most of this stuff, but it produced three outputs. And I was like, great, copy pasted what Ben had sent me on Slack and said, I think we got all these covered.

22:14Peng Zheng:And then it made this little table. I was still at the gym at the time. So this is more voice messaging. But then it kept iterating, maybe making it a little bit bigger, rounding it so it looks good. And I can check that it looks good in a rounded state. And then eventually getting feedback that maybe we could play with the color. And so applying that as well. And this is the type of thing that maybe, you know, wouldn't take super long in Figma, but now I'm just doing while I'm not even at my computer.

22:39John Bai:Can you just walk us through exactly how this is hooked up to Figma for folks that kind of just don't even know how this magic happens?

22:47Peng Zheng:Yeah. So there's a Figma MCP, which we use and is pretty effective, especially if you just give the, once you've made the connection, give your bot the link to it and give it some very specific set of controls. In my bot itself, it has the skills and some specifics that I request of it. I like to have my artboards laid out, you know, side by side horizontally in maybe 50 pixels apart or 100, depending on the size of them. And I tell it all these things up front so that it doesn't give me like a messy file when I come back to it. It works really smartly with a template I found. And so from before, I kind of had to direct it a few more times.

23:24Peng Zheng:But I have a second example that I can show you, which is a little bit more precise with how I set it up.

23:30John Bai:Awesome.

23:31Peng Zheng:And this was just earlier today. Right now it's around two. This was an hour ago where I was asked to create some marketing material for our latest bot marketplace, which is launching today. And we want to highlight some of the primary use cases. We have the bots that are being provided to us by people, yourself included, Claire. And we're highlighting some of these things in marketing material. And so what I did was, I'll show you what I did in Figma. It was up here. I made one quick template and I labeled it for Shubb because he asked me for it. And I told the bot using that, which I linked right here, here's the message.

24:09Peng Zheng:Here's the template. Use our brand book backgrounds and wallpapers and match the styling that I have, but apply it to every other one. And you'll notice that some of them don't have the photo fully updated. Some of them do, which means I need to go back and prod it. But this just saved me the time of needing to go manually onto each site, pull down each photo, update each one, change the instance, change the background, change the copy. It's all done for me here. So while I'm on this call, work is getting done, which I really love. I think the fact that I don't have to do this stuff myself is a godsend.

24:42John Bai:And I have to say, look, Tradbot spotted right there. Claire's personal bot, very, very popular one that has really changed my life. I love this because, you know, again, this stuff is so beautiful. And as designers, what you want to spend time on is making these assets really great. You don't necessarily need to be doing production design, which is, you know, carrying it across different assets and polishing in different versions. And so your ability to spend more time, I'm presuming, on the foundations that make this system really extensible and then letting Figma Bro, love the name, let Figma Bro, Figma Bro and Tradbot would be friends, by the way, let Figma Bro kind of like do the production work, I think is really amazing.

25:30John Bai:And then for folks that missed it, you know, what I tell people is I use AI to get me off my computer, not on my computer. And so the fact that you were at the gym, got asked to do something, you know, especially something like Figma that really does require like your human fingers on a touchpad or whatever to do it. And your disability to be like, yep, go for it, get it done and finish your workout, I think is so nice. It's just like a much nicer way to work. Yeah.

26:00Peng Zheng:And speaking of on the go, the other bot that I want to highlight is DevBot or experiments. Both of them I kind of use interchangeably. But the high level idea behind these is a lot of times you get an idea, an interaction or a layout, a specific type of design that you want to explore. But once again, you might not be at your computer. Classic shower thoughts moment where you want to capture something and maybe even get it to a certain level of fidelity, but you don't have the time and energy just then and there to do so. which brings me to DevBot, who works really closely with experiments also over here.

26:34Peng Zheng:So, I mean, you're starting to see a pattern in the way that I work. This was also on the go. I took a screenshot of our actual mobile app experience, a screenshot of my bot called Slack Search, and gave a voice memo to the bot saying, I wanted to make a specific type of prototype. So I described it while using voice, kind of rambling a little bit. But in essence, it was, when I share an agent, we've been using this term of a snapshot, a template. It's not the agent itself, but it's a copy of it to give to another coworker or friend or whatever. And so the idea was what if it would actually do a screenshot effect?

27:08Peng Zheng:If I click the share button, it takes a screenshot, strings down, zooms back to the preview template. And I just had that idea, wanted to test it, gave it to the bot to run with. And it talked to motion god, because there's a lot of things that I described that were things, elements on the screen that were transitioning. It had its own conversations. I barely even checked it once again, until I came back to its work. And I'll just jump to the end state, which is right here. We had to recreate some of the components within the test repo that we have, but it came up with two options of what I asked for.

27:42Peng Zheng:The first being if I click share agent here, there's a little screenshot effect, then zooms into it and shows some of the details. I could see the routines of the bot and it moves when I switch tabs, shows the plugins, and then you can copy a link and send it. And I asked for a little bit more of a subtle approach as well. And it basically took that and turned it into a version that just goes directly into the share modal. And so clever idea in the end decided not to go in this direction. It felt a little bit too derivative of kind of the iOS screenshot idea that originated this whole exploration.

28:15Peng Zheng:But I do love how easy it is to take just the concept that normally you would have to either prototype with the noodles in Figma, take the time to actually consider how it gets built if you're prototyping in code. describe it in plain words and say, run with it, do with my description of it how you will, interpret it, and turn it into something that I can interact with. So IdeasBot maybe should be the combination of what I'm using today as experiments and DevBot. But yeah, the random shower thoughts can now become a real working prototype.

28:48John Bai:One thing that, you know, again, I've been in tech a million years. And so in the past, I am telling you some delightful, amazing designer would have been like, I have this great idea. We're going to like screen. It's when we do share the screenshot effect, it's going to like feel so good. It's going to like give people a spike of dopamine. They're going to love it. We're going to share more things. And what would have happened is you would hit a product manager that says not a priority. Show me the ROI. What's the OKR? And an engineer being like, I'm not going to build that stupid thing I have tech debt to do.

29:21John Bai:or like a bunch of stuff. And even if you get through the gauntlet of both of those and you get it built and you're like, nevermind. Don't love it. Don't love it. People are angry. They're like, we dedicated time. We prioritize this. It's like, you don't deprecate any of these things. And so the thing that I call this, like the trash, trash can method of software development, which is like building things with the presumption that it is totally inexpensive expensive to throw them in the trash, whether those are prototypes or things that you get to your customers. And I think it allows you to be a lot more expansive about what the process of product development, software development looks like, because you're not always stopping yourself saying, is this enough to justify getting it into the app?

30:06John Bai:Is this enough to bother somebody to get it higher priority than this or that? And so for somebody who has built a lot of software in a lot of environments for a very long time. That is the piece of products like this that really make me excited because you can iterate so quickly. You don't have to shut off that like creative part of your brain that says, well, what if this, what if that? And you don't have to be stressed that you're quote unquote raising resources when you come up with an idea that you're not 100 % sure of, but want to see what it looks like.

30:36Peng Zheng:Totally agree. And I think that makes it more fun to be a designer again, honestly. a lot of the previous constraints the parts of the design process and working cross-functionally that were a headache before are a little less of a problem these days like you said amazing well I

30:55John Bai:love it just to recap for folks Figma bro your design spotter while you were at the gym getting getting the reps in on your art boards and then experiment and dev bot basically like take your shower thoughts, take your walk thoughts, and the implementation is none of your business. Let them let them cook. You come back to an idea and then it's up to you whether or not you want to ship it or not. Okay, so this has been so fun to recap for folks. We've shown sort of like the personal workflows and how you can do kind of amazing things that you wouldn't have been able to do before with very minimal toil using GropBot as sort of like a development design pipeline.

31:34John Bai:John showed us, you know, how to experiment, design, do production more efficiently with GrokBot. Let's just take a step back. Let's go to lightning round questions. My first one, just very quick between you two, other than the bots you showed. How do you think about your bots? Who are your favorites? How do you organize them?

31:52Peng Zheng:A lot of my digital life has been dedicated to all different types of GrokBots. In general, I organize them in two buckets, life and work. So I have a couple of bots that dedicate it for each part of my life. For example, my chief of staff. I manage all the bots, but I sometimes do talk to other bots. But I dedicate the things I don't know who to dedicate it to, to the COS bot. So I think last night I was asking to buy some 3D printing filament for me. So that's the plastic material that 3D printer used to making things. And what's interesting is not only it can help you search, find, and buy the item, you can actually train different tasks together.

32:41Peng Zheng:Like I asked you, once you are done, update the inventory list because I keep this 3D printing filament inventory in Notion. And I wanted to automatically add this record and purchase it for me. And I think that's truly the power of it is to train different tasks in your daily life together. and give it like a higher task and let it figure out what the steps, what it needs to do. Maybe you can learn it. And then the next time you do it, just totally do the thing that we did last month. And then even have it automatically do it. I have an email manager, which will surface all my action items. This was last night.

33:19Peng Zheng:I was checking any action items from my input inbox. And then like there's some USPS delivery issue. Then I ask it to help me contact them. I have the calendar manager who is become in fact to become my calendar now so I'm scheduling someone for for the coffee chat next week and then most of my time today and I just take a screenshot of the conversation it can be on any I am tool this one's on LinkedIn and I just send it and ask you to put a placeholder on my calendar almost never open the calendar app anymore um you can also put bots into a group so let's say in this example let's i had this idea design a app that as they class me out to english so i throw this idea into the group chat and in the group chat we have a pm we have a designer we have a engineer and then they started to talk about idea from their own perspective and it's so interesting to see like how this simple seed planted in the group chat and then now like derive new ideas around it I even use it to prepare the podcast that we're doing right now I don't have a microphone and I asked my IT bot who's like taking care of all my IT questions what type of microphone I need and I only have this one does it work and for personal life it's replacing my news app so every morning 7 a.m i'll receive a newsletter and it's personalized i tell it i want to ai information i want to news about ai that relevant to me um i wanted to like have it do fact check um and then source the official links as much as possible.

35:15Peng Zheng:And then this one is a legal advisor. So it's taking care of a lot of repetitive tasks. For example, I'm in this wait list for, I'm applying green card. I'm in wait list for this visibility and checking manually every month in a path. So I just dedicated this task to, and then I give the link and it would go check it every month and then let me know, okay, where is the, where are you are in the queue? What's the waiting list? What's the data?

35:44John Bai:I love it. So it seems like you have just kind of like all the admin, all the life admin you need to do, whether it's shopping, whether it's, you know, checking in on different status, regular check-ins. And then I love the idea of like, I don't want an email anymore and I don't want a calendar anymore. I want a bot to show me where, like tell me where to show up and that's it. And so, you know, just, just for folks watching this again, it's like, make it as easy as possible to take the task you're doing to the finish line, right? Like you knew you needed to buy 3D printing filament, but you just don't want to open up the app, click the buttons, pick the right one, get sucked into the reviews, get distracted by the, you know, associated products.

36:29John Bai:You're just like, buy, buy the thing. Or, you know, even calendar events, you like pull it up and you look and like, I have a conflict. What do I do? And you get allow you to kick off a task and pull it all the way through without distraction and just make sure that you get a lot of stuff done. And I think the breadth of use cases here is pretty incredible. John, do you have any that are different than this? Like one or two that you think folks aren't thinking of or that are a little different than the average, you know, admin shopping one?

37:04Peng Zheng:I do have some that are a little bit particular. And one is just, I just started a few days ago. I've been learning Japanese. And the thing about Japanese as a language is there's hiragana, there's katakana, and there's kanji. And so there's different ways of reading one language. and recently I had the thought to just maybe communicate with this bot which is just a Japanese practice bot both in a way to up level my reading of kanji as much as possible but then have the pronunciation underneath it when I need it as well as finally an English response so I just basically told it give me all three forms so that I can learn as I go in just regular communication with you I was having it look for a specific book as you could tell up above I was going to have it translated, but then it came out.

37:50Peng Zheng:So I ended up buying it. The other use case is one, maybe this very particular. I think we're all aware of how the American insurance system is set up. And for me, it's not even that big of a deal. It's just knowing that it's possible for me to set up the bot to know my insurance plan, take any photo of a receipt or any sort of doctor statement, and just ensure that I'm getting the most bang for my buck. And this one, you know, half the time it doesn't even, there's nothing additional that I can get out of it, but it just gives me peace of mind knowing that I can send anything to it and know that I'm getting my money's worth.

38:29John Bai:Yeah. I want to give people, I'm guessing kind of how this is set up, which is you're like, this is my plan. Here's my coverage. Anytime I'm going to get a prescription or look for a provider or go to a specialist, like reference my plan and make sure that I'm making the best decisions? Is that kind of the high level what it does?

38:46Peng Zheng:And in addition, anytime there's an invoice or a receipt, I say, do I need to do another follow-up or am I getting the maximum savings?

38:56John Bai:I love this so much. As a self-employed person who finances her own healthcare, this is gonna be one that I go set up right out the gate. Okay, last writing on question. We're almost at the end of our time. I must ask because you have so many bots and they all have these personalities and names. You have Figma Bro, I have Trad Bot. When the bots are being silly, when they're not doing what you want, how do you prompt? Are you all yellers? Is there some trick to getting your bots back on track?

39:29Peng Zheng:Here's the thing about working at SpaceX AI is oftentimes when you need to troubleshoot, they ask for your session ID and I don't want my coworkers seeing how I talk to my bot. And so I've gotten nicer over time, I'll say. I reply with a lot of emotion sometimes. But I think a useful tip is every time you can ask the bot to memorize this, so in the future, if this happens again, then just follow the script you learned last time. So kind of distill and iterate itself. And then the longer you use it, the better it becomes and more adapts to your needs.

40:06John Bai:I love that. Great, great tips both. Both one, remember who's reading your transcripts. And two, just ask your bot to remember how to avoid the problem in the first place. You all, you've been so generous with showing this. You've given me so many ideas. I'm going to go back. You're going to get a brand new clairvaux.com by the end of the afternoon. I am so psyched about this. You just gave me the best ideas. Where can we find you other than all over the timeline where bot is going wild? Where can we find you and how can we be helpful?

40:34Peng Zheng:I'm chronically online. You can find me at John Bai, which is just my name. Yeah, same for me. I'm on X and it's lovely to be in anybody post and talk about design of the graph out there.

40:49John Bai:Awesome. Well, and y 'all go out and try it. Love, truly. It's been really awesome and regretfully has replaced my beloved open clause. So I think it's worth a spin. Both of you, thank you so much for joining HowAi.

41:03Peng Zheng:Thank you. Thank you for having us.

41:06John Bai:Thanks so much for watching. If you enjoyed the show, please like and subscribe here on YouTube, or even better, leave us a comment with your thoughts. You can also find this podcast on Apple Podcasts, Spotify, or your favorite podcast app. Please consider leaving us a rating and review, which will help others find the show. You can see all our episodes and learn more about the show at howiaipod.com. See you next time.