🎙️ This week on How I AI: How Notion’s design team uses Claude Code to prototype

02/23/26
Source: Lenny’s Newsletter by Lenny Rachitsky. Read the original article

TL;DR Summary of How Notion Designs with AI: Brian Lovin’s Prototype Playground and Claude Code Workflows

Brian Lovin from Notion created a shared AI-powered prototype playground that converts Figma designs into working code using Claude Code. This approach enables designers to test and refine ideas in a live Next.js environment, catching real-world edge cases early. By teaching AI to automate repetitive tasks and self-correct, the team improves efficiency and builds more plausible, production-ready designs. The system fosters collaboration and helps bridge the gap between static design and functional AI-driven prototypes.

Optimixed’s Overview: Transforming Design-to-Code Workflows with AI-Driven Prototyping

Innovative AI-Powered Prototyping at Notion

Brian Lovin, a product designer at Notion, has pioneered a code-first prototyping approach that leverages AI to bridge the gap between static design and interactive code. Instead of relying solely on tools like Figma, Brian’s team uses a shared Next.js app called the “prototype playground” where designers can turn Figma mockups into real, testable prototypes connected to actual AI models like Claude.

Key Features and Benefits

  • Shared Environment: A centralized repository organizes prototypes by designer, enabling easy discovery, reuse, and collaboration across the team.
  • Real AI Integration: Prototypes interact with live AI models, revealing edge cases and realistic user experience challenges that static mockups cannot show.
  • Automation with Claude Skills: Custom AI skills automate repetitive tasks and correct AI hallucinations, such as searching for correct icon names across thousands of files.
  • Custom Slash Commands: Commands like /figma streamline complex workflows, allowing even non-technical team members to deploy and verify prototypes effortlessly.

Philosophy and Workflow Impact

Brian emphasizes early validation by moving designs from “napkin sketches” to production code as quickly as possible. Testing prototypes in a browser helps uncover issues with loading states, responsiveness, and interactions that static designs mask. His guiding principle for AI collaboration is to avoid manual intervention by teaching AI systems to execute and verify tasks autonomously, enhancing productivity and design accuracy.

This innovative workflow represents a significant leap in AI-assisted product design, empowering teams to create more practical, user-centered experiences while reducing the friction between design and development phases.