“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype

Building a Collaborative Prototype Playground

Notion's design team, led by Brian Lovin, has redefined the prototyping process by creating a shared environment known as the 'prototype playground.' This platform utilizes Claude Code, an AI-powered coding tool, allowing designers to collaborate in real-time. Unlike traditional methods where designers work in isolated repositories or static Figma designs, this playground fosters a more dynamic and interactive approach. The shared Next.js app enables the team to create, share, and iterate on prototypes seamlessly, enhancing collaboration and innovation.

The Role of AI in Accelerating Design Processes

AI's integration into the design workflow has been transformative. Lovin emphasizes that encountering 'reality' early in the design process leads to better outcomes. By utilizing Claude Code's capabilities, designers can quickly prototype and test ideas, significantly reducing the time from concept to execution. The 'plan mode' feature of Claude Code allows designers to outline their projects more effectively, ensuring that they stay aligned with project goals while iterating on design elements.

Transforming Designs into Functional Code

One of the standout features of Claude Code is its ability to convert Figma designs into production-ready code with a single prompt. This capability addresses a critical gap in the design process, where static tools like Figma often fall short for AI-powered products. Lovin's approach encourages designers to teach Claude Code to automate repetitive tasks, enhancing efficiency and allowing them to focus on more creative aspects of their work. The integration of custom Claude slash commands further streamlines workflows, making it easier for teams to manage complex projects.

Key Insights and Best Practices for Designers

For professionals looking to leverage AI in their design processes, Lovin offers several actionable insights. Firstly, embracing a code-based prototyping approach is essential for developing AI-driven products. Secondly, utilizing AI tools like Claude Code can significantly enhance productivity, allowing designers to focus on creativity rather than mundane tasks. Lastly, teaching AI to perform specific tasks can lead to more efficient workflows, ultimately resulting in better product outcomes. By adopting these practices, design teams can stay ahead in an increasingly competitive landscape.