How I AIHow SpaceXAI designers use Grok Bot and Figma MCP to ship faster
CHAPTERS
- 0:00 – 3:01
Why bots change the feel of work: getting tasks done away from your laptop
Claire and John open with a concrete example of delegating design production to a bot while John is away from his computer. The theme is using AI to reduce toil and keep humans focused on higher-value decisions—without being tethered to a desk.
- •AI as a way to get “off the computer,” not spend more time on it
- •John delegates a Figma production task via screenshots and a bot
- •Async work happens during meetings or workouts
- •Bots act as executors for repetitive design steps
- 3:01 – 4:57
Grok Bot’s breakout moment: shipping amid hype and fast feedback loops
Claire frames the surge of interest in Grok Bot and asks what it’s like to be on the design team during a rapid adoption moment. John describes learning from users in real time and iterating as the product evolves.
- •Rapid attention and engagement around a designer-built product
- •Users teaching the team new workflows and tips
- •Design team noticing missing features while preparing demos
- •Product-market-fit intensity accelerates iteration
- 4:57 – 6:28
Peng’s origin story: a Chinatown photo becomes a living personal site idea
Peng recounts a small curiosity-driven exploration—searching for a temple image on takeout boxes—that leads to taking photos and generating a whimsical 3D miniature. That visual becomes the seed for redesigning his personal website into something more alive than a static portfolio.
- •Real-world exploration (Chinatown walk) leads to creative raw material
- •Turning a storefront photo into a 3D clay miniature aesthetic
- •Personal websites feel high-effort but low-return for designers
- •Goal: make the site “alive” and personally useful
- 6:28 – 8:30
From static site to self-updating check-ins: designing the simplest pipeline
Peng explains how he used Grok Bot to avoid building a full CMS and admin portal. He iteratively discovered the system by building step-by-step—no Figma file, no spec—until it became an automated check-in workflow.
- •Start with the idea; let the system emerge via iteration
- •Avoiding CMS/admin/hosting overhead by delegating to a bot
- •“Trust the vibe” workflow: build → look → refine → repeat
- •Bot evolves into a repeatable check-in pipeline
- 8:30 – 9:28
Inside the check-in bot: Places lookup, image processing, and structured outputs
Peng details how the bot turns minimal inputs (photo, screenshot, or place name) into a website-ready entry. It resolves locations via Google Places, generates consistent visuals (including light/dark versions), and outputs structured data for rendering.
- •Place identification and coordinates via Google Places/Maps APIs
- •Image fixes: perspective correction, removing people, isolating facade
- •Consistent visual style: 3D miniature + light/dark variants
- •Bot outputs a data structure the website expects
- 9:28 – 15:11
Live demo check-in: Bernal Heights swing + adding people via social screenshots
They run a demo using Bernal Heights (and its clandestine swing) as the check-in target. Peng shows how adding people can be as easy as sending friends’ social profile screenshots so the bot can assemble a complete entry.
- •Minimal-input check-in: pick a place and find an image
- •Add people by supplying screenshots of social profiles
- •Result publishes directly to the site with the new entry
- •Low friction is what makes the site realistically maintainable
- 15:11 – 20:27
AI as a creativity unlock for designers: expanding ‘taste’ into new mediums
Claire, John, and Peng discuss how AI reduces the barrier to previously inaccessible skills like illustration and motion. The emphasis is that designers can move up the stack—from pixel toil to higher-leverage craft, experimentation, and delight.
- •AI makes hard-to-learn skills (illustration, motion) more reachable
- •Lower creation cost enables new combinations and experimentation
- •Reframing fear: designers weren’t meant to spend life on “gradient fills”
- •Focus shifts to delight, quality edges, and multi-sensory design
- 20:27 – 23:31
John’s Figma Bro bot: production design from the gym via Figma MCP
John introduces Figma Bro and walks through a real example: aligning and scaling icons consistently across many artboards based on two screenshots. The key is connecting Grok Bot to Figma via MCP and giving clear layout constraints so the file stays clean.
- •Figma Bro executes repetitive layout edits using screenshots as references
- •Voice prompting enables hands-free work while away from desktop
- •Figma MCP connection: share a Figma link + define controls/constraints
- •Up-front layout rules (spacing, board arrangement) reduce messiness
- 23:31 – 25:59
Marketing asset generation for the bot marketplace: templating at scale
John shows a second Figma Bro use case: generating a set of marketplace marketing tiles from a single template, brand backgrounds, and a list of bots. The bot automates the tedious parts (pulling images, updating instances, swapping copy), leaving humans to review and nudge.
- •Create one template, then propagate styling across many assets
- •Automate pulling photos, changing backgrounds, and updating copy
- •Human-in-the-loop: identify missing items and prod for completion
- •Designers spend time on foundations, not repetitive production
- 25:59 – 28:49
DevBot + Experiments: turning ‘shower thoughts’ into interactive prototypes
John explains how DevBot helps capture an interaction idea on the go and produce a working prototype. His example explores a “Share Agent” flow with a screenshot-like animation, yielding multiple variants for quick evaluation.
- •Capture ideas via voice + screenshots, even away from the laptop
- •Bot collaborates with other specialized bots (e.g., motion reasoning)
- •Outputs interactive prototypes with alternative design directions
- •Rapid validation: decide quickly whether to pursue or drop
- 28:49 – 31:24
The “trash can method” of software development: prototype freely, discard cheaply
Claire names the new workflow enabled by cheap prototyping: building with the assumption you can throw ideas away. This reduces cross-functional friction, encourages exploration, and makes product development more playful and creative.
- •Cheap prototypes reduce the need to justify every experiment with ROI
- •Avoids PM/engineering prioritization bottlenecks for small delights
- •Freedom to discard prevents sunk-cost arguments and resentment
- •Faster iteration keeps creative thinking alive
- 31:24 – 37:05
Lightning round: how they organize bots and delegate life + work administration
Peng and John share how bots span their personal and professional lives, often organized into “life” and “work.” Peng describes a ‘chief of staff’ bot that orchestrates other bots, plus automation for email, calendar, shopping, and recurring status checks.
- •Organize bots into life vs work; use a ‘chief of staff’ dispatcher bot
- •Chain tasks: purchase items then update inventories (e.g., Notion)
- •Email and calendar delegation via screenshots and action-item surfacing
- •Group chats with PM/designer/engineer bots to brainstorm ideas
- 37:05 – 41:34
More niche bots + prompting when bots misbehave: memory, tone, and iteration
John shares specialized bots for Japanese practice and navigating insurance reimbursements. They close with practical tips: be mindful of session logs, add emotion if needed, and teach bots to remember fixes so future runs improve.
- •Japanese practice bot outputs kanji + pronunciation + English
- •Insurance bot checks receipts/invoices against plan for savings/follow-ups
- •Be careful how you speak—support/debugging may expose transcripts
- •Ask bots to ‘memorize’ the fix so the workflow improves over time
