Notion's Prototype Playground for AI-Assisted Design
Press Space for next Tweet
I've had "Write a post about Prototype Playground" on my todo list for 3 months now...fortunately, @clairevo invited me onto her podcast to talk about how it works and dig in to how we're prototype with AI @ Notion! Watch the video: https://youtube.com/watch?v=s4HGbIhUgVo Some thoughts: Prototype Playground has evolved quite a bit over the last year, and even since recording this in December, the app looks and feels quite different. But at it's core the Playground is simple: a single repository where anyone can explore ideas with AI and real code, unconstrained by the production codebase and without fear of breaking things. Prototype Playground is AI-first, naturally. We have skills that make developing and deploying easy, and they can help teach non-technical team members what's actually happening under the hood. Some of my favorites: /brainstorm — interviews you about what you're trying to make, think through edge cases, key flows, and finds components that can be reused from existing prototypes /deploy — walks through the entire branch → commit → push → PR → CI workflow and teaches people how git works along the way /find-icon — a script that helps find the right icon instance using synonyms, so "search icon" can resolve to "MagnifyingGlassIcon" in code We also have a few subagents that are particularly helpful: ci-monitor — watches CI on a pull request and self-heals broken tests, formatting issues, type errors, etc figma-verifier — uses the Figma MCP to loop back and forth between a Figma mock and what the agent built in the browser until the output is correct One of the most valuable parts of Prototype Playground is that everyone's work is in one place. It's easy to yoink great ideas from other people's prototypes or find that one random idea that would have otherwise been lost to a Slack thread...every prototype rolls up into a unified feed so we can see at a glance what people are exploring. It's worth mentioning: models have gotten so good in the last 3 months that we're seeing more designers at Notion prototype directly in production with feature flags. In the long-run I wonder how useful this type of isolated code-first prototyping environment will actually be... Also: in the video I mentioned that I was spending ~60% of my time in Figma. That is no longer true. It's now closer to 5-10%. The last 3 months of model improvements have changed what's possible to design and prototype in code. I can now multi-task different versions of an idea with parallel agents, kick off work to a background agent from my phone during a meeting, and agents can work for longer periods of time on more complex prototypes to build the core idea at a much higher level of fidelity. It's an incredibly exciting time to be a designer. Designers should embrace AI, learn how it works (there's no magic here!), and start developing an intuition for what models can do so that we're always building product experiences on the bleeding edge of capabilities. Let me know if you have any questions! I should still write that blog post...
youtube.com
- YouTube
Topics
Read the stories that matter.The stories and ideas that actually matter.
Save hours a day in 5 minutesTurn hours of scrolling into a five minute read.