🎙️ This week on How I AI: The internal AI tool that’s transforming how Stripe designs products

🎙️ На этой неделе в How I AI: внутренний AI-инструмент, который меняет подход Stripe к дизайну продуктов

Ваши еженедельные выпуски от How I AI, части сети подкастов Lenny’s Podcast Network

Демо вместо меморандумов: как Stripe построил внутренний AI-инструмент прототипирования | Owen Williams

Слушайте сейчас на YouTube • Spotify • Apple Podcasts

Выпуск при поддержке:Celigo — интеллектуальная автоматизация, созданная для AICursor — лучший способ писать код с AI

Owen Williams — дизайн-менеджер в Stripe, создавший Protodash, внутренний AI-инструмент прототипирования, который позволяет дизайнерам и PM превращать дизайн-систему Stripe в кликабельные прототипы продакшн-качества за минуты. То, что начиналось как набор Cursor rules и React-компонентов, выросло в полноценную платформу прототипирования, работающую в браузере, поддерживающую дизайн-ревью и помогающую командам переходить от «меморандумов» к работающим демо. В этом выпуске Owen рассказывает, как появился Protodash, почему универсальные AI-инструменты для дизайна часто выдают «blurple slop», как PM неожиданно стали главными пользователями и что меняется, когда команды могут исследовать реальные продуктовые идеи ещё до написания продакшн-кода.

Главные выводы:

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. Когда ты построил кучу всего, ты привязываешься и думаешь: «Уж я-то заставлю это работать». Часто просто выбросить и начать заново — быстрее. Если громко сказать в первый раз не помогло — сбрось контекстное окно.

Блог и детальные разборы воркфлоу из этого выпуска:

Owen Williams из Stripe о том, как убить «blurple slop» с помощью внутренней студии прототипирования: http://chatprd.ai/how-i-ai/stripe-owen-williams-on-buildling-internal-prototyping-studio

↳ Как подключить дизайн-систему к 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

↳ Упростите дизайн-ревью с AI-студией прототипирования: 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/build-a-personal-ai-app-to-track-purchases-and-user-manuals