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

September 14, 2026

AI Summary

5 min read

When John Bai was at the gym and got a Slack message asking him to update a set of Figma artboards, he didn't stop his workout. He pulled out his phone, took screenshots of the existing work, and sent a voice memo to his custom Grok bot called FigmaBro. By the time he finished his reps, the bot had placed icons in the correct positions, scaled them, rounded the corners, and even experimented with color variations. "I use AI to get me off my computer, not on my computer," Bai says. That philosophy—using AI agents to decouple execution from physical presence and manual effort—runs through everything he and his colleague Peng Zheng build.

The personal site that updates itself

Zheng's story starts with a Chinese takeout box. He saw the white box with the red temple design, wondered if the temple was real, and ended up wandering San Francisco's Chinatown looking for it. He never found the temple, but he took a photo of a small produce shop, ran it through an AI image generator to turn it into a 3D clay miniature, and dropped it onto his long-neglected personal website. That sparked an idea: what if the site wasn't a static portfolio that people look at for thirty seconds, but a living record of where he goes and who he's with?

Continue reading the full summary in the app — free to try.

Read Full Summary →

Free • No credit card required

Listen to Audio Summary Open in App

Never miss an episode of How I AI

Get every new episode summarized in your inbox — free, ~5 minutes to read.

No spam. Unsubscribe anytime.

What you'll learn

1 (00:00) **Cold Open: The Gym-to-Figma Workflow** - John describes using voice prompts to a Figma bot while at the gym, getting design work done without touching a computer.
2 (01:14) **Introduction: Designers Building with Grok Bot** - Host Claire introduces John Bai and Peng Zheng from the Grok Bot design team and previews two main demos.
3 (03:01) **The Designer's Perspective on Grok Bot's Moment** - John and Peng reflect on the sudden explosion of interest in Grok Bot and how they learn from users.
4 (04:57) **Peng's Personal Project: A Whimsical, Self-Updating Website** - Peng explains the origin story of his personal site, starting with a curiosity about a Chinese takeout box.
5 (06:53) **From Static Site to Automated Check-In Pipeline** - Peng describes how he evolved his personal site into a living log of places and people.
6 (10:48) **Why This Pipeline Works for Designers** - Claire and Peng discuss the value of reducing friction for maintaining a high-quality personal site.
7 (16:01) **AI Unlocks Inaccessible Hard Skills** - The conversation shifts to how AI fills skill gaps for designers.

+ Full timestamped outline available in the app

Show Notes

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:

How Peng built a self-updating personal website using Grok Bot as the entire backend pipeline, with no CMS and no Figma file
The exact check-in bot setup that lets Peng send a photo or a place name and have his portfolio update itself automatically
How John’s Figma Bro bot handles production design tasks while he’s at the gym
How John uses voice memos to direct Figma work through an MCP connection without opening his laptop
The “shower thought to prototype” workflow John uses with DevBot to test interaction ideas without first going through a product manager or engineer
The “trash can method” of software development
How both designers organize their personal bot ecosystems
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

Vanta—Automate compliance and simplify security

—

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

—

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: