The internal AI tool that’s transforming how Stripe designs products | Owen Williams
Owen Williams, дизайн-менеджер в Stripe, создал Protodash — внутреннюю платформу для прототипирования на базе ИИ, которая позволяет дизайнерам и продакт-менеджерам создавать высококачественные прототипы дашбордов Stripe без написания кода. Инструмент вырос из набора правил для Cursor и React-компонентов в полноценную браузерную студию прототипирования, работающую в dev-боксах, с режимами дизайн-ревью, тестированием вариантов и итерациями с помощью ИИ. Неожиданно продакт-менеджеры стали использовать Protodash наравне с дизайнерами, что фундаментально изменило подход Stripe к прототипированию, дизайн-ревью и передаче макетов инженерам. В статье разбирается архитектура инструмента — React Router, компоненты дизайн-системы и интеграции через MCP, — а также культурный сдвиг к принципу «демо вместо записок». Williams подчёркивает, что внутренние инструменты не обязаны быть продакшен-уровня, чтобы приносить трансформационный эффект.
The internal AI tool that’s transforming how Stripe designs products | Owen Williams
Внутренний ИИ-инструмент, который меняет подход Stripe к проектированию продуктов | Owen Williams
Owen Williams is a design manager at Stripe who built Protodash, an internal AI-powered prototyping platform that lets designers and PMs create high-quality Stripe dashboard prototypes without writing code. What started as a bundle of Cursor rules and React components evolved into a full web-based prototyping studio that runs in dev boxes, complete with design review modes, variant testing, and AI-powered iteration. Surprisingly, PMs now use Protodash just as much as designers, fundamentally changing how Stripe approaches prototyping, design reviews, and engineering handoffs.
Owen Williams — дизайн-менеджер в Stripe, создавший Protodash, внутреннюю платформу для прототипирования на базе ИИ, которая позволяет дизайнерам и продакт-менеджерам создавать высококачественные прототипы дашбордов Stripe без написания кода. То, что начиналось как набор правил для Cursor и React-компонентов, превратилось в полноценную браузерную студию прототипирования, работающую в dev-боксах, с режимами дизайн-ревью, тестированием вариантов и итерациями с помощью ИИ. Что удивительно, продакт-менеджеры теперь используют Protodash наравне с дизайнерами, что фундаментально изменило подход Stripe к прототипированию, дизайн-ревью и передаче макетов инженерам.
Listen or watch on YouTube, Spotify, or Apple Podcasts
Слушайте или смотрите на YouTube, Spotify или Apple Podcasts
What you’ll learn:
Что вы узнаете:
How Stripe built an internal AI prototyping tool using Cursor rules, MCPs, and their design system
Why “blurple slop” happens when designers use generic AI tools—and how to fix it
The architecture behind Protodash: React router, design system components, and MCP integrations
How Stripe prototypes in dev boxes so designers never have to worry about local setup
Why “demos, not memos” transformed Stripe’s design review culture
How Stripe built design review modes, variant testing, and AI annotation directly into your prototyping tool
Why internal tools don’t need to be production-grade to be transformative
Как Stripe создал внутренний ИИ-инструмент для прототипирования с помощью правил Cursor, MCP и собственной дизайн-системыПочему возникает «blurple-мусор», когда дизайнеры используют универсальные ИИ-инструменты, — и как это исправитьАрхитектура Protodash: React Router, компоненты дизайн-системы и интеграции через MCPКак Stripe запускает прототипы в dev-боксах, чтобы дизайнерам не приходилось думать о локальной настройкеПочему принцип «демо вместо записок» изменил культуру дизайн-ревью в StripeКак Stripe встроил режимы дизайн-ревью, тестирование вариантов и ИИ-аннотации прямо в инструмент прототипированияПочему внутренним инструментам не нужно быть продакшен-уровня, чтобы приносить трансформационный эффект
Brought to you by:
При поддержке:
Celigo—Intelligent automation built for AI
Celigo — интеллектуальная автоматизация, созданная для ИИ
In this episode, we cover:
В этом выпуске мы обсуждаем:
(02:19) The “blurple slop” problem with AI design tools
(02:19) Проблема «blurple-мусора» в ИИ-инструментах для дизайна
(03:50) Protodash: an internal vibe-coding tool for Stripe prototypes
(03:50) Protodash: внутренний инструмент vibe-coding для прототипов Stripe
(05:26) Why an engineering background helped Owen lower the bar for designers
(05:26) Почему инженерный бэкграунд помог Owen снизить порог входа для дизайнеров
(07:55) The Cursor rules that taught the Stripe design system
(07:55) Правила Cursor, которые обучили дизайн-систему Stripe
(09:04) Running prototypes on dev boxes vs. locally
(09:04) Запуск прототипов в dev-боксах vs. локально
(10:30) “Demos, not memos” and rewiring design reviews at Stripe
(10:30) «Демо вместо записок» и перестройка дизайн-ревью в Stripe
(14:50) Building Protodash Studio: a browser-based wrapper for prototyping
(14:50) Создание Protodash Studio: браузерная оболочка для прототипирования
(19:04) Live demo: variants, line charts, and remixing prototypes in browser
(19:04) Живая демонстрация: варианты, линейные графики и ремикс прототипов в браузере
(21:02) Self-testing prototypes that take screenshots and check their work
(21:02) Самотестирующиеся прототипы, которые делают скриншоты и проверяют результат
(26:08) The annotate-for-AI button for in-canvas feedback
(26:08) Кнопка «аннотировать для ИИ» для обратной связи прямо на холсте
(27:21) Design review mode: comments, summaries, and AI follow-up
(27:21) Режим дизайн-ревью: комментарии, резюме и ИИ-доработки
(29:39) Why building internal tools beats buying off-the-shelf
(29:39) Почему создание внутренних инструментов лучше покупки готовых решений
(32:50) PMs as the surprise power users of Protodash
(32:50) Продакт-менеджеры как неожиданные главные пользователи Protodash
(35:20) Live demo: a Black Friday/Cyber Monday pet store dashboard
(35:20) Живая демонстрация: дашборд зоомагазина для Black Friday / Cyber Monday
(42:03) Lo-fi modes, monospace fonts, and “Comic Sans for WIP” at Shopify
(42:03) Lo-fi-режимы, моноширинные шрифты и «Comic Sans для черновиков» в Shopify
(45:35) The Radar prototype that changed engineering handoff
(45:35) Прототип Radar, который изменил процесс передачи макетов инженерам
Tools referenced:
Упомянутые инструменты:
• v0: https://v0.app/
• v0: https://v0.app/
• Cursor: https://cursor.com/
• Cursor: https://cursor.com/
• Claude Code: https://www.claude.com/product/claude-code
• Claude Code: https://www.claude.com/product/claude-code
• Claude Design: https://www.anthropic.com/news/claude-design-anthropic-labs
• Claude Design: https://www.anthropic.com/news/claude-design-anthropic-labs
• Figma: https://www.figma.com/
• Figma: https://www.figma.com/
• Stripe Radar: https://stripe.com/radar
• Stripe Radar: https://stripe.com/radar
• Balsamiq: https://balsamiq.com/
• Balsamiq: https://balsamiq.com/
Where to find Owen Williams:
Где найти Owen Williams:
Website: https://owenwillia.ms/
Сайт: https://owenwillia.ms/
Where to find Claire Vo:
Где найти Claire Vo:
ChatPRD: https://www.chatprd.ai/
ChatPRD: https://www.chatprd.ai/
Website: https://clairevo.com/
Сайт: https://clairevo.com/
LinkedIn: https://www.linkedin.com/in/clairevo/
LinkedIn: https://www.linkedin.com/in/clairevo/
Production and marketing by https://penname.co/. For inquiries about sponsoring the podcast, email [email protected].
Производство и маркетинг: https://penname.co/. По вопросам спонсорства подкаста пишите на [email protected].
Discussion about this video
Обсуждение этого видео
