Embrace Reality Early: Code-Based Prototyping for AI Products

The future of product design isn't just about pixels; it's about the friction of reality and the speed of code. Brian Lovin, a designer at Notion AI, reveals how embracing AI-assisted coding and a shared "prototype playground" has fundamentally shifted his team's approach, moving them closer to production and uncovering critical design flaws much earlier. This conversation unveils the hidden consequence of relying solely on static design tools for AI-powered products: a disconnect from the actual user experience. Designers and product leaders looking to build truly effective AI products will find an advantage in understanding how to integrate code-based prototyping and leverage AI not just for generation, but for rapid iteration and reality-testing, ultimately leading to more robust and user-centric outcomes.

The Browser as the Ultimate Design Tool: Embracing Reality Early

The conventional wisdom in design often centers on visual fidelity and static mockups. However, Brian Lovin argues that for B2B SaaS, and especially for AI-powered products, this approach creates a dangerous disconnect from reality. The true test of a design, he posits, happens when it encounters the browser--where loading states, screen resizing, and interactive elements reveal flaws that Figma can never expose. This is where Lovin’s "Prototype Playground" comes into play. It’s not a magical new tool, but a simple Next.js application that serves as a centralized hub for the Notion design team's functional prototypes.

The power of this shared repository lies in its collaborative nature. Designers can "yoink" (borrow) cool ideas and code snippets from their colleagues' prototypes, accelerating their own work and fostering a shared understanding of what's possible. Before the playground, designers often worked in isolated repositories, leading to duplicated effort and a fragmented approach to creating Notion-like UIs. By consolidating prototypes, Lovin’s initiative not only streamlines the prototyping process but also democratizes code-based design within the team. While not everyone on the team has fully adopted it, the playground provides a tangible environment for those who want to move beyond static designs and engage with the immediate feedback loop of functional code.

"The way I think about designing B2B SaaS is you want your designs to encounter reality as early as possible."

This philosophy directly challenges the traditional design workflow. Instead of spending weeks perfecting a Figma mockup that might fail spectacularly in development, Lovin advocates for rapid iteration in a functional environment. The immediate payoff is faster design cycles, but the deeper, long-term advantage is the creation of products that are inherently more aligned with user needs and technical feasibility because they’ve been tested against "reality" from the outset.

From Pixels to Playgrounds: AI as the Great Equalizer

The advent of AI-assisted coding tools like Claude Code has been a game-changer for Lovin and his team. What once required significant technical expertise or tedious manual effort can now be scaffolded rapidly. The "Prototype Playground" isn't just a repository; it's an environment optimized for AI interaction. Lovin emphasizes the critical importance of using "plan mode" before generating code, a practice that leverages his development background to catch potential issues early. This structured approach, combined with tools like Monologue for faster prompting, allows designers to articulate complex ideas and see them manifest as functional code.

The integration of AI extends beyond simple code generation. Lovin has developed custom "slash commands" and "skills" within Claude Code to automate repetitive tasks and enforce team standards. For instance, a /figma command can translate a Figma frame into functional code, drastically reducing the friction of asset handoffs. This isn't about replacing designers with AI, but about augmenting their capabilities. The consequence of this augmentation is a significant reduction in the time spent on mundane tasks, freeing up designers to focus on higher-level problems and user experience nuances.

"Anytime the AI asks you to do something, you should, before responding, try your best to see if you could teach the AI to answer that question for itself."

This principle--teaching the AI to self-correct and self-verify--is a crucial insight. It transforms the AI from a simple code generator into a more autonomous development partner. By building skills like find icon to address AI's tendency to hallucinate icon names or a deploy command that automates the entire GitHub and Vercel deployment process, Lovin is not just prototyping faster; he's building a more robust and self-sufficient design workflow. This creates a competitive advantage by enabling the team to iterate on complex features, like AI conversational interfaces, with a speed and depth that static tools simply cannot match. The delayed payoff here is a design process that is not only more efficient but also produces fundamentally better-aligned products for the age of AI.

The Hidden Complexity of "Done"

The journey from a static Figma design to a production-ready feature is often fraught with hidden complexities. Lovin highlights how AI tools, while powerful, can still require careful guidance. The frustration of AI "hallucinating" CI checks or misinterpreting icon names, for example, led to the development of specific Claude skills. This is where the "consequence mapping" becomes critical: the immediate problem (AI errors) leads to a downstream solution (custom skills and commands), which in turn creates a lasting advantage (a more reliable and efficient AI-assisted workflow).

Lovin's deploy command is a prime example of addressing downstream friction. It automates the entire process of creating a branch, committing code, opening a pull request, and monitoring CI checks. This might seem like overkill for simple prototypes, but its true value lies in teaching implicit workflows. By observing the deploy command, designers unfamiliar with Git can learn about branching, commits, and pull requests in a low-stakes environment. The immediate benefit is a streamlined deployment process, but the long-term payoff is upskilling the design team in fundamental development practices, making them more effective collaborators with engineering.

"The problem with Prototype Playground, it's still a Next.js app, it's still React and TypeScript and Git and branches, and is just a lot of concepts to throw at someone who maybe is used to only prototyping in Figma or they're intimidated by a terminal or code."

This statement reveals the core tension: the desire for speed and accessibility versus the need for robust, real-world development practices. Lovin's approach is to use AI to bridge this gap, automating the complex parts while still exposing the underlying concepts. The consequence of this is a design team that can not only prototype faster but also develop a deeper understanding of the development lifecycle, leading to more informed design decisions and a smoother path to production. The conventional wisdom might suggest that simplifying the process means dumbing it down, but Lovin demonstrates that by intelligently automating, you can actually elevate the team's capabilities.

• Embrace Reality Early: Shift from static mockups to functional prototypes in the browser as soon as possible. This uncovers critical design flaws that visual tools miss.
• Centralize Prototyping Efforts: Create a shared repository for functional prototypes to foster collaboration, share ideas, and reduce duplicated effort.
• Leverage AI for Scaffolding: Utilize AI-assisted coding tools for rapid prototyping, focusing on "plan mode" and teaching the AI to self-verify for better outcomes.
• Automate Repetitive Tasks with AI: Develop custom commands and skills to handle common issues like icon hallucination or the entire deployment process, freeing up human focus.
• Teach Through Automation: Use AI-driven workflows, like the deploy command, to onboard less technical team members to essential development concepts like Git branching and CI checks.
• Design for AI-Powered Products in Code: Recognize that designing AI interactions often requires a code-first approach to truly understand model capabilities and limitations.

• Prioritize "Mouthfeel" in Tooling: Choose AI models and development environments that feel intuitive and effective for your specific workflow, even if they aren't the most conventional.

• Immediate Action (Next Quarter):

  • Identify and explore 1-2 AI coding tools (e.g., Claude Code, Cursor) for personal prototyping.
  • Experiment with "plan mode" and AI self-verification techniques in your current projects.
  • Document 2-3 common, repetitive tasks in your design or development workflow that could be automated.

• Longer-Term Investment (6-18 Months):

  • Investigate or build a shared prototyping environment similar to Notion's "Prototype Playground."
  • Develop custom AI skills or commands to address recurring problems within your team's workflow.
  • Train designers on the fundamentals of code-based prototyping and AI-assisted development.
  • Re-evaluate design tool choices for AI-centric products, prioritizing environments that support functional prototyping.