Stripe Revolutionizes Product Design with Protodash, Its Internal AI

An Innovation by Stripe: Protodash

Owen Williams, a design lead at Stripe, has developed Protodash, a groundbreaking AI-based prototyping tool. This internal tool allows designers and product managers to quickly transform Stripe's design system into production-quality clickable prototypes. What started as a set of Cursor rules and React components has evolved into a comprehensive prototyping platform that operates directly in the browser. Protodash streamlines design reviews and enables teams to move from simple memos to functional demonstrations in record time. Owen shares the origins of Protodash, why generic AI design tools often fail, and how product managers have become unexpected key users.

The Foundations of Protodash

Protodash was born from a set of Cursor rules, React components, and the integration of an MCP server. The first version of this tool aimed to simplify access for designers, requiring only the command "npm run dev" to function. Owen consolidated the components of Stripe's design system, set up an MCP server for Sail, and developed detailed Cursor rules to guide the AI in utilizing the project. When a user inputs a Figma link, the Sail MCP server is checked before any code is written. If the server is unavailable, the tool cannot envision the design system. These rules have been refined over months of iterations and problem-solving.

A Shift in Mindset Among Designers

One of the biggest challenges for designers has been overcoming the fear of the terminal. Owen, with his engineering background, has always valued hiring technical designers who can navigate the terminal effectively. Before the AI era, achieving this technical skill was difficult. Now, it’s as simple as asking Claude: "How does Git work?" to get a clear answer without even knowing the commands.

The Limitations of Generic AI Prototyping Tools

Generic AI prototyping tools often fail to produce satisfactory results because they lack knowledge of the company's specific design system. Owen observed during design reviews that tools like v0 produced unconvincing Tailwind prototypes, with incorrect navigations, wrong fonts, and mismatched components. Stripe, with its high-quality standards and well-defined design system called Sail, required tools capable of building reliable dashboards from its elements. This necessity led to the creation of Protodash.

Adoption by Product Managers

Today, as many product managers as designers are using Protodash, which has improved the relationship between these two groups. Initially, Owen was nervous about product managers starting to design. However, he was pleasantly surprised to see them creating elements that aligned with Stripe's identity, exploring ideas earlier, and communicating better with designers. Discussions have evolved from "Should we assign a designer to this project?" to "Here’s the actual work; let’s discuss how to improve it." Product managers can now test ideas earlier and advocate for design resources with tangible prototypes.

Prototyping with Real Data

Prototyping with data embedded in the code allows for the exploration of use cases that Figma could never achieve. Owen showcased a dashboard displaying nearly $500,000 in gross volume, but what about initial states or companies making one transaction per day? Exploring these different business models was previously a headache in Figma. Now, it’s easy to switch between these states, enabling the design of more interesting solutions and confronting them with reality sooner.

The Importance of Tailored Internal Tools

The most valuable internal tools are those that align with the specific culture and workflows of the company. Owen emphasizes the difficulty of recruiting teams to develop internal tools, but now it’s possible to create tools that evolve with working methods. At Stripe, design reviews traditionally include sharing Google Docs for feedback. Owen has thus integrated a design review mode where everyone can comment on the prototype, receive an AI-generated summary, and send corrections directly to the AI.

Owen's Advice for Working with AI

Owen advises being precise from the start and taking a pause whenever frustration rises. With a background in content creation, he has learned that precision in the first prompt is crucial. However, the most important lesson is to avoid the sunk cost fallacy. As a creator, it’s easy to become attached to a project thinking, "I will surely get there." Often, it’s faster to abandon everything and start over. If an approach isn’t working, it’s better to reset the context.