Эксперимент: создаю продукт с помощью вайбкодинга. День №1🧡

Ребят, вы проголосовали и у нас ничья. Презентация и лендинг набрали одинаковое количество голосов. Поэтому я пошла на крайние меры и сделала финальный выбор в пользу презентации.

Итак, этап первый: выбор идеи
Вайбкодинг начинается не с кода. Он начинается с понимания, ЧТО ты хочешь создать и ЗАЧЕМ.

У меня уже есть конкретная задача: мне нужно подготовить презентацию про культурные различия в коммуникации между Северной Америкой и странами СНГ. Поэтому я начинаю со своей более-менее конкретной и понятной идеи.

Что я уже понимаю про свою презентацию:
✔Формат: 10 минут живого выступления
✔Тема: культурные различия США/Канада vs СНГ
✔Фокус на трех элементах: коммуникация, обратная связь и выстраивание доверительных отношений.

А если что, если идеи нет?
Если идеи или задачи нет, то вы возможно вы просто счастливчик и вам ничего не нужно делать или вы пока просто не понимаете, что можно вообще навайбкодить. А навайбкодить можно что угодно: квизы, сайты, симуляторы, тренажеры, портфолио, презентации, платформы и даже приложения, при желании.

Для тренировки, можно выбрать тему, которая вам нравится (например, Фантастические бобры и где они обитают) и выбрать более простой формат (например, интерактивный гайд или квиз).

Следующий шаг: создание плана и детального сценария. Это будет ТЗ для AI. Подробное техническое задание, чтобы нейросеть понимала, что именно я хочу увидеть на каждом слайде.

Оставайтесь и ставьте огонечки, расскажу, как это делается 🔥

Ваша Туча 🧡

Как я за одну ночь подготовилась к собесу и получила оффер за 1 час.

Пятница, 9 утра. Иду на внутреннее собеседование.

Для контекста
Открылась постоянная роль Senior L&D Specialist в HR в нашей компании. Сейчас я на контракте в отделе IT, где, к слову, полная неопределенность с проектами и будущим отдела. Решила попробоваться: половина моих задач и так уже связана с HR и софт скиллами.

Вечер накануне
Поняла, что неплохо бы подготовиться. Собрала презентацию, получился sales pitch меня как специалиста. Подумала, что в любом случае полезно структурировать свой опыт (на будущее).

Что было в презентации:
❤ Обо мне: ценности, фокусы в работе, релевантный опыт
❤ О процессе: как работаю, этапы разработки продукта, цель каждого этапа + deliverables
❤ О проектах: три ярких кейса за год в формате problem → solution → results. Плюс все стейкхолдерами, с которыми работала и которые могут дать реальный фидбек.
❤️ L&D Strategy: мое видение, что можно сделать для достижения целей компании.

Результат
В конце встречи менеджер сказала, что много слышала о моих результатах от стейкхолдеров и будет рада видеть меня в команде🧡

Поэтому…уже с понедельника стартую в новой команде, с новой зарплатой и начинаю постепенный transition.😎

В общем, думаю, что если приходить на собесы с такой селф-презентацией, то нанимающему менеджеру будет А) понятно, кто вы по жизни, Б) ясно, что вы заинтересованы в вакансии и компании. Кому нужен шаблон презы, пишите в комментах, отправлю в личку.

Такие дела.🧡

Ребята, спасибо за поздравления!🧡

Совы с шаблонами презентации улетели в ваши личные сообщения.

А еще вчера купила билет на концерт Леди Гаги! Помните, мы как-то обсуждали с вами, куда лучше потратить годовой бонус?

В общем, выбрала эмоции🔺

Эксперимент: создаю презентацию с помощью вайбкодинга. День №2 🧡

Выбрали идею, теперь самое интересное. Создаем архитектуру (она же ТЗ, она же PRD, как вам удобнее).

В моем случае это ТЗ для презентации. Для простой презентации нам, в целом, не нужны сложные UX-флоу или функциональные требования. Фокус на двух вещах: качественный контент + запоминающийся визуал, который передает вайб презы. UX классический: листаем слайды, возможно добавим пару интерактивов по ходу.

Мой процесс под эту задачу выглядил так:
❤ Сгенировала черновик плана.
Открыла Google Doc и попросила Gemini сделать черновик структуры презентации. Он выдал неплохой вариант для старта. Сразу добавила свои мысли, идеи в комментарии к этому плану, чтобы не забыть.

❤ Собрала контекст отовсюду.
- Поресерчила примеры на Reddit и Twitter через deep research
- Полазила по рабочим чатам и документам, где мне оставляли фидбек. Искала реальные примеры из своей жизни
- Зашла в почту (подписана на рассылки по бизнес-английскому) и попросила Gemini вытащить полезные фразочки из этих рассылок
- Нашла пару подкастов и транскрибировала их
- Нашла отрывки из любимой книги

❤Загрузила все в одно место.
Все файлы, ресерчи, примеры. Это теперь важный контекст для AI. Я сейчас тестирую Cursor, поэтому все сохранила там. Но можно использовать Projects, например, в ваших любимых нейросетях, или просто добавлять в чат все файлы (если позволяет нейросеть).

❤Составила ТЗ с опорой на контекст.
На основе всего собранного контекста попросила AI написать детальный сценарий по слайдам. Потом было много итераций доработки контента.

❤Добавила визуальную концепцию.
Когда я поняла, что контент готов, я сгенерировала UX для каждого слайда по смыслу, подредактировала, а потом сгенерировала дизайн. Мне захотелось чего-то ностальгического: девяностые, пиксельный арт, вот это вот все.

Что получилось на выходе
✔ Детальный сценарий (что на каждом слайде)
✔ Рекомендации по UX (как расположена информация)
✔ Общая концепция UI (визуальный стиль)

Главный инсайт этого этапа: AI помогает собрать и структурировать, но финальные решения все равно за тобой. Ты редактируешь, выбираешь примеры, задаешь вайб.

Следующий шаг: первый прототип.

Продолжаем?🔥

Ваша Туча 🧡

Эксперимент: создаю презентацию с помощью вайбкодинга. День №3 🧡

ТЗ готово, сценарий прописан. Теперь самое волнительное – увидеть первый результат.

Это мой любимый момент в вайбкодинге. Когда вся твоя кропотливая работа над контентом, сценарием вдруг превращается во что-то визуальное. Буквально за минуты!

Какой процесс:
❤ Идем в текстовую нейросеть
❤ Загружаем ТЗ отдельным файлом (или можно текстом, если позволяет нейросеть)
❤ Давайте просто попросим создать интерактивную презентацию, используя HTML, CSS и JavaScript. Не будем усложнять. Пока что😅

Какие нейросети использовать:
Прототипы можно создавать в любой текстовой нейросети, которую вы используете. Для первых тренировок начинаем в той, которая у вас уже есть.

Я сейчас работаю в Gemini и экспериментирую с Cursor. Но... обычно когда у меня есть время (и хорошее настроение), я могу поставить задачу сразу нескольким нейросетям и продолжить в той, где мне понравился первый прототип.

Эксперимент: сравнение нейросетей
Для этого эксперимента я тоже решила сравнить несколько нейросетей. Итак, загружаем ТЗ + промпт вот в такой набор:
✔Claude (бесплатный)
✔Gemini (платный)
✔ChatGPT (бесплатный)
✔Cursor (платный)
✔Canva (платный)
✔DeepSeek (бесплатный)

Давайте смотреть, что получилось и голосовать, какую нейросеть выбираем! Для чистоты эксперимента на скриншоте оставила только цифры, чтобы вместе выбрать наиболее подходящую нейросеть для этой задачи🔺

Голосуем и ставим огонечки, если продолжаем дальше! 🔥

Happy Friday, dear humans!🧡

Предлагаю вместе посмотреть и похихикать над этой рекламой к предстоящему Super Bowl от Anthropic, где ребята довольно мило высмеивают ChatGPT🔺

https://youtu.be/De-_wQpKw0s?si=4mo7CkOW5g3Zh6ae

Эксперимент: создаю презентацию с помощью вайбкодинга. День №4 🧡

Результаты голосования
Спасибо всем, кто голосовал! По итогам голосования 1-е место заняла нейросеть №5 (и это была Canva).

Мои личные фавориты для создания прототипов: Gemini (№2), Cursor (№1) и Claude (№4) (даже бесплатная версия неплохо справилась). Так как я сейчас экспериментирую с Cursor, решила продолжить именно в нем. Но если бы не этот эксперимент, то точно пошла бы дальше с Gemini.

Итак, что дальше?
Дальше итеративная доработка прототипа. Первый ВАУ эффект уже обычно проходит на этом этапе и мы фокусируемся на деталях и качестве.

Как можно подходить к доработке презентации:
❤Сначала UX, потом UI: фокусируемся на логике и удобстве, потом переходим к визуалу.

❤ Послайдово: берем каждый слайд и доводим до ума по очереди.

❤ Сначала UI, потом UX: я выбрала этот вариант, начала с UI, потому что сразу хотелось добавить стиля и яркости, чтобы было потом приятно дорабатывать UX. И потом пошла докручивать по слайдам.

Что я сделала:
Мне вообще не нравился дизайн всех предложенных вариантов, эта синева не мое. Поэтому пошла искать референсы, которые откликаются. Нашла пару вариантов, попробовала оба и выбрала один для дальнейшей работы.

Потом уже шла по слайдам маленькими шагами: писала, что конкретно нужно поправить на каждом слайде, и такими мини-итерациями дорабатывала презентацию.

Фишка Cursor:
В Cursor классно то, что он переписывает отдельные блоки кода, и ты видишь, где именно вносятся изменения. Если разбираешься в коде, можно все контролировать.

В других нейросетях это происходит "под капотом", но можно уточнять в промпте: "ничего больше не меняй, работай только с этим слайдом", чтобы нейросеть не начала фантазировать.

✔Кстати, про курс:
На курсе по вайбкодингу мы как раз будем учиться не только падать в обморок от первого прототипа, но и фокусироваться на доработке и итерациях. Разберем: что и как улучшать, на чем фокусироваться, какие промпты использовать, на какие вопросы себе отвечать в процессе.

На картинке два варианта дизайна, из которых выбирала.

Ребята, финал близко! Совсем скоро поделюсь финальным результатом! Ну, у меня мурашки, вы там как? продолжаем?🔥

Ваша Туча 🧡