Descriptions:
Brian Lovin, a product designer at Notion, joins How I AI host Claire Vo to walk through Prototype Playground—an internal Next.js application he built that lets every designer (and any PM or engineer who opts in) on the Notion team spin up live, browser-based prototypes using Claude Code. The project reflects a design philosophy Lovin has held throughout his career: get work into a real browser as fast as possible, because Figma mockups hide loading states, responsive layout failures, and interaction feel that only surface when you’re actually clicking through a live interface.
The episode demonstrates two key productivity features Lovin built into the playground. The first is custom Claude Code slash commands—like `/create-prototype`—that scaffold new prototypes by providing Claude with concrete code samples showing exactly what a successful output looks like, rather than relying on abstract instructions. The second is Figma MCP integration: designers can paste a Figma frame URL directly into a Claude Code prompt and receive a working Next.js component in return, dramatically shortening the path from static mockup to interactive prototype. All prototypes live in a single shared repository, namespaced by designer, so team members can browse each other’s work and pull ideas across projects.
For design leaders evaluating a shift toward code-first prototyping, Lovin offers both a technical blueprint and an organizational rationale. When designers can open pull requests directly, the team conversation moves from debating whether something is buildable to evaluating whether it’s worth building—a structural change in how product teams assess and validate ideas before committing engineering resources.
📺 Source: How I AI · Published February 23, 2026
🏷️ Format: Workflow Case Study
