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 ↗

At a glance

WHAT IT’S REALLY ABOUT

SpaceXAI designers automate Figma and prototypes with Grok Bot workflows

  1. The episode showcases how SpaceXAI designers use Grok Bot plus a Figma MCP connection to offload repetitive work and accelerate shipping.
  2. Peng demonstrates a self-updating personal website that converts photos/place names into consistent 3D-styled check-ins via a bot-driven pipeline using Google Places and image generation.
  3. John demonstrates “Figma Bro,” an agent that edits Figma files from screenshots and instructions to automate production tasks and generate marketing variants from a single template.
  4. The conversation argues AI makes design more accessible by lowering the cost of specialized skills (illustration, motion, prototyping) and shifting designers up the stack toward taste, systems, and delight.
  5. They advocate rapid experimentation—building prototypes quickly and discarding them freely—while improving reliability by teaching bots to remember solutions to recurring issues.

IDEAS WORTH REMEMBERING

5 ideas

Start with a single artifact and let the bot assemble the pipeline.

Peng starts with a whimsical design idea (a 3D “miniature” building visual) and uses Grok Bot to stitch together the missing infrastructure: place lookup (Google Places/Maps), image processing, structured data output, and website rendering—without first designing a full system.

Reduce “update friction” to near zero so personal projects stay alive.

Instead of a static portfolio, Peng’s site becomes a living log: send a photo/screenshot/place name plus a friend’s social profile, and the bot generates coordinates, cleans the photo (perspective fixes/removes people), produces consistent light/dark renders, and formats the entry for the site.

Delegate production design in Figma to agents so designers focus on foundations and quality.

John uses a Figma MCP connection and a purpose-built bot (“Figma Bro”) to perform repetitive production design tasks (consistent icon placement, resizing, rounding, applying color, and duplicating styles across many assets) while he’s away from the computer.

Template once, scale many—then supervise for exceptions.

For marketing assets, John creates one strong template and has the bot propagate the pattern across multiple variants (backgrounds, wallpapers, copy, photos), then returns to spot-check and nudge where gaps remain.

Use agents to prototype “shower thoughts” fast—and throw them away guilt-free.

John’s “DevBot/Experiments” workflow turns a voice-described interaction idea into working code prototypes (e.g., a ‘screenshot’ share animation), allowing quick evaluation and easy abandonment if it doesn’t feel right.

WORDS WORTH SAVING

5 quotes

I use AI to get me off my computer, not on my computer.

Claire Vo

So it's very fun just to going with the flow and, like, trust the vibe.

Peng Zheng

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.

Peng Zheng

I think the fact that I don't have to do this stuff myself is a godsend.

John Bai

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.

Claire Vo

Grok Bot hype and product momentumSelf-updating personal website/check-in pipelineGoogle Places API for location enrichmentImage processing: perspective fix, people removal, 3D miniature styleFigma MCP automation and remote production designMarketing asset generation from templatesRapid prototyping in code via agent workflows (DevBot/Experiments)

High quality AI-generated summary created from speaker-labeled transcript.

Get more out of YouTube videos.

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