“I Haven’t Written a Single Line of Front-End Code in 3 Months”: Notion’s Prototype Playground

Why It Matters

By embedding AI‑generated code into the design workflow, Notion shortens time‑to‑market and reduces hand‑off friction, setting a new standard for rapid prototyping in SaaS product development.

Key Takeaways

• Notion built shared Next.js prototype playground.
• Claude Code enables AI-driven code generation from prompts.
• Designers iterate with functional prototypes, not static Figma.
• Custom Claude slash commands automate Git and deployment tasks.
• Early reality testing improves AI product design outcomes.

Pulse Analysis

The rise of AI‑assisted coding is reshaping how product teams move from concept to implementation. Notion’s prototype playground, built on Next.js and Claude Code, exemplifies this shift by letting designers generate interactive components directly from prompts. This eliminates the traditional bottleneck where designers hand off static Figma files to engineers, fostering a more fluid, collaborative environment that blurs the line between design and development.

Beyond speed, the playground introduces automation that tackles repetitive engineering chores. Custom Claude slash commands streamline Git commits, branch management, and deployment pipelines, while Claude’s plan mode offers structured, reliable code suggestions. By integrating these AI‑driven workflows, Notion’s team can validate ideas against real‑world constraints early, reducing costly revisions later in the product cycle. The ability to convert a Figma mockup into production‑ready code with a single prompt further compresses iteration loops, empowering designers to test functionality and user experience in near‑real time.

For the broader B2B SaaS landscape, Notion’s model signals a paradigm shift. Companies that adopt code‑centric prototyping can accelerate AI product development, improve cross‑functional alignment, and lower reliance on specialized front‑end engineers for early‑stage work. While challenges remain—such as ensuring code quality and managing AI hallucinations—the demonstrated benefits of faster feedback, reduced hand‑off friction, and scalable automation suggest that AI‑powered prototype environments will become a competitive differentiator in the next wave of digital product innovation.

Original Description

Brian Lovin is a designer at Notion AI who has transformed how the design team builds prototypes, by creating a shared code environment powered by Claude Code. Instead of designers working in isolated repositories or limited to static Figma designs, Brian built a collaborative “prototype playground” where the entire team can create, share, and iterate on functional prototypes. In this episode, Brian demonstrates how AI-assisted coding has dramatically accelerated the design process and why code-based prototyping is essential for building AI-powered products.

What you’ll learn:

1. How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team

2. Why encountering “reality” early in the design process leads to better products

3. How to use Claude Code’s “plan mode” to get better results when prototyping

4. The power of custom Claude slash commands and skills to automate repetitive tasks

5. How to transform Figma designs into working code with a single prompt

6. Why AI-powered products can’t be effectively designed in static tools like Figma

7. Brian’s rule for working with AI: “When Claude asks you to do something, teach it to do that thing itself”

Brought to you by:

WorkOS—Make your app enterprise-ready today: https://workos.com?utm_source=lennys_howiai&utm_medium=podcast&utm_campaign=q22025

Orkes—The enterprise platform for reliable applications and agentic workflows: https://www.orkes.io/

Detailed workflow walkthroughs from this episode:

• How Notion Designs with AI: Brian Lovin’s Prototype Playground and Claude Code Workflows: https://www.chatprd.ai/how-i-ai/how-notion-designs-with-ai-brian-lovins-prototype-playground-and-claude-code-workflows

• Automate Your Git and Deployment Workflow with a Custom AI Command: https://www.chatprd.ai/how-i-ai/workflows/automate-your-git-and-deployment-workflow-with-a-custom-ai-command

• Build an AI Workflow to Convert Figma Designs to Code with a Self-Correction Loop: https://www.chatprd.ai/how-i-ai/workflows/build-an-ai-workflow-to-convert-figma-designs-to-code-with-a-self-correction-loop

• Use Claude Code to Rapidly Build Interactive Prototypes from Ideas: https://www.chatprd.ai/how-i-ai/workflows/use-claude-code-to-rapidly-build-interactive-prototypes-from-ideas

In this episode, we cover:

(00:00) Introduction to Brian

(02:36) Building for B2B SaaS

(04:42) Notion’s prototype playground: what it is and how it works

(08:01) The technical background of designers using the playground

(10:52) Demo: building a podcast player prototype

(16:00) Actionable tips for better Claude Code results

(20:16) Analyzing the result

(20:30) Creating slash commands to simplify the workflow

(23:03) Turning Figma designs into production-ready code

(25:06) MCP frustrations and tips

(30:54) Demo: creating a custom “find icon” skill

(35:03) Demo: Creating a deploy command to simplify GitHub workflows

(41:09) Quick recap

(41:59) How code-based prototyping is changing design at Notion

(46:48) Brian’s tool preferences

(48:42) Prompting techniques when AI is not listening

Tools referenced:

• Claude Code: https://claude.ai/

• Cursor: https://cursor.sh/

• Next.js: https://nextjs.org/

• Figma: https://figma.com/

• Monologue: https://www.monologue.to/

• GitHub: https://github.com/

• GitHub Desktop: https://desktop.github.com/

• Tailwind CSS: https://tailwindcss.com/

• Bun: https://bun.sh/

Other references:

• Claude Skills explained: How to create reusable AI workflows: https://www.lennysnewsletter.com/p/claude-skills-explained

Where to find Brian Lovin:

Website: https://brianlovin.com/

LinkedIn: linkedin.com/in/brianlovin

X: https://twitter.com/brian_lovin

Where to find Claire Vo:

ChatPRD: https://www.chatprd.ai/

Website: https://clairevo.com/

LinkedIn: https://www.linkedin.com/in/clairevo/

X: https://x.com/clairevo

_Production and marketing by https://penname.co/._

_For inquiries about sponsoring the podcast, email [e-mail]._