Skip to content
How I AIHow I AI

How SpaceXAI designers use Grok Bot and Figma MCP to ship faster

John Bai and Peng Zheng are designers on the Grok Bot team at SpaceXAI, where they’re building one of the most talked-about AI products right now. John writes publicly about his design process (his piece “Designing Grok Bot with Grok Bot” has already made the rounds) and shares bot templates with the design community. Peng brings a product-design sensibility to personal tools, and his website doubles as a live demo of what he builds. *What you’ll learn:* 1. How Peng built a self-updating personal website using Grok Bot as the entire backend pipeline, with no CMS and no Figma file 2. The exact check-in bot setup that lets Peng send a photo or a place name and have his portfolio update itself automatically 3. How John’s Figma Bro bot handles production design tasks while he’s at the gym 4. How John uses voice memos to direct Figma work through an MCP connection without opening his laptop 5. The “shower thought to prototype” workflow John uses with DevBot to test interaction ideas without first going through a product manager or engineer 6. The “trash can method” of software development 7. How both designers organize their personal bot ecosystems 8. What John and Peng actually think AI means for the future of design as a craft *Brought to you by:* WorkOS—Make your app enterprise-ready, with SSO, SCIM, RBAC, and more: https://workos.com?utm_source=lennys_howiai&utm_medium=podcast&utm_campaign=q22025 Vanta—Automate compliance and simplify security: https://www.vanta.com/howiai *In this episode, we cover:* (00:00) Introducing John and Peng (02:53) The Grok Bot hype train (04:35) Peng’s self-updating personal website built with Grok Bot (15:12) How AI makes design more accessible (19:35) Website update result (20:13) John’s Figma Bro bot (23:35) Creating marketing materials for the bot marketplace (26:00) DevBot: from shower thoughts to working prototypes (28:48) The trash can method of software development (31:19) Other bots John and Peng are using (39:05) Practical tips for when bots don’t do what you want *Blog and detailed workflow walkthroughs from this episode:* GrokBot Design Workflows with John Bai & Peng Zheng: https://www.chatprd.ai/how-i-ai/grokbot-design-workflows-john-bai-peng-zheng↳ GrokBot Voice Memo Interactive Prototypes: https://www.chatprd.ai/how-i-ai/workflows/grokbot-voice-memo-interactive-prototypes↳ GrokBot Figma Design Automation: https://www.chatprd.ai/how-i-ai/workflows/grokbot-figma-design-automation↳ GrokBot Self-Updating Website & AI Art: https://www.chatprd.ai/how-i-ai/workflows/grokbot-self-updating-website-ai-art *Tools referenced:* • Grok Bot (xAI): https://x.ai/bot • Figma: https://www.figma.com • Figma MCP server: https://www.figma.com/mcp-catalog/ • Google Places API: https://developers.google.com/maps/documentation/places/web-service • Notion: https://www.notion.so • Swarm (Foursquare): https://www.swarmapp.com *Other references:* • Designing Grok Bot with Grok Bot: https://x.ai/bot/guides/designing-grok-bot-with-grok-bot • Figma Bro bot template (shared by John Bai): https://x.ai/bot/marketplace/bots/figma-bro • From zero coding background to hardware hacker: How Cursor + a Raspberry Pi makes AI fun: https://www.lennysnewsletter.com/p/from-zero-coding-background-to-hardware?utm_source=publication-search *Where to find John and Peng:* John Bai on X: https://x.com/johnbai Peng Zheng on X: https://x.com/pengzheng_ *Where to find Claire Vo:* ChatPRD: https://www.chatprd.ai/ Website: https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ X: https://x.com/clairevo _Production and marketing by https://penname.co/._ _For inquiries about sponsoring the podcast, email jordan@penname.co._

Claire VohostJohn BaiguestPeng Zhengguest
Sep 14, 202641mWatch on YouTube ↗

EVERY SPOKEN WORD

  1. 0:002:53

    Introducing John and Peng

    1. CV

      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, and your disability to be like, "Yep, go for it, get it done," and finish your workout, it's like a much nicer way to work.

    2. JB

      I was able to just screenshot in Figma these two separate artboards of work that was already in progress. And doing so, I just pointed to those, had the bot do its work. I, I didn't even read most of this stuff. It produced three outputs, copy/pasted what Ben had sent me on Slack, and said, "Think we got all these covered." 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.

    3. PZ

      Now, when I go somewhere, I can basically just send Grok Bot a photo, a screenshot, or literally just the name of the place, and it'll figure out what the place is. It'll look it up through Google Places API, and I get the right location coordinates. It'll fix the perspective and remove people and turn it into like a 3D miniature visual style that I use on the site.

    4. CV

      AI can feel like a threat to the creative arts. Like look, your highest calling was never to design gradient fills in Figma. And what I tell people is... [upbeat music] Welcome back to "How I AI." I'm Claire Vo, product leader and AI obsessive here on a mission to help you build better with these new tools. Today, I have John and Peng from the Grok Bot design team, and they're gonna show us two really awesome AI design use cases. One, how to build a beautiful custom and easy to update personal site that meets the bar of a designer, and two, how Grok Bot was used to design Grok Bot, including where Figma Bro can make your life at the gym and work a lot easier. Let's get to it. This episode is brought to you by WorkOS. AI has already changed how we work. Tools are helping teams write better code, analyze customer data, and even handle support tickets automatically. But there's a catch. These tools only work well when they have deep access to company systems. Your copilot needs to see your entire code base. Your chatbot needs to search across internal docs. And for enterprise buyers, that raises serious security concerns. That's why these apps face intense IT scrutiny from day one. To pass, they need secure authentication, access controls, audit logs, the whole suite of enterprise features. Building all that from scratch, it's a massive lift. That's where WorkOS comes in. WorkOS gives you drop-in APIs for enterprise features so your app can become enterprise ready and scale up market faster. Think of it like Stripe for enterprise features. OpenAI, Perplexity, and Cursor are already using WorkOS to move faster and meet enterprise demands. Join them and hundreds of other industry leaders at workos.com. Start

  2. 2:534:35

    The Grok Bot hype train

    1. CV

      building today. Peng, John, thank you for joining "How I AI" today.

    2. JB

      Glad to be here. Happy to share.

    3. PZ

      Thanks for having us.

    4. CV

      So I am a big bot girl. Actually, we were just talking before the show, last night we did a ladies who Grok Bot night at Andreessen Horowitz. There were 900 registrants, a line around the block. Grok Bot is having its moment, and one of the things I love is so many people inside SpaceX AI actually sharing really practical and unique use cases of how they themselves have found new ways to get work done, build software, do awesome things with Grok Bot. Um, so how has it been, you know, the past couple weeks just been, being in the middle of this sort of explosion in Grok Bot interest? How does that feel, um, shipping a product like that?

    5. JB

      It's really exciting. I mean, I feel like it's rare to have this amount of attention and this amount of engagement on something that a designer gets to work on, and I think, um, we're learning day by day also from our users. I think there's a lot of questions being asked about us as though we're experts on the product just because we're designing it, but I think like we're learning just as much from the users, from, uh, people sharing their own workflows, um, their tips and tricks, especially on X recently, uh, and from you as well, Claire. It's been really fun.

    6. CV

      People don't know this, but before we started recording, we were actually scrolling through and prepping screen shares, and as we were going, all of us were like, "Oh, we need that feature. We need this feature. We need to make this a little bit easier." So it's fun to be able to see the process of this product evolve as it has tremendous product market fit right out the gate. Well, Peng, I,

  3. 4:3515:12

    Peng’s self-updating personal website built with Grok Bot

    1. CV

      I know that you have a workflow that you wanna show us, and one of the things I love about Grok Bot and AI agents in general is it's just really opening up new ways to do old things and, and easier ways to do things that we all used to do before. So walk us through what you're gonna show us and why you think Grok Bot is the right way to take on this task.

    2. PZ

      Yeah. So I have this pretty personal story. Um, I eat a lot of Chinese food, and then sometimes when you get a takeout, you know, the rice comes with this white paper box. There's a like red Chinese temple on it. And then last weekend I was looking at it, and I had this random thought like, "Where is this temple?" Like, "Is it a real place? Uh, where is it?" So I searched online, and I found it might be somewhere in San Francisco Chinatown. And I was like, "Okay, let's, let's find it out." Like, I went to Chinatown, I walked around for a while, and I did not actually find the temple, but I took a bunch of photos along the way. And there was this little produce shop, uh, selling fruits and other stuff, and I took a photo of it. And later, I was waiting for bus, and then I used AI to turn it into a 3D clay miniature, and I thought it looked pretty cool. And then later that day when I went back home, uh, I planned to redo my personal website. I've procrastinated for that for a while. And then I took that 3D grocery store and then- I put it, drop it onto the homepage. So it's a little bit of whimsical. It's fun. Uh, the page is super minimal. Basically, it was just this tiny store and then some text about me. At the end, I wrote something like, uh, "Last seen at JBC Market in Chinatown." And I was like, "Oh, this was actually kind of interesting," 'cause I've always had this problem with personal website that, especially as a designer, you spend all this time making one, and then you launch it, and people look at it for, like, 30 seconds, and then they leave. And honestly, even myself don't really go back to see it that much. So I didn't wanna make it just another personal website, uh, sitting there. I want it to be a little bit more alive and actually be more useful to me. 'Cause I'm also kind of person that I try to, like, check into places, and then I like this idea of having a record of where I've been, who I was with, and, like, what I was doing. And there have been, like, so many apps on the market to do this. Like, every couple years, there's one new check-in app, and then people use it for a while, and eventually disappears. So I was like, "Oh, why don't I make it just my personal website? Why don't I create it myself?" And immediately, I thought, um, "If I'm going to do it, I don't wanna manually do it every single time. Um, why can't it, can't it just update itself when I, when I go somewhere?" So that's when I started talk to Grok Bot, um, because normally, even for this, like, simple, small ideas, I, I'm not sure, like, what I need. Maybe I need a CMS. I need some kind of admin portal. I need to upload a image somewhere. I need to host a website, um, deploy it, store the code. And I'm like, "I don't want to build all of that. I don't even know, like, where to get it started." So, uh, I just wanna test it, how it works with Grok Bot. I basically told Grok Bot, "Here is the idea. Uh, what's the simplest way to do it? How can we make this work?" And we just started building it. Um, there's no Figma file. There's no spec. Honestly, I didn't really know where it was going. Uh, I was just trying to build one thing and then look at it and then think about, "Oh, well, what if it can do this? What if it can do that?" And then implement it, and then we get another idea. Um, so it's very fun just to going with the flow and, like, trust the vibe. And eventually, this idea turned into a check-in pipeline. So now, when I go somewhere, I can basically just send Grok Bot a photo, a screenshot, or literally just the name of the place, and it'll figure out what the place is. It'll look it up through Google Places API, and I get the right location coordinates. It will process the image. It will generate a light version and a dark version. It'll fix the perspective and remove people, um, isolate the facade of that building, uh, and turn it into, like, a 3D miniature, um, visual style that I use on the site. And then I was like, "Okay, location is one thing, but a lot of time, more interesting part is the people. Like, who am I with?" So I added that too.

    3. CV

      I was gonna say that looks like Twin Peaks. I was like, "Is it, is it Twin Peaks? Did I get it right?" [laughs] It looks great.

    4. PZ

      Yeah, that was three days ago. So now, when I hang out with a friend, I can literally send a screenshot of the place and a screenshot of my f- friend's social profile, and it... The Grok Bot will take over the rest. So I have this check-in bot that specif- uh, I specifically built for this workflow. It figures everything out. It turns it into a data structure that my website expect. Maybe we can try it now. Like, if three of us-

    5. CV

      Mm-hmm

    6. PZ

      ... meet in a physical place, maybe a famous land- landmark or something. You can name a place.

    7. CV

      Oh, I'll, I'll name, 'cause I live in Bernal Heights, so why don't you say we're at Bernal Heights', um, uh, I guess just called Bernal Heights Peak.

    8. PZ

      Is there, like, a specific building or, like, a landmark that-

    9. CV

      Yeah, that's, that's... It, it's kinda like Twin Peaks. It's just a different... It's another hill in San Francisco.

    10. PZ

      Okay. Since we are not there, but we can just find a image.

    11. CV

      Oh, at the swing. There is a, uh, there's a clandestine swing. You see it right here? Yep, that's it. Um, that somebody keeps putting up and the city keeps pulling down. It's very-

    12. PZ

      Okay, let's try that. I-

    13. CV

      It's like a real point of contention. [chuckles]

    14. PZ

      Okay, let's see if it works. And I'll put your social handle and John's social handle there. Maybe it-

    15. CV

      I love this pipeline. I have to take a step back while you're getting this to load. So I, I think the hardest thing for AI to do is build a personal site that a designer will like about themselves. [chuckles] So just the fact that you were able to get to that point, I mean, I've been a designer in a past life. I just avoid my personal site because I hate the idea of deciding something represents me and shipping it. So the fact that even you could get to something you like, I'm very impressed with. And then the second thing that I think is so fun is you've made it really easy and low friction for you to keep the site updated in a really unique, high quality visual way. Um, so I think that is really interesting. You know, if you had to, like, go home and download your photo and copy and paste in the X profiles and do all this stuff, you probably wouldn't keep the site updated. It just, it takes... It's too much mental load. And so I love this idea that you've compressed all these steps that you would've had to do, you know, historically, probably through some sort of CMS. ... or pushing directly to the site to just a bot that has a very specific use case, um, and it does this for you. I- I'm curious, while this is running, how did you get it to generate these 3D images so well and so high quality?

    16. PZ

      Yeah. So the pipeline behind it is, like, figured out by Grok Bot. It would generate two images, one light, one dark, 'cause when I, like, when a theme turns to dark, I want the lights to turn on. I wanted two versions of the-

    17. CV

      Cute

    18. PZ

      ... of the image. And then they have to be consistent, and then this was baked in the prompt. And I think an interesting part for me is none of this is actually fancy. It's just a bunch of, like, pretty simple building blocks. Uh, there's Google Plays or Google Maps, and then there's image generation, and there's some, like, structured data, and then there's the website, just render everything. And then Grok Bot is basically the thing that connect all the dots together, and I think that felt a little bit of different to me because before I would've probably had this idea, I've thought about all the stuff I need to do, and [chuckles] I was think, "Maybe do it later," and I'll never do it. But here, I didn't really have to know, like, what the final system was going to be. Um, I just started with this, like, random photo from a produce store, and then, like, one thing just led to another, and Grok Bot helped me along the way. Um, at the end of the day, somehow I had this, like, check-in system running.

    19. CV

      I really love this. What, um... I'll give you kind of a really chaos reigns idea, which is we had this woman, Maddy Reese, on, um, our, um, podcast recently, and she opened up a personal API so that people could pull information about her and also post to, to her site. You could give very select use of, you know, very select friends some programmatic access to update on your behalf in case you forget, you know? You can make this a little bit of a social experience. You can see, you know, decide who you trust to do it. But this pipeline's so nice, it seems like very fun to, to kinda make a social experience as well.

    20. JB

      You're gonna come full circle and make the next check-in app.

    21. CV

      You are. We are the-

    22. JB

      [laughs]

    23. CV

      I, I have m- a very funny... My h- my husband and I have been together for a long time. We've started a lot of businesses, and probably 20 years ago, he was trying to do a social check-in app, and he would liter- I would literally, he'd... I, I would be at bars. We would be friends. He would be at bars. He's like, "Can you please, can you please check in, check in on my app at this bar?" [chuckles] It's like true, true bootstrap, uh, guerrilla marketing back in the day, and now you can just tell your AI bot to check in on, on your behalf.

    24. JB

      Well, Peng, if you can get this connected to Swarm, I'm definitely gonna plug into this as well.

    25. CV

      [laughs]

    26. JB

      I'm still, I'm still an OG user of Swarm.

    27. PZ

      Y- yeah, I've been using it for a long time. I, I do see it as a trend that people become more expressive and become more autonomous, and they can set up their unique way to doing things, to check in, to record their life, to, like, bring this memory in the, in the format that only adapts to, like, their own preferences.

    28. CV

      You know,

  4. 15:1219:35

    How AI makes design more accessible

    1. CV

      another thing that I wanna call out for designers, because again, in a previous life I was a designer, is I have considered myself very creative for a very long time, and have a good sense of, you know, this, um, thing that everybody's calling taste, but what, what does good look like and, uh, what is high quality? But I lacked some hard skills and really struggled with a specif- a, a specific set of hard design skills I felt were very inaccessible to me. So look, I can, like, round a corner radius to the pixel, like the per... I can, like... I can get kerning right. Like, I, I am a UI/UX designer. That I can do all day and all night. I cannot illustrate to save my life. I know what a good illustration looks like. I cannot do it. It is just not in my skill set. And so one of the things that I really love about AI, as somebody who has a basis of skills, um, maybe strategic experience, but not hard skills in specific practices, is it makes my ability to be a more well-rounded designer, um, a lot more possible because it gives me these generation tools and these computer use tools and these deep, like, spikes in specific skill sets that let me pair it with the things that I'm actually good at and get a better outcome in general. Do you all ever feel that, where you're like, "Oh, man, in a past life I would've never been able to do this, like, 3D clay render. I would've always wanted to, but I've had to ask my awesome 3D rendering friend to do this"? Like, do you all experience that? Is that just me?

    2. JB

      I think many people are discovering that it unlocks a lot of the skill sets that you once thought were inaccessible. I think both of us... From my experience, it's a lot of motion work-

    3. CV

      Uh-huh

    4. JB

      ... where I can describe it and, and kind of even use my hands to point out what's supposed to take place, but then with prompting it becomes possible. Peng, I'm not sure about you, if, if there's anything beyond what you're showing.

    5. PZ

      I, I think the opport- opportunity is, like, the cost of making things become so low that we can imagine something that cost a lot more in the past, now it's so easy to do, and then this opens new opportunities and combination of the things we can create.

    6. CV

      Yeah. I would say the things that I'm seeing a lot... And I tell designers this, you know, I do think there is... Let's, like, call a spade a spade. AI can feel like a threat to the creative arts. Like, it just can. People talk about it all the time. And what I tell people is, like, "Look, your highest calling was never to, like, design gradient fills in Figma. Like, that was not what you were put on this earth to do." And so as a designer, being able to really go up the stack in terms of leverage, specialization, the edges of quality, the edges of desi- delight. Think about things like sound, think about things like video, think about things like illustrations and images. I just think lets people, like, operate at the highest level of their craft, um, as opposed to getting stuck in the kind of junk at the b- [chuckles] at the bottom, um, that, you know, is important in the foundation of building something really great, but not the highest use of someone's, like, time or talent. As AI adoption grows, so do your company's security risks and requirements. New frameworks, audits, and vendors keep piling on, but your team isn't getting any bigger. Most compliance tools promise automation, but you're really stuck doing all the work by hand, chasing screenshots, validating controls, and playing catch-up when audit season comes around again. Vanta works differently. Their agentic trust platform is built to scale with you, not slow you down. With over 1,400 automated tests across 400 plus integrations, Vanta collects evidence and monitors your controls year-round, cutting your audit prep by 82%. Plus, you can access the Vanta Agent everywhere you work, whether your team is in Vanta every day or living in tools like Claude or Cursor. Want proof? Over 16,000 fast-growing companies like Ramp, Writer, and Harvey save time and resources while scaling fast with Vanta. My listeners can get $1,000 off by going to vanta.com/howiai. That's V-A-N-T-A.com/howiai for $1,000

  5. 19:3520:13

    Website update result

    1. CV

      off. Oh, look, it, it looks like it finished.

    2. JB

      Yeah, it's done, and then I think it's published to the website now.

    3. CV

      Very cute.

    4. JB

      We have this... Oh, it also captured the swing.

    5. CV

      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 g- [chuckles] the swing is gone, 'cause 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.

  6. 20:1323:35

    John’s Figma Bro bot

    1. CV

      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 gonna show us.

    2. JB

      Yeah, happy to talk about that. I think for me, uh, 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, uh, of how it's unlocked productivity for me, um, 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, uh, I also shared out as a, uh, bot template, so other designers out there who wanna 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 GrokBot. Um, I just wanna talk through two quick use cases, and that's the first one being on the screen right here. Uh, this is an actual prompt that I gave it using voice recording. Uh, 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 icon, so that I have a whole set of these. 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, uh, 8:52, so I was wrapping up at the gym, and I was able to just screenshot in Figma these two, uh, separate artboards 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, I didn't even read most of this stuff, but it produced three outputs, and I was like, "Great." Copy-pasted what Ben had, uh, sent me on Slack and said, "Think we got all these covered." And then it made this little table. Uh, I was still at the gym at the time, so this is more voice messaging. Um, but then it kept iterating, uh, 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. Um, 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.

    3. CV

      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?

    4. JB

      Yeah. So there's a Figma MCP, which we use and is pretty effective, uh, especially if you just give the... Once you've made the connection, uh, 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, uh, in, uh, maybe 50 pixels apart or 100, depending on the size of them. Uh, 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, but I have a second example that I can show you, which is a little bit more precise with how I set it up.

    5. CV

      Awesome.

    6. JB

      And this was just earlier today. Right now, it's around 2:00. Uh, this was an hour ago,

  7. 23:3526:00

    Creating marketing materials for the bot marketplace

    1. JB

      where I was asked to, uh, create some marketing material for our, uh, latest bot marketplace, which is launching today. Um, and we want to highlight some of the primary use cases. Uh, we have the bots that are being provided to us by people, yourself included, Claire. Um, and we're highlighting some of these things in marketing material. Um, and so what I did was, uh, I'll share you what I did in Figma. It was up here. I made one quick template, and I labeled it for Shub, 'cause he asked me for it. Uh, and I told the bot using that, which I linked right here, uh, "Here's the message. Here's the template. Um, 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 ... the photo fully updated. Some of them do, uh, which means I need to go back and prod it. But, um, 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, uh, 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.

    2. CV

      And I have to say, look, TradBot spotted right there. Claire's personal bot. Um, very, very popular [chuckles] one that has really changed my life. I love this because, you know, again, this stuff is so beautiful, and as, as designers, what you wanna 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, and polishing in different versions. And so your ability to spend more time, I'm presuming, on the, like, foundations that make this system really extensible, and then letting Figma Bro, love the name, um, let Figma Bro... Figma Bro and TradBot would be friends, by the way. Um, let Figma Bro kind of, like, do the production work, I think is really amazing. 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, on a, on a touchpad or whatever to do it, and your just ability to be like, "Yep, go for it, get it done, um, and finish your workout," I think is, is so nice. It's just, like, a much nicer way to work.

    3. JB

      Yeah,

  8. 26:0028:48

    DevBot: from shower thoughts to working prototypes

    1. JB

      and speaking of on the go, um, the other bot that I wanna highlight is, uh, DevBot or Experiments. Both of them I kind of use interchangeably.

    2. CV

      Mm-hmm.

    3. JB

      But, um, 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, um, but once again, you might not be at your computer. A classic shower thoughts moment where you wanna 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. Um, which brings me to DevBot, uh, who works really closely with Experiments also over here. So, I mean, you're starting to see a pattern in the way that I work. Uh, this was also on the go. I took a screenshot of our actual mobile app experience, um, a screenshot of my bot called Slack, Slack Search, and gave a voice memo to the bot saying I wanted to make a specific type of prototype. So I described it all 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? If I click the Share button, it takes a screenshot, shrinks 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, um, and it talked to MotionGod because there's a lot of things that I described that were things, elements on the screen that were transitioning.

    4. CV

      Mm-hmm.

    5. JB

      Um, 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, uh, end state, which is right here. Um, we had to recreate some of the components within, uh, uh, the, the test repo that we have, um, but it came up with two options of what I asked for. 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, the routines of the bot, and it moves when I switch tabs, shows the plug-ins, and then you can copy a link and, 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, uh, that originated this whole exploration. But I do love how easy it is to take just a 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, um, 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 Ideas Bot maybe should be the combination of what I'm using today as Experiments and DevBot. Uh, but yeah, the random shower thoughts can now become, uh, a real working

  9. 28:4831:19

    The trash can method of software development

    1. JB

      prototype.

    2. CV

      One, 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've been like, "I had this great idea. We're gonna, like, screen... It's g- when we do share, you're gonna get the screenshot effect. It's gonna, like, feel so good. It's gonna, like, give people a spike of dopamine. They're gonna love it. We're gonna share more things." And what would've 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 gonna build that stupid thing. I have tech debt to do 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, "Eh, never mind. Don't love it. Don't love it," people are angry. They're like, "We dedicated time. We prioritized this. It's, uh, 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 to throw them in the trash, whether those are prototypes or things that you get to your customers.

    3. JB

      Mm-hmm.

    4. CV

      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? Is this enough to bother somebody, um, to get it, you know, 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?" Um, and you don't have to be stressed that you're, quote-unquote, "wasting resources," um, when, when you come up with an idea that you're not 100% sure of but wanna see what it looks like.

    5. JB

      Totally agree. And I think that makes it more fun to be a designer again, honestly.

    6. CV

      Yeah.

    7. JB

      Um, a lot of the previous constraints, the parts of the design process and working cross-functionally that were a headache before, um, are a little less of a problem these days, like you said.

    8. CV

      Amazing. Well, I love it. Just to recap for folks, uh, Figma Bro, your, um, design spotter while you were at the gym getting, getting the reps in on your art boards. And then Experiment and DevBot, 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 wanna ship it or not.

  10. 31:1939:05

    Other bots John and Peng are using

    1. CV

      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, um, that you wouldn't have been able to do before with very minimal toil using GrokBot as sort of like a development and design pipeline. John showed us, um, 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, kind of like how do you think about your bots? Who are your favorites? How do you, how do you organize them?

    2. PZ

      A lot of my digital life has been delegated to all different types of Grok bots. In general, I organize them in two buckets, life and work. So I have a couple bots that dedicated for each part of my life. For example, my chief of staff, um, it manage all the bots, but I sometimes do talk to other bots. Um, but I delegate the things I don't know who to delegate it to, to the, to the COS bot. So I think last night I was asking it to buy some 3D printing filament for me. Um, so that's the plastic material that 3D printer use to making things. And what's interesting is, um, not only it can help you search, find, and buy the item, you can actually train different task together. Like I asked it once you are done, update the inventory list, 'cause I keep this 3D printing filament inventory in Notion, and I want it to automatically add this record it purchased for me. And, um, I think that's r- truly the power of it, is to like train different tasks in our daily life together and then give it like a higher task and let it figure out, uh, what the steps, what it needs to do. Maybe it can learn it, and then the next time you do it, just tell it, "Do the thing that we did last month," and then even have, have it automatically do it. I have a email manager which will surface all my action items. This was last night, I was checking any action items from my in-input, uh, inbox, and then like there was some USPS delivery issue, then I ask it to, to con- help me contact them. Um, I have the calendar manager who is become... in fact, become my calendar now. So I'm scheduling someone for, uh, for a coffee chat next week. And then most of my time today, now I just take a screenshot of the conversation. It can be on any IM tool. Um, this one's on LinkedIn, and I just send it, and then ask it to put a placeholder on my calendar. Um, almost never open the calendar app anymore.

    3. CV

      [chuckles]

    4. PZ

      Um, you can also put bots into a group. So let's say in this example, let's... I had this idea designing a-

    5. CV

      [laughs]

    6. PZ

      ... app that translate cats meow to English. So I throw this idea into the group chat. And then in the group chat we have a PM, we have a designer, we have a engineer, and then they started 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 used it to prepare the podcast that we are doing right now. Um, I don't have a microphone, and [chuckles] I, I asked my IT bot, who's like taking care of all my IT questions, uh, what type of microphone I need, and I only have this one. Does it work? And, uh, for personal life, it's replacing my news app. So every morning, 7:00 AM, I'll receive, um, um, a newsletter, and it's personalized. I tell it I want, uh, AI information. I want news about AI that relevant to me. Um, I want it to like have it do fact check, um, and then source the official, um, links as much as possible. And then this one is a legal advisor. So it's taking care of a lot of repetitive task. For example, I'm in this wait list for... I'm applying Green Card. I'm in wait list for this, uh, visa bulletin. I'm checking manually every month in the past. So I just dedicated this task to it, 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?" Um, so data.

    7. CV

      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-

    8. PZ

      Yeah

    9. CV

      ... 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 wanna open up the app, click the buttons, pick the right one, get sucked into the reviews, get distracted by the, you know, associated products. You're just like, "Buy, buy the thing." Or, you know, even calendar events, you like pull it up and you look and you're like, "Ah, I have a conflict. What do I do?" And you get distracted by Slack. Like all these things I think just 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, the breadth of, of use cases here is, 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, uh, are, are a little different, different than the average, you know, admin shopping one?

    10. JB

      I do have some that are a little bit particular, and one is just... I just started a few days ago. Um, I've been learning Japanese, and the thing about Japanese as a language is there's, there's hiragana, there's katakana, and there's kanji. And so there's different ways of reading, uh, one language. Um, and recently I had the thought to just maybe communicate with, um, this bot, which is just a Japanese practice bot, um, 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." Um, I was having it look for a specific book, as you can tell up above. Um, I was gonna have it translate it, but then it came out, so I ended up buying it. Um, the other use case is, uh, one, maybe that's very particular. I think we're, we're all aware of how, um, the American insurance system is set up.

    11. CV

      [laughs] Yes.

    12. JB

      Um, 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, my insurance plan, take any photo of a receipt or, uh, you know, any sort of, um, doctor statement, uh, and just ensure that I'm getting the most bang for my buck. Um, and this one, uh, you know, half the time it doesn't even... Uh, there, 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, and, um, know that I'm getting my money's worth.

    13. CV

      Yeah. I wanna give people, I'm guessing, kinda how this is set up, which is you're like, "This is my plan. Here's my coverage. Um, anytime I'm gonna 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?

    14. JB

      And in addition, anytime there's an invoice or a receipt, I say, "Do I need to do another follow-up?" Or-

    15. CV

      Got it

    16. JB

      ... um, you know, "Am I getting the maximum savings?" [chuckles]

    17. CV

      [chuckles] I love this so much. As a self-employed person who finances her own healthcare, um, this is gonna be one that I go set up right out the gate.

  11. 39:0541:31

    Practical tips for when bots don’t do what you want

    1. CV

      Okay. Last lightning round 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. Um, when the bots are being silly, when they're, 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?

    2. JB

      Here's the thing about working at SpaceX AI, is oftentimes when you need to troubleshoot, they ask for your session ID.

    3. CV

      [laughs]

    4. JB

      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.

    5. PZ

      I reply with a lot of emotion sometimes.

    6. CV

      [laughs]

    7. PZ

      But I think a useful tips is every time, um, you can ask the bot to memorize this, so in the future, if this happen again, then just follow the script you learned last, last time. Um, so kinda distill and then iterate it itself. Um, and then the longer you use it, the better it become and more adapts to your needs.

    8. CV

      I love that. Great, great tips 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 gonna go back. You're gonna get a brand new clairevo.com by the end of the afternoon. I am so psyched about this. You just gave me the best ideas. Um, 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?

    9. JB

      I'm chronically online. Uh, you can find me @johnbai, which is just my name.

    10. PZ

      Yeah, the same for me. I'm on X. Um, and it's lovely to be anybody, um, post and talk about design of the Grok Bot there.

    11. CV

      Awesome. Well, and y'all go out and try it. Um, love, uh, truly, it's been really awesome and regretfully has replaced my beloved OpenClaus, so I think it's, it's worth a spin. Both of you, thank you so much for joining How I AI.

    12. JB

      Thank you. Thank you for having us.

    13. PZ

      Thank you.

    14. CV

      [upbeat music] 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 howiai pod.com. See you next time.

Episode duration: 41:34

Install uListen for AI-powered chat & search across the full episode — Get Full Transcript

Transcript of episode zJEHbvT5_Yg

Get more out of YouTube videos.

High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.