Lenny Rachitsky · 4 min read · Product Teams
🎙️ This week on How I AI: The internal AI tool that’s transforming how Stripe designs products
Read the original on lennysnewsletter.com →
Stripe's Protodash is an internal AI prototyping platform that turns Stripe's Sail design system into production-quality, clickable demos, enabling designers and PMs to explore ideas before writing production code. It evolved from Cursor rules and React components into a full web-based prototyping tool tightly integrated with Stripe's design system and MCP server to avoid generic 'blurple slop.' By moving from memos to working demos, teams can iterate with real data and multiple states, grounding decisions in reality.
Key Takeaways
- Protodash started as Cursor rules and React components and evolved into a full web-based prototyping platform integrated with Stripe's Sail design system and MCP server.
- The first version lowered the barrier to entry, allowing designers to run npm run dev and rely on MCP server integration to access the design system.
- Prototyping with data in code enables testing real states and edge cases (e.g., different business models, zero states) more effectively than static Figma prototypes.
- PMs and designers use Protodash collaboratively, improving alignment and accelerating decision-making by turning ideas into tangible, testable demos.
Excerpt
Demos not memos: How Stripe built their internal AI prototyping tool | Owen Williams Listen now on YouTube • Spotify • Apple Podcasts Brought to you by: Celigo —Intelligent automation built for AI Cursor —The best way to code with AI Owen Williams is a design manager at Stripe who built Protodash, an internal AI prototyping tool that lets designers and PMs turn Stripe’s design system into clickable, production-quality prototypes in minutes. What started as a set of Cursor rules and React components has evolved into a full prototyping platform that runs in the browser, supports design reviews, and helps…