The internal AI tool that’s transforming how Stripe designs products | Owen Williams
Summary
Owen Williams, a design manager at Stripe, developed ProtoDash, an internal tool that transforms Stripe's design system, SAIL, into interactive, high-fidelity prototypes. ProtoDash addresses the "uncanny valley" problem where generic prototyping tools produce designs that don't align with Stripe's specific brand and quality standards. The tool, initially a React app running locally or in dev boxes, evolved into ProtoDash Studio, an in-browser platform. It leverages AI (specifically Cursor and Claude) and a bundle of rules to generate realistic dashboards, manage data states (e.g., zero data, large data, internationalization), and facilitate multi-step flows. ProtoDash significantly reduces the effort required for designers and product managers to create and iterate on prototypes, enabling faster, more convincing design reviews and improving the handoff process to engineers.
Key takeaway
For product managers and design leaders aiming to accelerate product development and improve design quality, consider investing in highly customized internal prototyping tools. By integrating your specific design system and leveraging AI, you can empower your teams to create high-fidelity, interactive prototypes rapidly, reducing reliance on static mockups and fostering more effective design reviews and seamless engineering handoffs. This approach can unblock PMs and designers, allowing them to explore ideas and test user experiences earlier and more practically.
Key insights
Internal tools precisely tailored to company culture and design systems significantly enhance prototyping efficiency and quality.
Principles
- Design systems enable predictable, high-quality generative design.
- Lowering technical barriers empowers non-engineers to prototype.
- High-fidelity prototypes improve design reviews and engineering handoffs.
Method
ProtoDash uses a React site emulator, integrates with Stripe's SAIL design system via an MCP server, and employs AI (Cursor/Claude) with bundled rules to generate and refine prototypes in-browser or via dev boxes.
In practice
- Integrate AI with your internal design system for consistent prototypes.
- Use dev box infrastructure for shareable, pre-configured prototyping environments.
- Implement fidelity modes (e.g., grayscale, monospace) to signal work-in-progress.
Topics
- ProtoDash
- Stripe Design System
- AI Prototyping
- Internal Design Tools
- Product Development Workflow
Best for: Product Manager, AI Product Manager, Product Designer, AI Engineer
Related on AIssential
Editorial summary, takeaway, and curation by AIssential. Original article published by Lenny's Newsletter.