Notion Designers Prototype AI in Code, Ditch Figma
Brian Lovin details how Notion's team shifted from Figma mocks to code-based prototypes for AI features, designing agent harnesses at the model's edge amid blurring roles and rapid changes.
Prototyping AI Means Jumping into Code, Not Figma
Brian Lovin, a designer on Notion's AI team, describes his pivot from traditional design tools after joining in January 2025. Initially skeptical of AI—having seen only mediocre tab completion at his prior startup, Campsite—he tackled the ambitious "app builder" project. This aimed to let AI generate full apps inside Notion using primitives like databases, charts, and AI chat. Early Figma mocks failed to capture reality: models were slow, error-prone, and needed clarifying questions.
"From that moment on, it's just changed the whole way you work. Like as soon as you realize you can't design half of this stuff in Figma, what you're really designing is the harness for the agent to do longer things and verify its own work."
Lovin built an internal "prototype playground"—a directory of prototypes with Notion-like components (sidebar, buttons, dropdowns) using Vercel AI SDK for structured outputs and tool execution. It's 80/20 fidelity: close enough to feel like Notion, but designers push further as needed. For instance, designer Will Dawson recreated a simplified Notion editor for inline AI interactions, complete with slash commands, real-time updates, and keyboard navigation. This high-fidelity testing reveals what models can actually do, like writing scripts or searching.
Host Rid notes early adopters tolerate imperfections—crawling over glass to set up tools like open Claude—lowering the quality bar temporarily. Lovin agrees: ship "shitty vibe-coded slop" now, banking on next-gen models. Notion iterated agent harnesses three times in a year, stripping old assumptions every six months. Current harnesses focus on script-writing and search; skills or heavy prompting may fade.
Blurring Lines: Designers Code, Engineers Enable
Notion pushes codebase legibility for AI-assisted design. Skill files, CI pipelines, and testing ensure non-engineers' AI-generated code doesn't break things. About 10-20% of designers go straight to production code; most dabble. Figma remains for 2D exploration, but code handles functional prototypes. Lovin hasn't pixel-pushed in Figma recently—explorations happen in tools like Paper (with Conductor) or TLDraw, details in code.
AI struggles with last-mile polish: poor at CSS tweaks or extrapolating visuals. Solution: Sweat primitives once—buttons, cards—then AI reuses and adapts them. "AI's so good at not only reusing, but also extrapolating. Like I might be like, 'Hey, I really like this tertiary button, but I'm using it on this card... just take that general idea and just extrapolate it.'" Figma's MCP (Make Code Present?) improves with named layers matching code, enabling Claude to generate solid implementations from frame URLs.
Roles blur: "Our obsession with titles is what will screw people over... These things are going away. Like all this stuff is getting very, very blurry." Be fluid across design, PM, engineering. Notion's onboarding offsite impressed Lovin—designers built high-fid prototypes in an hour from random feature pairs (e.g., formulas + permissions). App builder split into shipped pieces: Notion Agent, Custom Agents, Workers (host code for agents).
Collaboration Shifts to Deploy Previews
Artifacts evolve: from Figma URLs to deploy previews. Prototype playground enables forking others' work, yoinking interactions. Design crits persist, sharing shapes or code. Production prototyping skips playground for some; boot Notion codebase, prompt Claude. Engineers optimize sandboxes (slow now) as agents execute code.
Voice models (Inflight) showed promise for interview-style feedback but needed better models—pinned for later. Every direction feels frontier: push edges, talk smart people, absorb engineer insights on model diffs.
"I think that's probably a good place to be right now as a designer is really understanding what's possible, trying to push the edges even if it sucks and you get stuck."
Rid observes go-wide in AI tools like Paper, deep-dive in code—opposite initial expectations.
Embracing AI's Rapid Evolution
Notion's AI-pilled team excites Lovin a year in. Downstream effects drive work: code execution needs sandboxes; speed them up. Downplay hype; focus trajectory. Designers design at current model's boundary, hoping next solves gaps. Tolerance for trial-error prompts aids early users automating knowledge work.
Lovin learns from engineers: why slow? Which model wins? Internal density and in-person days accelerate this.
"Every 6 months everything that we did before becomes more or less irrelevant."
Key Takeaways
- Build a prototype playground with 80/20 Notion-like components to test AI in realistic environments—use Vercel AI SDK for tools and structured outputs.
- Ditch Figma for AI agent design; prototype in code to feel model limits like speed, errors, and verification needs.
- Sweat visual primitives (buttons, cards) once—AI excels at reusing and extrapolating them across contexts.
- Make codebases AI-legible: skill files, CI/CD, testing for non-engineer contributions.
- Shift collaboration to deploy previews; fork prototypes in shared playgrounds.
- Embrace 6-month harness rewrites—focus on current strengths (scripts, search) while eyeing model trajectories.
- Blur roles: fluidly move between design, PM, engineering; ignore titles.
- Use Figma named layers matching code for AI code gen from designs.
- Lower quality bar for early adopters; they tolerate imperfections while pushing frontiers.
- Talk engineers often: absorb why one model beats another, harness tweaks.