Меня, как продакта, очень захватила идея: создавать прототипы для кастдева, проверки гипотез и вообще любой новой фичи без статьи в Confluence, груминга с командой и вороха тикетов в Jira. Сейчас на сборку прототипа у меня уходит день - и я хочу рассказать, как это устроено, готов от вас нахватать в панамку, сделать выводы и вайбить дальше, лучше и глубже!

Сразу скажу: я продакт с дипломом программиста, который получил 12 лет назад. Работал инженером в НИИ, но быстро ушёл в железо, а потом вообще в маркетинг. Последний раз писал код лет десять назад, навык подрастерял, но база осталась — и это дико помогает.

Ставим задачу

Недавно делал тестовое. Задача понравилась, и я решил не просто расписать требования, а собрать живой прототип.

Проблема

HR жалуется: чтобы отправить сотрудника в командировку или на конференцию в другую страну, нужно собрать документы. Каждый раз — это как поход с протянутой рукой. Анкеты, сканы, справки… Иногда делаю форму в Typeform, иногда руками, иногда через гугл-формы. Если что-то забыли — начинается ручная досборка.

Идея: а что, если сделать конструктор анкет? Условно говоря, у нас есть N стран, M гражданств и L типов виз — мы можем заранее знать, какие документы и данные нужны в каждом случае.

Но вопрос не в сборе требования для всего числа сочетаний N, M, L. Меня интересует: будут ли HR-ы пользоваться конструктором анкет на Typeform?

Сценарии, которые хочется проверить:

  1. US-01: Генерация формы

    Как менеджер процесса я хочу выбрать страну подачи и страну назначения, тип визы, гражданство заявителя, чтобы автоматически получить сгенерированную Typeform форму.

  2. US-02: Публикация формы

    Как менеджер я хочу нажать кнопку “опубликовать”, чтобы форма сразу появилась в Typeform, и я мог отправить её пользователю

  3. US-03: Кастомизация формы

    Как менеджер я хочу иметь возможность убирать ненужные пункты из формы. Например, этот сотрудник уже загрузил свой паспорт в HR программу, а 50% так и не отвечает на просьбы HR отдела.

  4. US-04: Генерация формы по текстовому запросу

    Вайб-кодинг же! Почему бы не добавить текстовое поле, где можно написать всё, что угодно? Например: "Нужно отправить Ваню с российским паспортом из Москвы в Мексику по турвизе" — и всё. GPT сам соберёт анкету.

Главный успешный сценарий

  • Пользователь выбирает гражданство, страну подачи, страну назначения, тип визы.

  • Система подгружает шаблон анкеты — список нужных вопросов.

  • Пользователь снимает галочки с лишнего.

  • Нажимает “Создать анкету” — получает ссылку.

  • Отправляет ссылку сотруднику.

  • Тот заполняет всё.

  • Пользователь получает уведомление — и может готовить документы для визового центра.

Строим архитектуру

Вот здесь начинается вайб. Я не делаю финальный продукт - мне важно проверить гипотезу. Поэтому не архитектурю, а вайблю. Пишу, что нужно, и ИИ сам предлагает стек. Flask? Окей. TailwindCSS? Без проблем. Одно условие - форму будем генерировать по Typeform API. После - прошу GPT нарисовать схему. И вот, что получилось:

Схема тоже от ИИ, естественно

  1. 🧱 Frontend (в браузере пользователя)

    • HTML — структура

    • TailwindCSS — стиль, iOS вайбы

    • JavaScript — переключение вкладок, loader, блокировка кнопок

    → Отправка данных на backend /step2 или /prompt

  2. 🐍 Backend (Heroku, Flask, Python)

    • Обработка форм

    • Генерация JSON для Typeform

    • Валидация и нормализация

    • Отправка запроса в Typeform API

    • Возврат ссылки на анкету

  3. 🔌 Интеграции и API

    • OpenAI API — генерация анкет по тексту (gpt-4o, запасной: gpt-3.5)

    • Typeform API — POST /forms, возвращает ссылку

    • Переменные окружения: OPENAI_API_KEY, TYPEFORM_API_TOKEN

Подробнее про вайб-кодинг

Писать код по вайбу - это как кататься на качелях.

Иногда ты говоришь: “Надо сделать так-то”, - GPT пишет, ты пушишь, и всё работает. Эйфория.

А иногда… GPT выдаёт JSON. Typeform его “не ест”. GPT нормализует. Снова ошибка. Делаем 20 итераций. Снова ошибка. 21-я? Победа.

Вот тут и помогает база. Я знал, чего жду, и направлял ИИ. Без базы, думаю, пришлось бы делать 40 итераций. И это тот момент, где может захотеться послать вайб-кодинг в лес.

Для примера, вот такой промт по формированию json у меня получился.

Ты помогаешь создавать анкеты для Typeform (https://developer.typeform.com/create/reference/create-form/).

❗ ВАЖНО:
- Ты возвращаешь ТОЛЬКО валидный JSON, НИ ОДНОЙ строки с // или /* */.
- Ответ ДОЛЖЕН начинаться с { и быть полноценным JSON-объектом.
- НЕ добавляй никакого текста или пояснений — только JSON.

📦 Структура поля:
{
  "title": "Полный текст вопроса",
  "type": "dropdown" или "short_text" или "multiple_choice" и т.д.,
  "ref": "уникальный_id_поля",
  "properties": {
    "choices": [{"label": "Вариант 1"}, {"label": "Вариант 2"}] // если применимо
  },
  "validations": {"required": true} // если поле обязательное
}

Верни только JSON с полями ["title", "fields"] — в формате Typeform API v1.
"""

    models = ["gpt-4o", "gpt-3.5-turbo"]

Результат

Покажу скриншотами (API привязан к моему аккаунту, сорян). НО! Главное, что получился интерактивный прототип. Отправляю ссылку эйчару, встаю за плечо и смотрю, как он использует этот прототип, собираю обратную связь и быстро допиливаю прототип. В самом удачном случае эйчары уже буду использовать мой прототип, так как он экономит им время. А я уже пойду создавать статью в конфлюенсе, тикеты в джире, ставить звонок на архитектурный комитет и безопасников. Ну или как устроено в вашей компании?

Флоу с заготовками.

Выбираем все базовые данные по которым система из зашитого каталога выберет нужный список вопросов.

Весь дизайн поэтапно сделал ИИ. Так и говорил, сделай активный таб синим, неактивный серым. И всё получается на вайбе.

Выбираем, какие вопросы убрать, а какие оставить

Список так себе, но у меня и не стояло задачи сделать правильный список

Генеририруем форму и получаем на неё ссылку, которую можно отправить сотруднику

Это не попап, а лучше - рисунок попапа!

А вот так выглядит сама анкета в системе. Слева сгенерированные вопросы, справа то, как их увидит юзер при прохождении.

А вот и AI Flow

Здесь всё то же самое, только вбиваем текст типа "отправить Петра из Сербии в Японию на бизнес-визу", GPT генерирует анкету. Работает, но пока формулирует вопросы слабовато. Фича добавлена ради вайба.

А еще можно это через Телеграм бота сделать...

В первой итерации я мог бесконечно кликать на кнопку "Сгенерировать форму с GPT", жрать свои лимиты и не получать результат. Поэтому попросил ИИ кнопку блокировать и вывести сообщение о том, что процесс идет.

На генерацию уходит секунд 5

Ну и вот результат. Как сказал выше, глубина проработки так себе, но это можно настроить. Мы же делаем даже не MVP, а прототип для валидации полезной модели.

Все 7 вопросов ИИ сам придумал

Итог

Я получил задачу - и за день собрал интерактивный прототип. На второй день могу провести кастдев, получить фидбэк, доработать прототип. И только после этого — можно думать о Jira, Confluence, созвонах и всех деньгах мира.

Мне кажется, именно для такого использования AI уже готов. А вот вайб-кодить продакшн - тут уже осторожнее.

Как недавно сказал CEO Shopify: "Если ты не используешь ИИ в работе уже сейчас, то ты соскальзываешь, а чтобы удержаться в рынке, надо всегда идти вперед". Так что пиши промты, собирай прототипы, валидируй гипотезы - и двигайся быстро, как будто тебя подгоняет дедлайн. А ещё - подписывайтесь на канал, ставьте лайки, всё такое 🫶