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

What It Covers

Brian Levin, designer at Notion AI, demonstrates how he built a shared Next.js prototype playground for Notion's design team, enabling code-first prototyping via Claude Code. The system uses shared components, Claude slash commands, skills, and MCP integrations to help 5–10 designers prototype directly in the browser without writing code manually.

Key Questions Answered

• •Shared Prototype Repository: Build a single Next.js repo where each designer gets a namespaced directory for their prototypes. This eliminates redundant setup, surfaces teammates' work in one list, and lets anyone copy useful code across prototypes by simply instructing Claude to pull from another designer's directory.
• •Claude.md Layering Strategy: Maintain two Claude context files: a committed global claude.md defining shared tooling, project structure, and rules like "don't modify other users' files," plus a personal claude.local.md per machine that sets the current user's directory and individual preferences. This combination keeps team consistency while allowing personal customization.
• •Teach Claude to Self-Verify: Every time Claude asks the user to check something — browser output, CI status, TypeScript errors — convert that request into a permanent instruction. Connect Playwright or Chrome DevTools MCP so Claude opens the browser, clicks elements, and confirms functionality itself, reducing interruptions and enabling longer unattended runs.
• •Figma-to-Code Verification Loop: A custom slash command called `/figma` force-invokes the Figma MCP, extracts the design, implements it, then enters a verification loop comparing the browser output against the original Figma frame using Chrome DevTools MCP. The loop repeats up to three iterations with no changes before stopping, reaching roughly 80% accuracy on the first pass.
• •Icon Hallucination Fix via Scripted Skills: Claude consistently guesses wrong icon names, defaulting to generic labels like "search icon" instead of the actual codebase name like "magnifying glass icon." A Claude skill called `find-icon` runs a TypeScript script that searches all 5,000 icons programmatically, including synonyms, before any implementation — eliminating repeated broken imports without manual intervention.