Не макет. Не прототип. Production-приложение, уже работающее на saastrannual.com и предназначенное для того, чтобы реальные участники рассказывали о событии своей сети.
Я открыл Replit на телефоне, описал AI-агенту, что хочу сделать, и начал собирать продукт.
К тому моменту, как я дошел до терминала, все уже было развернуто. Работало. В production. Генерировало карточки.
[](https://www.saastrannual.com/attendee-card)
Это история не о сложной разработке. Это история о том, что теперь стало нормой, если вы готовы vibe code’ить через реальную задачу.
The Idea: Attendee-Generated Social Proof
Мы проводим SaaStr Annual уже больше десяти лет. Один из факторов, который стабильно помогает регистрациям, — социальное доказательство: люди публикуют, что они идут на событие. Но большинство участников не будут открывать Canva и вручную собирать брендированную карточку. Им нужен максимально простой процесс.
Поэтому спецификация была простой:
- Загрузить headshot
- Выбрать фон
- Добавить собственное сообщение («Come find me at SaaStr Annual!» или любое другое)
- Скачать чистый PNG 1080×1080, готовый для LinkedIn или Twitter
Никакого логина. Никакого аккаунта. Просто сгенерировал и пошел дальше.
The First Approach Failed Immediately
Очевидный ход — использовать что-то вроде html2canvas: отрисовать стилизованный HTML-элемент и сделать скриншот. Мы попробовали это первым.
Он сломался сразу. html2canvas ненадежно поддерживает object-fit, aspect-ratio и CSS backgroundImage. Результат вообще не был похож на то, что пользователь видел на экране. Кадрирование было неверным. Позиционирование было неверным. Вся схема была непригодна.
Поэтому мы выбросили этот подход прямо в Waymo и сразу перешли на Canvas 2D API. Отрисовывать все программно: фон, градиентную подложку, круг с headshot и светящимся cyan-обводом, заголовок, подзаголовок. Каждый элемент — по точным пиксельным координатам, рендер в 1080×1080, экспорт в чистый PNG.
Я снова и снова вижу это в vibe coding: первый ход AI часто оказывается «учебниковым» решением. Он не совсем работает. Ты говоришь: «это сломано, попробуй по-другому», и уже второй или третий вариант оказывается тем, что действительно выходит в продакшен.
Но важно понимать: я сам в тот момент не знал, что именно ломается. Я был на телефоне. Просто проверил, отправил баг AI Agent… и он тут же это исправил.
The Headshot Problem
Обрезать портретную фотографию в круг кажется пустяком. Это не так.
Проблема в том, что если делать center-crop большинства селфи или headshot’ов, в кадр попадет подбородок или шея. Лицо почти всегда находится в верхней трети фотографии, а не в центре.
Решением стала кастомная функция drawHeadshot, которая привязывается к верхней части загруженного изображения, а не к его геометрическому центру. Мы используем canvas.clip() для маски в виде круга, а затем рисуем изображение со сдвигом вверх. В результате лица естественно попадают в круг без ручной подгонки.
Не идеально для каждой фотографии. Но достаточно хорошо для 90%+ реальных headshot’ов, а для такого инструмента этого и нужно. Особенно если он был собран и запущен в поездке на Waymo.
Мы хотели наложить логотип SaaStr на каждую карточку. Просто, правда? Забрать логотип с нашего CDN, нарисовать его на canvas — и готово.
Но браузеры блокируют отрисовку cross-origin изображений на canvas. Как только вы рисуете такое изображение, canvas становится «tainted», и экспорт больше невозможен. Никакой загрузки. Никакого PNG. Ничего.
Решение: небольшой серверный proxy endpoint. Браузер обращается к /api/proxy-image, который забирает логотип с CDN и возвращает его с правильными заголовками. Затем браузер создает локальный blob URL из ответа и рисует уже его на canvas. Чистый экспорт, без CORS-проблем.
Такую задачу junior developer может дебажить два часа, а AI agent решает примерно за 45 секунд, если описать симптом. Более того, мне вообще не нужно было разбираться в этой проблеме. Я просто сказал Replit Agent исправить это.
Five Backgrounds, One Consistent Output
Мы выпустили пять вариантов фона: официальный брендированный card для SaaStr AI 2026 (с event branding, встроенным прямо в изображение), снимок indoor arena stage, снимок outdoor festival grounds и два темных градиентных варианта — cyber blue и electric purple.
Сложность была в том, что белый текст должен читаться на любом из них. У фотофонов очень разные светлые и темные участки в зависимости от того, куда попадает текст.
Решение — темный градиент, уходящий в прозрачность, который рисуется на нижнюю половину каждого фотофона. Текст всегда читается, независимо от изображения под ним. Для небрендированных фонов мы дополнительно накладываем логотип SaaStr сверху, а под него добавляем frosted pill для лучшей читаемости.
Небольшие детали. Но именно они отличают полированный инструмент от того, что выглядит как хакатонный проект.
[](https://www.saastrannual.com/attendee-card)
What I Actually Did vs. What the AI Did
Давайте честно про разделение труда.
AI написал весь код. Логику рендеринга Canvas, алгоритм кадрирования headshot, CORS proxy endpoint, компонент выбора фона, поток загрузки, live preview — все это сгенерировал AI.
Что сделал я:
- Сформулировал продукт. Не в технических терминах. Без какого-то великого промпта. Даже без формального планирования. Я сказал что-то вроде: «Я хочу, чтобы участники загружали headshot и получали брендированную LinkedIn-карточку». AI сам разобрался с реализацией.
- Поймал edge cases. Первая версия не обработала проблему CORS с логотипом. Я увидел сломанный результат и сказал: «Логотип не показывается в скачанном изображении». AI диагностировал tainted canvas и построил proxy.
- Принял дизайн-решения. Какие фоны включить. Где должен находиться текст. Насколько большим должен быть круг с headshot. Нужен ли cyan glow на обводке. Это продуктовые решения, а не инженерные.
- Нажал deploy. Replit делает это до смешного просто. Отправил в production, указал subdomain, готово.
Объем кода, который я лично набрал: ноль. Все было AI-generated, AI-debugged и AI-deployed.
И посмотрите на мой «prompt». Он максимально простой:
Why This Matters More Than the App Itself
Само приложение маленькое. Это генератор карточек. Никто не будет писать про него кейс-стади. Не стоит преувеличивать, что именно делает этот micro-app.
Но подумайте, что только что произошло. CEO на заднем сиденье автономного автомобиля запустил production-фичу на сайте, который увидят десятки тысяч людей, — за то время, пока добирался до аэропорта.
Еще 12 месяцев назад это превратилось бы в задачу в Jira. Дизайнер сделал бы макет. Инженер оценил бы работу в 3-5 дней. Это ушло бы в спринт. Может быть, вышло бы через две недели. А может, было бы понижено в приоритете и не вышло бы вообще. Будем честны: реалистично оно, скорее всего, так и не вышло бы. Да и для покупки это слишком нишевая штука.
Теперь это одна поездка на Waymo.
Вот настоящая история AI и разработки софта в 2026 году. Речь не о замене инженеров. Речь о том, сколько идей теперь может пройти путь от «а что если…» до «это уже работает» еще до конца вашей поездки на работу.
В самом SaaStr мы прошли путь от 20+ сотрудников до 3 людей и 20+ AI-агентов. Выручка изменилась с -19% до +47%. Мы выпускаем больше продукта, больше контента и больше фич, чем когда-либо с полной командой. Не потому, что AI умнее тех, кто у нас был, — а потому, что узким местом никогда не был интеллект. Им было время между идеей и исполнением.
Этот разрыв теперь стремится к нулю.
Try It Yourself
Если вы едете на SaaStr Annual AI 2026 (12–14 мая, Bay Area в районе Сан-Франциско), сгенерируйте свою карточку: saastrannual.com/attendee-card
Загрузите headshot, выберите фон, добавьте сообщение и опубликуйте это в LinkedIn. Это занимает около 30 секунд. Что, если подумать, ненамного дольше, чем AI потребовалось, чтобы написать первую рабочую версию кода.
[](https://www.saastrannual.com/buy-tickets-2026?promo=April200)
0 1
1 1
5 7
1 1
Увидимся скоро!
Материал — перевод статьи с английского.
Оригинал: We Shipped a Production App in One Waymo Ride. 25 Minutes. Zero Lines of Code I Wrote Myself.