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

Grok Bot designers John Bai and Peng Zheng use AI agents to build personal sites and product prototypes, including Peng's self-updating personal website that runs on Grok Bot as its entire backend pipeline with no CMS and no Figma file. John Bai's Figma Bro bot handles production design tasks while he is away from his laptop, and he uses voice memos to direct Figma work through an MCP connection. The two designers also use DevBot for a "shower thought to prototype" workflow to test interaction ideas without first going through a product manager or engineer.

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. Listen or watch on YouTube https://youtu.be/zJEHbvT5 Yg , Spotify https://open.spotify.com/show/4aRP2XSavdtrLG5FZoonOK , or Apple Podcasts https://podcasts.apple.com/us/podcast/how-i-ai/id1809663079 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 https://workos.com/?utm source=lennys howiai&utm medium=podcast&utm campaign=q22025 —Make your app enterprise-ready, with SSO, SCIM, RBAC, and more Vanta https://www.vanta.com/howiai —Automate compliance and simplify security In this episode, we cover: 00:00 https://www.youtube.com/watch?v=zJEHbvT5 Yg Introducing John and Peng 02:53 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=173s The Grok Bot hype train 04:35 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=275s Peng’s self-updating personal website built with Grok Bot 15:12 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=912s How AI makes design more accessible 19:35 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1175s Website update result 20:13 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1213s John’s Figma Bro bot 23:35 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1415s Creating marketing materials for the bot marketplace 26:00 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1560s DevBot: from shower thoughts to working prototypes 28:48 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1728s The trash can method of software development 31:19 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=1879s Other bots John and Peng are using 39:05 https://www.youtube.com/watch?v=zJEHbvT5 Yg&t=2345s Practical tips for when bots don’t do what you want Tools referenced: • Grok Bot xAI : https://x.ai/bot https://x.ai/bot • Figma: https://www.figma.com https://www.figma.com • Figma MCP server: https://www.figma.com/mcp-catalog/ https://www.figma.com/mcp-catalog/ • Google Places API: https://developers.google.com/maps/documentation/places/web-service https://developers.google.com/maps/documentation/places/web-service • Notion: https://www.notion.so https://www.notion.so • Swarm Foursquare : https://www.swarmapp.com https://www.swarmapp.com Other references: • Designing Grok Bot with Grok Bot: https://x.ai/bot/guides/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 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 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 https://x.com/johnbai Peng Zheng on X: https://x.com/pengzheng https://x.com/pengzheng Where to find Claire Vo: ChatPRD: https://www.chatprd.ai/ https://www.chatprd.ai/ Website: https://clairevo.com/ https://clairevo.com/ LinkedIn: https://www.linkedin.com/in/clairevo/ https://www.linkedin.com/in/clairevo/ Production and marketing by https://penname.co/ https://penname.co/ . For inquiries about sponsoring the podcast, email \ email protected\ /cdn-cgi/l/email-protection .