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

Page: https://stenobird.com/podcast/how-i-ai-7304222/i-haven-t-written-a-single-line-of-front-end-code-in-3-months-how-notion-s-design-team-uses-claude-code-to-prototype
Text version: https://stenobird.com/podcast/how-i-ai-7304222/i-haven-t-written-a-single-line-of-front-end-code-in-3-months-how-notion-s-design-team-uses-claude-code-to-prototype.md
Podcast: [How I AI](https://stenobird.com/podcast/how-i-ai-7304222)
Published: 2026-02-23T12:00:00+00:00
Episode link: https://podcasters.spotify.com/pod/show/pen-name/episodes/I-havent-written-a-single-line-of-front-end-code-in-3-months-How-Notions-design-team-uses-Claude-Code-to-prototype-e3f6amh
Audio file: https://anchor.fm/s/1035b1568/podcast/play/115599505/https%3A%2F%2Fd3ctxlq1ktw2nl.cloudfront.net%2Fstaging%2F2026-1-17%2F418288485-44100-2-860c6534c1256.mp3
Processing state: not_requested
JSON: https://stenobird.com/v1/public/podcasts/how-i-ai-7304222/episodes/i-haven-t-written-a-single-line-of-front-end-code-in-3-months-how-notion-s-design-team-uses-claude-code-to-prototype
Duration seconds: 3105

## Resource

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: How Brian built a shared Next.js app that serves as a collaborative prototyping environment for Notion’s design team Why encountering “reality” early in the design process leads to better products How to use Claude Code’s “plan mode” to get better results when prototyping The power of custom Claude slash commands and skills to automate repetitive tasks How to transform Figma designs into working code with a single prompt Why AI-powered products can’t be effectively designed in static tools like Figma 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 Orkes —The enterprise platform for reliable applications and agentic workflows — 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 producti…

## Actions

- request_transcript: `POST https://stenobird.com/v1/public/podcasts/how-i-ai-7304222/episodes/i-haven-t-written-a-single-line-of-front-end-code-in-3-months-how-notion-s-design-team-uses-claude-code-to-prototype/transcription-requests` — Idempotently request low-priority transcript generation for this episode.
- read_markdown: `GET https://stenobird.com/podcast/how-i-ai-7304222/i-haven-t-written-a-single-line-of-front-end-code-in-3-months-how-notion-s-design-team-uses-claude-code-to-prototype.md` — Read the agent-friendly Markdown representation of this episode resource.

A page view does not enqueue transcription. Agents should invoke `request_transcript` explicitly when they need this episode processed.

## Transcript

Full transcripts are not published on public pages unless there is a clear rights basis.