How I AIThe internal AI tool that's transforming how Stripe designs products | Owen Williams
At a glance
WHAT IT’S REALLY ABOUT
Stripe’s Protodash makes AI prototypes realistic, shareable, review-ready fast
- Stripe designers found off-the-shelf AI design tools produced uncanny, off-brand “blurple slop” because they lacked awareness of Stripe’s Sail design system.
- Williams built Protodash as an opinionated prototyping starter kit (React scaffold + Sail components + MCP integration + Cursor/LLM rules) that reliably generates Stripe-native dashboards and flows about 90% of the way.
- Stripe’s devbox infrastructure made prototypes easy to run and share via URLs, enabling “demos, not memos” design reviews where stakeholders click through real interactions instead of viewing slides.
- Protodash Studio extends the system into a browser-based experience with embedded LLM chat, variant generation, self-testing via screenshots, and in-canvas annotation that queues targeted AI fixes.
- Internal-tool customization (review mode, summaries, culture-specific workflows) drove adoption—surprisingly with PMs becoming major power users for early exploration, communication, and faster user testing.
IDEAS WORTH REMEMBERING
5 ideasDesign-system grounding is the difference between usable AI prototypes and “slop.”
Protodash improves realism by forcing the model to consult Stripe’s Sail components (via MCP) and follow strict rules (e.g., don’t invent components, avoid Tailwind unless enabled), so prototypes look and feel like the real product.
Lowering the “NPM/terminal cliff” unlocks prototyping for non-engineers.
Williams designed the workflow so designers/PMs need minimal local setup—often just opening a preconfigured devbox and prompting—turning coding literacy into an accessible, AI-mediated skill.
Shareable URLs rewire reviews from presentations to interactive critique.
Running prototypes on dev boxes lets teams review by clicking through real states and flows, reducing reliance on Figma screenshots/slide decks and making feedback more concrete and actionable.
Browser-native prototyping makes iteration faster than editor-centric workflows.
Protodash Studio embeds the LLM into the prototyping environment so users can request changes, generate variants, deploy/share, and “remix” others’ prototypes without switching tools or dealing with repo setup.
Automated self-testing increases trust in AI-generated UI changes.
Having the agent take screenshots, check console/errors, and iterate until the UI matches intent helps maintain Stripe’s high quality bar and reduces time spent debugging AI’s partial or broken edits.
WORDS WORTH SAVING
5 quotesSo like blurple slop is what I would call them and like they do a really, really good job, but they don't know about your design system, right?
— Owen Williams
It's sort of been this very transformative thing because all of a sudden I'm sitting in these design reviews and like it, it's so convincing that I'm like, "Is this the real product or am I looking at like something fake?"
— Owen Williams
Like, I never want to see a slideshow again. It's like Demos, not memos.
— Owen Williams
Like yelling at Claude Code for 18 months.
— Owen Williams
As soon as I've sent the first shouty prompt, it's time to, like, reset the, like, slash clear and start again.
— Owen Williams
High quality AI-generated summary created from speaker-labeled transcript.
Get more out of YouTube videos.
High quality summaries for YouTube videos. Accurate transcripts to search & find moments. Powered by ChatGPT & Claude AI.
Add to Chrome