Code-First Prototyping for AI Product Design
Notion designer Brian Lovin demonstrates how a shared Next.js prototype playground accelerates B2B SaaS design. By leveraging Claude Code, MCPs, and automated verification loops, teams can bridge the gap between static mockups and production-ready AI experiences.
The Shift to Code-First Design
In the rapidly evolving landscape of B2B SaaS and AI product development, the traditional design-to-engineering handoff is becoming a bottleneck. Brian Lovin, a designer at Notion, illustrates a paradigm shift where designers move away from static Figma mockups and into live, code-based prototyping environments. This approach, centered around a shared Next.js application called "Prototype Playground," allows design teams to encounter "reality" earlier in the development cycle. By building prototypes in the browser, teams can identify loading states, responsive issues, and AI model behaviors that static designs fail to capture.
Strategic Implementation of AI Tools
The core of this strategy is the integration of AI coding agents, specifically Claude Code, into the design workflow. Lovin demonstrates how designers can use natural language prompts to generate, modify, and deploy code without extensive manual coding. Key to this workflow is the use of Model Context Protocol (MCP) servers. By connecting tools like Chrome DevTools and Figma to the AI agent, the system can autonomously verify UI changes, compare implementations against source designs, and fix errors. This creates a closed-loop system where the AI not only writes code but also tests and refines it, significantly reducing the time spent on manual debugging and QA.
Operational Efficiency and Team Collaboration
The Prototype Playground serves as a centralized hub for the design team, fostering collaboration through shared code repositories. This setup allows designers to reuse components, observe peer work, and maintain a consistent design system. Furthermore, the implementation of custom slash commands and skills automates repetitive tasks, such as creating new prototype directories or deploying to Vercel. These automations lower the barrier to entry for non-technical designers while maintaining the rigor of a professional development environment. The result is a more agile design process that aligns closely with engineering realities, ultimately leading to higher quality AI-powered products.
Conclusion
For organizations building AI-native products, adopting code-first prototyping is no longer optional but essential. By leveraging AI agents and MCPs, design teams can validate complex interactions and model behaviors in real-time. This approach minimizes wasted effort on unfeasible designs and accelerates the path from concept to production, providing a competitive edge in the AI market.
Key insights
-
Static design tools like Figma are insufficient for validating AI-driven user experiences, which require dynamic testing of model responses and error states. Code-based prototyping allows designers to observe how AI models actually behave in real-world scenarios.
Impact: Reduces the risk of shipping AI features that fail in production by validating model capabilities and failure modes early in the design process.
-
Centralizing prototypes in a shared code repository enables cross-team visibility and code reuse, breaking down silos between designers and engineers. This fosters a culture of experimentation and rapid iteration.
Impact: Accelerates design iteration cycles by allowing teams to borrow and adapt successful patterns, reducing redundant work and improving consistency.
-
Integrating MCPs like Chrome DevTools and Playwright allows AI agents to autonomously verify UI changes and fix errors without human intervention. This creates a self-correcting development loop that enhances code quality.
Impact: Significantly reduces manual QA time and developer intervention, allowing teams to focus on high-level strategy and complex problem-solving.
-
The principle of "teaching the AI to do it for itself" is crucial for maximizing agent autonomy. When an agent requests manual action, automating that task extends the agent's capability and efficiency.
Impact: Increases the scope of tasks that can be delegated to AI agents, leading to faster development cycles and reduced human bottleneck.
-
Custom slash commands and skills can encapsulate complex workflows, such as Figma-to-code conversion and deployment, making advanced development tasks accessible to non-technical designers. This lowers the barrier to entry for code-first design.
Impact: Empowers designers to execute end-to-end development tasks, reducing dependency on engineering resources and accelerating time-to-market.
Action items
-
Establish a shared Next.js repository for design prototypes, with namespaced directories for each team member. Implement shared components and styles to maintain design consistency across prototypes.
Impact: Creates a centralized hub for design experimentation, enabling code reuse and improving team visibility into ongoing projects.
-
Integrate Claude Code with MCP servers for Chrome DevTools and Figma. Configure the agent to automatically verify UI changes and compare implementations against Figma designs.
Impact: Automates the verification process, ensuring high-fidelity conversions from design to code and reducing manual QA efforts.
-
Develop custom slash commands for common tasks such as creating new prototypes, deploying to staging, and running lint checks. Include instructions for the AI to handle prerequisites and error resolution.
Impact: Streamlines repetitive development tasks, making the workflow more accessible to designers and reducing the cognitive load on engineers.
-
Implement a "self-correction" protocol where AI agents are instructed to perform any task they request from the user. For example, if the agent asks to check the browser, configure it to use Playwright to do so.
Impact: Maximizes agent autonomy and efficiency, allowing for longer, uninterrupted development sessions with fewer human interventions.
-
Train design teams to prototype AI features in code rather than static mockups. Encourage experimentation with live AI models to understand their capabilities and limitations.
Impact: Ensures that AI product designs are feasible and robust, reducing the risk of shipping features that fail to meet user expectations.
Quotes
“The way I think about designing B2B SaaS is you want your designs to encounter reality as early as possible.”
“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”
“I don't think you can design a good chat experience in figma”