🎙️ This week on How I AI: The internal AI tool that’s transforming how Stripe designs products
Owen Williams, дизайн-менеджер в Stripe, рассказывает о Protodash — внутреннем AI-инструменте прототипирования, который превращает дизайн-систему Stripe (Sail) в кликабельные прототипы продакшн-качества за минуты. Инструмент вырос из набора Cursor rules, React-компонентов и MCP-интеграции в полноценную браузерную платформу, поддерживающую дизайн-ревью и переход от «memos» к работающим демо. Owen объясняет, почему универсальные AI-инструменты для дизайна выдают «blurple slop» — нав не тот, шрифты неправильные, компоненты не совпадают — и как привязка к собственной дизайн-системе решает эту проблему. Неожиданно равное число PM и дизайнеров стало активно использовать Protodash, что улучшает их отношения: PM могут раньше тестировать идеи и приходить с реальными прототипами вместо абстрактных аргументов. Прототипирование с данными в коде позволяет покрывать edge cases — zero state, разные бизнес-модели — которые в Figma превращались в хаос. Главные правила Owen для работы с AI: быть конкретным в первом промпте и сбрасывать контекст, как только хочется выругаться, вместо борьбы с sunk-cost fallacy.
🎙️ This week on How I AI: The internal AI tool that’s transforming how Stripe designs products
🎙️ На этой неделе в How I AI: внутренний AI-инструмент, который меняет подход Stripe к дизайну продуктов
Your weekly listens from How I AI, part of the Lenny’s Podcast Network
Ваши еженедельные выпуски от How I AI, части сети подкастов Lenny’s Podcast Network
Demos not memos: How Stripe built their internal AI prototyping tool | Owen Williams
Демо вместо меморандумов: как Stripe построил внутренний AI-инструмент прототипирования | Owen Williams
Listen now on YouTube • Spotify • Apple Podcasts
Слушайте сейчас на YouTube • Spotify • Apple Podcasts
Brought to you by:
Выпуск при поддержке:Celigo — интеллектуальная автоматизация, созданная для AICursor — лучший способ писать код с AI
Owen Williams is a design manager at Stripe who built Protodash, an internal AI prototyping tool that lets designers and PMs turn Stripe’s design system into clickable, production-quality prototypes in minutes. What started as a set of Cursor rules and React components has evolved into a full prototyping platform that runs in the browser, supports design reviews, and helps teams move from “memos” to working demos. In this episode, Owen shares how Protodash came together, why generic AI design tools often produce “blurple slop,” how PMs became the surprise power users, and what changes when teams can explore real product ideas before writing production code.
Owen Williams — дизайн-менеджер в Stripe, создавший Protodash, внутренний AI-инструмент прототипирования, который позволяет дизайнерам и PM превращать дизайн-систему Stripe в кликабельные прототипы продакшн-качества за минуты. То, что начиналось как набор Cursor rules и React-компонентов, выросло в полноценную платформу прототипирования, работающую в браузере, поддерживающую дизайн-ревью и помогающую командам переходить от «меморандумов» к работающим демо. В этом выпуске Owen рассказывает, как появился Protodash, почему универсальные AI-инструменты для дизайна часто выдают «blurple slop», как PM неожиданно стали главными пользователями и что меняется, когда команды могут исследовать реальные продуктовые идеи ещё до написания продакшн-кода.
Biggest takeaways:
Главные выводы:
Protodash started as a bundle of Cursor rules, React components, and MCP integration—then evolved into a full web-based prototyping platform. The first version was pragmatic: lower the barrier to entry so designers only need to know “npm run dev” and nothing else. Owen bundled Stripe’s design system components, created an MCP server for Sail, and wrote extensive Cursor rules that taught the AI how to use the project. If a user pastes a Figma link, check the Sail MCP server before writing code. If the MCP server is unavailable, don’t just imagine the design system. These rules came from months of iteration and pain points.
The biggest mindset shift for designers is not being afraid of the terminal anymore. Owen’s background is engineering-based, and he always valued hiring technical designers who understood enough of the terminal to be dangerous. Pre-AI, that jump to technical competency was really hard. Now you can just ask Claude, “How does Git work?” and it tells you. You don’t even need to know the commands.
Generic AI prototyping tools don’t know your design system, and that creates “blurple slop.” Owen was sitting in design reviews watching designers struggle with tools like v0 that produced uncanny-valley Tailwind prototypes. The nav would be off, fonts wrong, components mismatched. Stripe has a high quality bar and a well-defined design system called Sail, so Owen thought: these tools should know about our design system and construct dashboards from those building blocks reliably. That insight led to Protodash.
An equal number of PMs and designers now use Protodash, and that’s actually making designer-PM relationships better. Owen’s first reaction when PMs started using it was nervousness—“Oh my goodness, PMs designing.” But it’s been thrilling to see PMs build things that look like Stripe in the right way, explore ideas earlier, and communicate better with their designers. Conversations shift from “Should we staff a designer on this project?” to “Here’s the actual work; let’s discuss how to make it better.” PMs can now unblock themselves, test ideas with users earlier, and advocate for design resources with real prototypes instead of abstract arguments.
Prototyping with data in code lets you push the edges of use cases in ways Figma never could. Owen showed a dashboard with almost half a million dollars in gross volume—but what about the zero state? What about a company getting one transaction a day? What about different business models: startup versus enterprise? Before, getting all those states into a Figma file was a mess. Now you can just toggle between them. You can design more-interesting things and have them touch reality sooner.
The most valuable internal tools are the ones that match your company’s specific culture and workflows. Owen points out that staffing internal-tools teams has always been hard, but now you can just build tools that evolve the way you work. Design reviews at Stripe have a tradition of sharing Google Docs with tables for feedback—so Owen built a design review mode where everyone can comment on the prototype, get an AI-generated summary, and send fixes directly to the AI.
Owen’s rules for working with AI: be specific up front, and as soon as you feel like swearing, slash clear and start again. He has a content background and learned that being specific in the first prompt helps a lot. But the bigger lesson is avoiding sunk-cost fallacy. As someone who’s built a bunch of stuff, you get attached and think “surely I’ll get this to work.” Often just throwing it away and starting fresh is faster. If being loud didn’t work the first time, reset the context window.
Protodash начинался как связка Cursor rules, React-компонентов и MCP-интеграции — затем превратился в полноценную веб-платформу прототипирования. Первая версия была прагматичной: снизить порог входа так, чтобы дизайнерам нужно было знать только «npm run dev» и ничего больше. Owen упаковал компоненты дизайн-системы Stripe, создал MCP-сервер для Sail и написал обширные Cursor rules, которые учили AI пользоваться проектом. Если пользователь вставляет ссылку на Figma — сначала проверь MCP-сервер Sail, прежде чем писать код. Если MCP-сервер недоступен — не выдумывай дизайн-систему. Эти правила появились в результате месяцев итераций и набитых шишек.Главный сдвиг в мышлении для дизайнеров — перестать бояться терминала. Бэкграунд Owen — инженерный, и он всегда ценил найм технических дизайнеров, которые понимали терминал достаточно, чтобы быть опасными. До эры AI скачок к технической грамотности был очень тяжёлым. Теперь можно просто спросить у Claude: «Как работает Git?» — и он расскажет. Не нужно даже знать команды.Универсальные AI-инструменты прототипирования не знают вашу дизайн-систему, и это порождает «blurple slop». Owen сидел на дизайн-ревью и наблюдал, как дизайнеры мучаются с инструментами вроде v0, которые выдавали Tailwind-прототипы из uncanny valley. Навигация не та, шрифты неправильные, компоненты не совпадают. У Stripe высокая планка качества и хорошо проработанная дизайн-система под названием Sail, и Owen подумал: эти инструменты должны знать о нашей дизайн-системе и надёжно собирать дашборды из этих строительных блоков. Это озарение и привело к Protodash.Сейчас Protodash используют примерно поровну PM и дизайнеры, и это на самом деле улучшает их отношения. Первая реакция Owen, когда PM начали им пользоваться, была тревога: «О боже, PM занимаются дизайном». Но оказалось здорово видеть, как PM делают то, что выглядит как Stripe должным образом, исследуют идеи раньше и лучше общаются со своими дизайнерами. Разговоры смещаются от «Стоит ли выделить дизайнера на этот проект?» к «Вот реальная работа — давайте обсудим, как её улучшить». PM теперь могут разблокировать сами себя, тестировать идеи с пользователями раньше и аргументировать запрос на дизайн-ресурсы реальными прототипами, а не абстрактными доводами.Прототипирование с данными прямо в коде позволяет прощупывать края use cases так, как Figma никогда не мог. Owen показал дашборд с почти полумиллионом долларов gross volume — а как же zero state? А компания, у которой одна транзакция в день? А разные бизнес-модели: стартап против энтерпрайза? Раньше затащить все эти состояния в Figma-файл было кошмаром. Теперь можно просто переключаться между ними. Можно проектировать более интересные вещи и быстрее сталкивать их с реальностью.Самые ценные внутренние инструменты — те, что соответствуют конкретной культуре и рабочим процессам вашей компании. Owen отмечает, что укомплектовывать команды внутренних инструментов всегда было сложно, но теперь можно просто строить инструменты, которые развивают то, как вы работаете. В Stripe есть традиция дизайн-ревью через Google Docs с таблицами для обратной связи — поэтому Owen построил режим дизайн-ревью, в котором все могут комментировать прототип, получать AI-сгенерированное саммари и сразу отправлять правки в AI.Правила Owen при работе с AI: будь конкретен с самого начала, и как только захочется выругаться — делай slash clear и начинай заново. У него контентный бэкграунд, и он усвоил, что конкретность в первом промпте очень помогает. Но более важный урок — избегать sunk-cost fallacy. Когда ты построил кучу всего, ты привязываешься и думаешь: «Уж я-то заставлю это работать». Часто просто выбросить и начать заново — быстрее. Если громко сказать в первый раз не помогло — сбрось контекстное окно.
Blog & detailed workflow walkthroughs from this episode:
Блог и детальные разборы воркфлоу из этого выпуска:
Stripe’s Owen Williams on Killing ‘Blurple Slop’ with an Internal Prototyping Studio: http://chatprd.ai/how-i-ai/stripe-owen-williams-on-buildling-internal-prototyping-studio
Owen Williams из Stripe о том, как убить «blurple slop» с помощью внутренней студии прототипирования: http://chatprd.ai/how-i-ai/stripe-owen-williams-on-buildling-internal-prototyping-studio
↳ How To Connect a Design System to an AI Code Editor for High Fidelity Prototypes: https://www.chatprd.ai/how-i-ai/workflows/how-to-connect-a-design-system-to-an-ai-code-editor-for-high-fidelity-prototypes
↳ Как подключить дизайн-систему к AI-редактору кода для high-fidelity прототипов: https://www.chatprd.ai/how-i-ai/workflows/how-to-connect-a-design-system-to-an-ai-code-editor-for-high-fidelity-prototypes
↳ Streamline Design Reviews with an AI-Powered Prototyping Studio: https://www.chatprd.ai/how-i-ai/workflows/streamline-design-reviews-with-an-ai-powered-prototyping-studio
↳ Упростите дизайн-ревью с AI-студией прототипирования: https://www.chatprd.ai/how-i-ai/workflows/streamline-design-reviews-with-an-ai-powered-prototyping-studio
↳ Build a Personal AI App to Track Purchases and User Manuals: https://www.chatprd.ai/how-i-ai/workflows/build-a-personal-ai-app-to-track-purchases-and-user-manuals
↳ Соберите личное AI-приложение для учёта покупок и пользовательских инструкций: https://www.chatprd.ai/how-i-ai/workflows/build-a-personal-ai-app-to-track-purchases-and-user-manuals