Podcast Episode Summary

Podcast: How I AI
Host: Claire Vo
Episode Title: “I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype
Date: February 23, 2026

Episode Overview

This episode centers on how the design team at Notion leverages AI tools—specifically Claude Code—in their prototyping workflow, with a focus on the creation and adoption of “Prototype Playground.” Brian Levin (designer at Notion AI) and host Claire Vo discuss transforming design operations into a “code-first” approach by using AI to expedite and democratize frontend prototyping. They give listeners a practical walkthrough of the workflow, tools, and real-world results—plus tactical tips for designers looking to implement similar AI-driven processes.

Key Discussion Points & Insights

1. Rationale for Prototyping with AI

• “You want your designs to encounter reality as early as possible.”
  (Brian Levin, 00:00 & 03:09)
  Rather than keeping design static in tools like Figma, Brian argues that designers benefit by moving designs into a live environment quickly—surfacing UX issues earlier, iterating faster, and ending up with better products.

• AI coding tools make prototyping “magical.”
  (Brian Levin, 00:45; 04:47)
  The advent of Claude Code (and similar tools) has sped up prototyping significantly, letting even designers with less coding comfort get to working interfaces without the usual overhead.

2. What Is “Prototype Playground”?

• A team Next.js app as a shared prototyping space
  (Brian Levin, 04:47; 07:31)

  • A central Next.js repo, namespaced by user, hosting everyone’s prototypes.
  • Visibility and code reuse: See team projects, borrow/“yoink” code/ideas easily.
  • Shared components and styles for “Notion-y” look/feel.
  • Support for linking external prototypes (e.g., Figma, V0).

• How it was set up

  • Built by Brian and an engineer, deployed on Vercel.
  • “It’s just a pretty basic Next.js app which you can literally use Claude to help make.” (Brian Levin, 08:12)
  • Minimal operational hurdles.

3. Adoption & Team Technical Spectrum

• Mixed technical backgrounds
  • While several design team members were already code-proficient, some created their first code-based prototypes with AI assistance.
  • Still, “Prototype Playground” sees heaviest use from those already interested in coding; some teammates continue with Figma or personal stacks, and that’s okay.
    (Brian Levin, 09:06)

4. Live Walkthrough – Prototyping a Podcast Player

• Workflow highlights:
  • Use Prototype Playground UI or CLI to generate new prototype files.
  • Use Claude Code (often paired with the voice-to-text tool “Monologue”) to interactively draft, plan, and generate code.
  • Emphasis on “plan mode”—having Claude propose and validate a plan before jumping into code.
    (Brian Levin, 13:18, 15:05)

Quote:
“The key thing about using Plan mode is to actually read the plan. And I think this is where having a development background just gives you an edge...But in either case, I still find that having the plan mode and creating some structure before actually writing code is better.”
—Brian Levin [13:18]

• Automating Quality Checks:
  Brian describes teaching Claude to lint code, check TypeScript errors, and run browser tests automatically, rather than prompting the user for manual verification each time.
  (Brian Levin, 18:59; 19:25)

Rule of Thumb:
“Anytime the AI asks you to do something, before responding, try your best to see if you could teach the AI to answer that question for itself.”
—Brian Levin [18:59]

5. MCP (Memory, Context, Plugins) and Slash Commands Integration

• Slash commands as custom workflows/prompts
  • /create-prototype and /figma commands streamline common tasks, from initiating new code pages to Figma frame imports and iterative implementation verification.
  • The /figma command, for example, performs Figma design import, builds in Next.js, and runs a verification loop by opening the browser and comparing against the Figma frame—adjusting up to 3 iterations or until satisfied.
    (Brian Levin, 22:37–24:52)

Quote:
“The most important thing is we enter this third phase called the verification loop, where [Claude] is going to open the browser and compare the implementation it created to the original Figma file...”
—Brian Levin [23:18]

• Slash command onboarding/user support:
  Every command checks for tool prerequisites (e.g., MCP server, GitHub CLI), returning onboarding instructions if not installed, lowering barriers for non-technical designers.
  (Brian Levin, 23:39; 36:08)

6. Code Reuse and AI-Assisted Automation

• Claude Skills & Programmatic Tasks:
  Special skills (e.g., find-icon) speed up annoying, repetitive processes. The skill programmatically searches for the correct icon names—mirroring the advice a team lead would give a new hire.
  (Brian Levin, 30:58–33:59)

Quote:
“Oh, yeah, like all this. Like, I did not type a single line of code in this, right? Like, this is 100%... prompted.”
—Brian Levin [34:49]

7. Democratizing Deployment & Lowering Barriers

• Deployment command (/deploy):
  • Validates pre-reqs, ensures feature branches, runs tests, walks user through pushing/PR on GitHub.
  • Opens the pull request in browser and monitors CI checks.
  • Again, the philosophy is to have Claude do “one loop” through all routine steps, reducing hand-holding but still surfacing the process transparently.
    (Brian Levin, 35:08–38:02)

Quote:
“My favorite part… is not going to be what people think. I think the slash command is amazing… I love that you just open it up in a browser window.”
—Claire Vo [39:54]

8. Impact on Design Team Workflow

• Most still use Figma for 60-70% of work, but code-first prototyping is essential for AI-infused feature design (e.g., chatbots, Notion AI).
• Static design in Figma breaks down for dynamic, model-driven experiences.
  (Brian Levin, 42:39–45:00)

Quote:
“If you are building a chat bot… I don’t think you can design a good chat experience in Figma… What you can’t design in Figma is what it actually will feel like to use that thing.”
—Brian Levin [42:39]

• Frequent model advances (Opus 4.5 and beyond) make constant prototyping with current capabilities necessary, even if it feels repetitive.

9. Tool Preferences: Claude + Cursor

• Brian likes both Claude Code (for planning, output, and style) and Cursor (in-editor fixes), preferring Opus 4.5 for its reasoning and output quality, and choosing whatever interface feels fastest and most comfortable.
  (Brian Levin, 46:49–48:33)

Quote:
“It’s like two different people… Opus 4.5 is just insanely good at doing what I want. And I like the way it approaches problems… For me, this just feels nice and easy to do.”
—Brian Levin [47:36]

10. Prompt Craft & Human Factors

• There’s a direct correlation between prompt quality and state of mind; when tired or distracted, context degrades and so does output.
• Sometimes you just need to “go to bed—try again tomorrow.”
  (Brian Levin, 49:00)

Notable Quotes & Memorable Moments

• “Prototype Playground is still really for me. Like, I think I use it the most… My hope is that over time we make this thing useful enough that more people will want to prototype in it because it’s just faster than those other tools.”

  • Brian Levin [09:06]

• “The number one rule that I’ve heard from you today is: when asked to do something by Claude, teach Claude to do it.”

  • Claire Vo [41:47]

• On Figma-to-Code:

  • “Can we get 80% [of the implementation] in literally one form prompt? I just pasted a link and it just iterated itself towards something that’s roughly complete.”
    • Brian Levin [28:35]

• “If you are building a chatbot… I don’t think you can design a good chat experience in Figma… What you can’t design in Figma is what it actually will feel like to use that thing.”

  • Brian Levin [42:39]

• "The best solution for me to write better prompts is like, go to bed, try again tomorrow...your output’s just directly correlated with how good of context do you give the thing."

  • Brian Levin [49:00]

Key Workflow Timestamps

| Timestamp | Segment/Topic | |-----------|-------------------------------------------------------------| | 00:00 | Designing B2B SaaS: Early reality for designs (prototyping) | | 04:47 | Explanation: What is Prototype Playground? | | 08:12 | How it was set up & operational details | | 09:06 | Team adoption: technical/non-technical spectrum | | 10:57 | Live demo: Creating and prototyping in Playground | | 13:18 | Using plan mode with Claude Code | | 18:59 | Rule: Teach Claude to automate routine steps | | 22:37 | Slash commands & Figma integration demo | | 28:35 | Reflections on Figma-to-Code efficiency | | 30:58 | Special skill: “find-icon” | | 35:08 | Deployment workflow: Slash command /deploy | | 42:39 | Impact on design team—code first for AI-driven features | | 46:49 | Tooling preference: Why Claude, Opus 4.5, Cursor | | 49:00 | Advice: Better prompts = well-rested brain |

Summary Table of Key Commands/Components

| Feature/Workflow | Purpose/Benefit | |-----------------------|--------------------------------------------------------------| | Prototype Playground | Central shared Next.js repo for all team prototypes | | Shared Components | Rapid Notion-like UI assembly | | Slash Commands | Automate common tasks (create prototype, Figma import, deploy)| | Plan Mode (Claude) | Improves code quality by planning before writing code | | Claude Skills | AI-executed scripts for routine tasks (e.g., icon searches) | | Automated Deploy | /deploy command walks user from code to live PR automatically | | Context Files | Global and local Claude md files tailor AI to team and user |

Takeaways for Listeners

• Moving from static design to code-first prototyping, especially with AI features, is becoming essential for real-world B2B/SaaS design.
• Prototype Playground demonstrates how simple infrastructure and AI tools like Claude Code can democratize rapid, high-fidelity prototyping, lowering technical barriers for design teams.
• Automate everything you can: if Claude asks you to check or do something, find a way to teach Claude to do it for you.
• Custom slash commands and skills magnify productivity and onboarding by programmatically handling tedious or error-prone steps.
• Always provide rich context and be patient—prompt quality governs your AI output. Sometimes, the biggest productivity boost is a good night's sleep.

Follow Brian & Get Involved

• Twitter/X: @brianlovin
• Website: brianlovin.com
• Try Notion AI and send feedback to help improve their design workflows!

For more episodes and workflows:

Visit howiapod.com

End of Summary