Key Takeaways
- Traditional tools like Figma hit a wall when prototyping complex data dashboards, struggling with variations like zero data states, abundant data, or internationalized text. Owen Williams called the effort "unhinged."
- Stripe design manager Owen Williams created "Protodash," an internal AI-powered tool that generates realistic, interactive prototypes for these exact scenarios. It renders different business models (e.g., startup vs. enterprise) and multi-step flows on demand.
- This AI-assisted approach allows teams to explore complex user experiences—including error states and varied data sets—much earlier in the product cycle, moving beyond static mockups that only show the 'happy path.'
- By empowering product managers and designers to rapidly generate diverse scenarios, Protodash shifts the focus from manually building prototypes to strategically exploring a wider range of user interactions and edge cases.
The Method
Forget the days of trying to mock up every single state of a complex dashboard in Figma. Claire Vo opened the conversation by pointing out the sheer "painful" difficulty: “how painful is it to prototype a data dashboard with all its interactions, all its filters, all its states, different states, zero data, a bunch of data. It is nearly impossible to do that in Figma.” Stripe's Owen Williams felt this pain acutely and built Protodash, an internal AI-powered prototyping tool, to kill it.
Protodash’s core idea is to move beyond static, single-state mockups. Instead of painstaking manual effort to create dozens of Figma screens, the tool uses AI to generate dynamic, interactive prototypes that account for a dizzying array of real-world conditions. Williams specifically highlighted how Protodash tackles issues like internationalization—“it's in Dutch now. Okay. It looks terrible like cuz it's all long and stuff”—or the difference between a startup's data volume and an enterprise's. With Protodash, Williams explained, “you can just very quickly be like I want to see a startup in an enterprise and it just it just does it.”
This isn't just about pretty pictures. Protodash allows designers and product managers to dive into multi-step user flows and critically, their error states. Williams pointed out that often, prototypes are just “one JPEG and maybe a second one where it's like here's this and this everything's great, but like what are the error states?” Protodash helps the team visualize these edge cases and alternatives directly, rather than relying on abstract explanations of complex logic like "how web hooks work." It’s about making the intangible concrete, early.
Where This Breaks Down
Protodash excels where a product's design system is established and the underlying data structures or interaction logic can be clearly defined and generated programmatically. This method shines for data-heavy applications, dashboards, or multi-step configuration flows within a defined framework, like Stripe's. However, it's less suited for early-stage conceptual design where the UI/UX is still highly fluid, experimental, or relies on unique, unproven interaction paradigms. For pure blue-sky ideation or highly artistic interface exploration, traditional design tools still offer more creative freedom. Building such a tool also requires significant internal engineering resources, making it a high bar for early-stage startups without that dedicated capacity.
What to Do With This
If you're building a product with complex dashboards, data tables, or multi-step onboarding flows, stop trying to render every single permutation in Figma. This week, identify the one most painful, data-rich screen or multi-step flow that consistently causes headaches in reviews due to missing states (zero data, error states, different user types). Instead of manual mockups, task a technical designer or engineer on your team to create a minimal internal script or headless browser tool that programmatically generates realistic data for that specific screen or flow, adhering to your existing design system. The goal isn't a full Protodash clone, but an "AI-assisted micro-tool" that lets you dynamically preview different states without spending weeks crafting static images. Your PMs and engineers will get a much clearer picture, much faster, helping you build what users actually need, not just the happy path.