18 сентября я провёл открытый воркшоп: за два часа в прямом эфире мы с участниками собрали работающий прототип трекера целей и привычек с напоминаниями в Telegram. Идею выбрали голосованием, требования надиктовали вместе, код писала армия ИИ-агентов, пока мы разбирали лайфхаки и вопросы. На эфире я обещал сделать методичку, потому что контент получился плотный. Вот она: весь путь по шагам, с промтами, слайдами и кадрами из записи.
Где вайбкодинг выстреливает, а где лучше не рисковать
Про вайбкодинг чаще всего рассказывают истории в духе «сделай свой SaaS и стань миллиардером». Обычно их рассказывают те, кто продаёт курсы или что-то вокруг таких проектов. Я сам на этот хайп повёлся, пробовал. Люди, которые заработали, есть. Но неудачных попыток среди тех, кто что-то навайбкодил, кратно больше.
Простой тест: посмотрите на свой телефон. Какие приложения у вас появились за последний год, какие новые подписки? Скорее всего, доставка и пара нейронок. Проектов «мамкиных миллиардеров» там нет, хотя приложений из-за нейронок сейчас выходит в разы больше, чем раньше.
Рискованно: большой сервис на много пользователей. Аналог Инстаграма, который пишет нейронка, быстро посыплется. Безопасность, нагрузка, масштабирование: если у вас нет хорошего айтишного бэкграунда, особенно по бэкенду, или ИТ-специалиста рядом, вы словите очень много негатива.
Сказка: SaaS и миллионы. Даже если продукт получится, без налаженного привлечения аудитории он никому не нужен. А это куча процессов, которые лежат далеко за пределами вайбкодинга.
Топчик: под себя и свою компанию. Личные задачи: трекер привычек, задачник, календарь ухода за ребёнком. Или внутренние инструменты для бизнеса, на чём мы в основном и специализируемся. Нашли проблему, не нашли на рынке готового решения или готовые не устраивают: день-два-три на вайбкодинг, и пользуетесь. Докручиваете в процессе как хотите, не платите много денег разработчикам и не ждёте годами в очереди, пока они что-то сделают.
Два примера из практики
Анализатор тендеров
У клиента был простой ИИ-анализатор тендеров. Он не умел работать с файлами ТЗ, смотрел только описание, по сути метаданные. И все настройки принадлежали подрядчику. Мы сделали свой анализатор с нормальным интерфейсом: он залезает в ТЗ, а за два месяца к нему добавились поиск ЛПР в LinkedIn, анализ новостей и вакансий компании, чтобы до тендера успеть пообщаться и повысить шансы на победу.
Агрегаторы тендеров на рынке есть. Но так, чтобы нейронкой проанализировать и собрать всё дополнительное, готового нет. Чем ждать, проще сделать своё.
Генератор документов
Тут история смешная. Я пришёл взять интервью у сотрудницы, чтобы собрать контент в базу знаний. А выяснилось, что на ручную подготовку четырёх типов документов у неё каждый раз уходит два-три часа. Сильный сейл вместо того, чтобы продавать, тратит время на бумажки. Причём интеллектуальной работы там ноль, чистая механика.
Мы сделали простейшее приложение: отмечаешь галочками нужные пункты, и комплект документов собирается автоматически. Я получил исходники документов, сделал по аналогии, только автоматически. MVP был готов за сутки, потом одна сессия доработок, и всё, люди пользуются каждый день. Готового решения под нашу компанию просто не существовало.
Посмотрите на этот кейс внимательно, когда будете думать, что сделать у себя. Ищите места, где у вас лютые потери: очень много времени уходит на ручную работу, или готовые решения вообще никак не устраивают. Решить свою локальную бизнес-задачу, не пытаясь заработать на внешних пользователях, это ровно то место, где вы почувствуете эффект быстрее всего.
Оба примера из нашего проекта «Директор на аутсорсе»: это часть того, что мы сделали для одной компании за первые три месяца работы. Там ещё много интересного, подробнее весь кейс я разбирал в телеграм-канале.
Что собирали: голосование
Я заготовил несколько вариантов, но предупредил, что они ни к чему не обязывают. Участники добавили свои: квиз для клиента с персональной рекомендацией, личные финансы. В финал вышли личные финансы, трекер и квиз. Трекер и квиз набрали поровну, как в хорошо срежиссированном реалити-шоу, поэтому решающим стал голос участницы, которая голосовала за личные финансы: она выбрала трекер. Так мы пошли делать трекер целей и привычек с напоминаниями в Telegram.
Claude Code или Codex: не важно
Я показывал всё в Claude Code, но принципы везде одинаковые. Codex справится с этой задачей точно так же. Каждый день выходят заголовки «новая модель побила все бенчмарки», «убийца Claude Code», «убийца Codex». Их цель привлечь внимание, а не дать пользу. Вникать каждый день, что изменилось, ради того, чтобы решить задачу на 0,5% лучше, смысла мало. Лучше чуть грамотнее формулировать запросы: разительной разницы между топовыми нейронками вы не увидите.
Терминал тоже не обязателен, у Claude есть десктопное приложение. Я пробовал сидеть в нём последние несколько дней, но пока остались моменты, которые меня не устраивают, поэтому работаю в терминале.
Про подписку спрашивали отдельно. На создание приложений тариф за $20 сгорит очень быстро, вы упрётесь в пятичасовое окно лимитов ещё на этапе подготовки. Ориентируйтесь на тариф от $100. Я больше года сидел на нём, а потом перешёл на $200, потому что в одном из проектов мы внедрили агента, который крутится почти постоянно и очень сильно ест лимиты. Для масштаба: на весь цикл «Ритма», от исследования и PRD до сборки, тестов и ревью, по логам сессии ушло около 7 миллионов токенов, большая часть на девять параллельных агентов.
Шаг 1. Надиктовать идею и попросить уточняющие вопросы
Механика такая: мы не пишем ТЗ руками. Даём нейронке описание своими словами, она задаёт уточняющие вопросы и делает PRD (Product Requirements Document, документ с требованиями к продукту). По сути это такое ТЗ, только чуть подробнее. Мы его вычитываем, комментируем, определяем, что войдёт в MVP, и только потом запускаем реализацию.
Пока я набрасывал описание, участники накидывали, что хотят видеть в трекере. Вот что вошло:
- Цели по логике OKR. Как в бизнесе: большая цель, под ней измеримые результаты, под ними ежедневные действия.
- Геймификация. Как делают Uber и Яндекс с таксистами: «до следующей круглой суммы или ачивки не хватает всего одной поездки». Мы сейчас активно внедряем такие элементы в свои продукты, в онбординг сотрудников и изучение базы знаний.
- Без давления и стыда. Одна участница рассказала про знакомую, которая перешла с умных часов на механические: надоело, что трекер всё время внушает, что она должна соответствовать какому-то идеалу. Поэтому тон поддерживающий, без FOMO, как хороший родитель с ребёнком: через заботу, а не через «ты не справилась».
- Итоги каждую неделю, а не раз в две. В конце недели итоги, в начале следующей план.
Про опечатки, кстати, можно не париться: если смысл не искажён, нейронки прекрасно понимают. Я сам в промте написал «PHD» вместо «PRD», поправил только потому, что это меняет смысл. Вот что в итоге ушло в терминал, почти дословно:
Задай мне уточняющие вопросы и сделай PRD-документ. Архитектура, функции, концепция проекта. Не усложняй, пиши только ключевое, чтобы я как не технический специалист вычитал, дал тебе обратную связь с точки зрения продукта, и мы погнали по реализации.
Используй скилл для поиска классных референсов. Отдельно изучи геймификацию, чтобы у нас и лучшие наработки других приложений были использованы, и с точки зрения удержания, психологии и геймификации мы использовали самые актуальные наработки.
Как видите, никакого rocket science: описал базовые требования, попросил сделать ТЗ и поискать хорошие наработки в интернете. Всё.
Главный лайфхак всей работы с нейронками: голосовая диктовка. Если печатать руками, вам будет эпически лень давать достаточно контекста, промты получатся короткими, и важные детали потеряются. Лучше с «эканьем» и «беканьем» наговорить побольше, чем коротко напечатать. Я для этого сделал своё приложение, Dictator, о нём ниже в разделе про инструменты.
Шаг 2. Исследование лучших практик, которое копится
У меня есть скилл Best Practices. Глобально он делает две вещи. Во-первых, ищет по ключевым библиотекам документации для разработчиков: Context7, Ref и Exa. Знания у нейронок фундаментально чуть устаревшие, а там самые свежие версии библиотек. Во-вторых, гуглит бытовые вещи: похожие приложения, психологию, геймификацию.
Важная деталь: всё найденное скилл сохраняет в базу знаний, чтобы в следующий раз не делать тот же анализ заново. У меня таких исследований уже куча: правильная система учёта финансов в бизнесе, лучшие практики по маркетингу 2026 года, по личной эффективности и так далее. Один из участников правильно сказал, что системность работы с нейронкой из таких мелочей и состоит.
Как у меня устроены папки, контекст и скиллы, я подробно показывал с экраном в ролике «Что внутри ИИ-агента, который заменяет 3 сотрудников». Там всё заблюрено, поэтому показать удалось сильно больше, чем без подготовки на эфире.
Пока шло исследование, нейронка задавала вопросы: интерфейс, хранение данных, роль ИИ внутри продукта. Для ускорения я ответил так: веб-версия (iOS-приложение собирается тоже быстро, но на эфире не хотелось терять время), ИИ без всяких API-запросов, демо-данные пусть нейронка придумает сама, а потом прогоним демо-онбординг нового человека.
Шаг 3. Упрощённый PRD, который реально прочитать
Очень рекомендую посмотреть репозиторий ai-dev-tasks. Его автор давно занимается разработкой и часто рассказывал про свою методику в подкастах. Она состоит из трёх шагов: один скилл делает PRD, второй режет его на задачи и подзадачи с галочками, дальше подзадачи выполняются по одной, и после каждой нейронка ждёт вашей проверки. Я во многом опирался на этот подход.
Сейчас он частично устарел: репозиторий не обновлялся 11 месяцев, а нейронки уже сами прекрасно режут себе задачи и работают в мультиагентном режиме. К тому же PRD там очень подробный, с user stories и кучей всего. Для обывателя, который делает не высоконагруженный сервис, это перебор. Лучше посмотреть ключевые блоки и дать ключевую обратную связь, чем увидеть много букв, ничего не понять и вообще не прочитать PRD. Но как база, чтобы понимать, как всё работает под капотом, методика классная.
Наш PRD получился простым: концепция, функции, коротко архитектура. Нейронка сама завела папку проекта, положила туда контекст, исследования (референсы, геймификация, OKR) и сам PRD. Я прочитал его по диагонали: мы же не космический корабль делаем. Боли и хотелки участников учтены: OKR с измеримыми результатами, сила привычки, мягкое отношение к пропускам. Мне особенно понравилось последнее. Знаете, как в Duolingo: «1300 дней подряд, стрик будет потерян, ты никто, всё сгорит». Многих это скорее демотивирует.
Вот этот PRD целиком, в той версии, которая пошла в реализацию. Первая версия отличалась только архитектурой: там был полноценный сервер с базой и наш внутренний бот. После моего комментария (о нём ниже) всё стало локальным: одна HTML-страница, маленький сервер на Python и отдельный бот для Telegram. Документ можно прокрутить внутри окна.
PRD: «Трекер целей и привычек». Демо-продукт
Статус: согласован 18.09.2026, собран
Исследования, на которых стоит документ: research/01-references-oss.md (референсы и open source), research/02-gamification-psychology.md (геймификация и психология), research/03-okr-method-tech.md (личные OKR и техника)
1. Зачем это
Что делаем. Веб-приложение, в котором человек ставит цель, разбивает её на измеримые промежуточные результаты и ежедневные привычки, отмечает выполнение, получает напоминания в Telegram и раз в неделю подводит итоги с ИИ-коучем.
Зачем нам. Это кейс для клиентов: показываем, как мы собираем ИТ-продукт от идеи до работающей версии. Показ проходит вживую: открываем приложение с готовой историей пользователя, затем при клиенте проводим онбординг нового человека с нуля.
Какую проблему решает продукт. Трекеры привычек бросают в первые недели. Причины обычно две. Первая: человеку тычут в недостигнутое («стрик сгорел», «цель не выполнена»), он чувствует себя неудачником и уходит. Вторая: привычки живут отдельно от целей, и непонятно, зачем их делать. Мы связываем привычки с целями по логике бизнес-OKR и строим весь продукт вокруг поддержки, а не давления.
2. Концепция в трёх уровнях
| Уровень | Что это | Пример |
|---|---|---|
| Цель | Куда хочу прийти, словами | «Вернуть себе форму к лету» |
| Результаты (2-3 на цель) | Как пойму, что пришёл: число и срок | «Пробежать 10 км без остановки к 1 июня», «Минус 5 кг» |
| Привычки | Что делаю регулярно, чтобы результаты сдвигались | «Пробежка 3 раза в неделю», «Ужин до 20:00» |
Привычка всегда привязана к результату. Человек видит, что его ежедневные действия двигают что-то большое.
Результат бывает двух типов: - обязательный: жду 100%; - амбициозный: успехом считается уже 70% (так принято в OKR у Google), прогресс-бар зеленеет с 70%.
3. Главный принцип: поддерживаем, а не подгоняем
Это ядро продукта, и все функции ниже проверяются на соответствие ему.
- Сначала показываем сделанное. Главный экран отвечает на вопрос «что у меня получилось», а не «сколько осталось». Разрыв «до результата не хватило N» живёт в аналитике и в недельном ревью, подаётся спокойно и с подсказкой, что делать.
- Один пропуск не считается провалом. Исследования показывают, что пропущенный день не мешает сформировать привычку. Правило «не пропускай дважды»: один пропуск молча прощаем, после второго подряд бот мягко предлагает короткую версию.
- Сила привычки вместо хрупкого стрика. Показатель от 0 до 100%, который растёт от выполнений и медленно снижается от пропусков, но никогда не обнуляется (так устроен Loop Habit Tracker). Стрик тоже есть, но у него 2 «запасных дня» в неделю, и сгорает он только после третьего пропуска.
- У каждой привычки есть минимум. «Пробежка 30 минут, минимум 10». Минимум засчитывается как полноценное выполнение. Это убирает логику «всё или ничего», из-за которой люди срываются.
- Первые 14 дней мягкий режим. Проценты и разрывы до цели не показываем, только победы и ачивки. Задача первых двух недель: чтобы человек дошёл до первой победы и привык открывать приложение.
- Никаких сравнений с другими и никаких сообщений в духе «твоя привычка умирает».
- Честно про сроки. Нигде не обещаем «21 день до привычки». По данным исследований у разных людей на это уходит от 2 до 3 месяцев.
Примеры тона:
| Ситуация | Так не пишем | Так пишем |
|---|---|---|
| Пропуск двух дней | «Ты пропустил 2 дня, привычка под угрозой!» | «Заметил паузу, бывает. Сделаем сегодня короткую версию, 10 минут?» |
| Возврат после перерыва | «Ты не выполнял цель 5 дней» | «Рад снова видеть. Догонять всё не нужно, с чего начнём?» |
| Результат на 65% | «Цель не достигнута» | «65% по амбициозной цели, для таких целей это уже успех» |
| Неделя не задалась | «Наверстай прошлую неделю» | «Новая неделя, чистый лист. Что берём в работу?» |
4. Функции
4.1 Онбординг и постановка цели
- Ф1. Человек пишет цель своими словами («хочу похудеть и больше бегать»).
- Ф2. ИИ предлагает формулировку цели, 2-3 измеримых результата и 2-4 привычки к ним. Человек правит, убирает лишнее, подтверждает. Решение всегда за человеком: ИИ предлагает, а не назначает.
- Ф3. Для каждой привычки задаётся минимум, частота и якорь «после чего я это делаю» («после утреннего кофе 10 минут чтения»). Задаётся пошагово, вопрос за вопросом, а не одной большой формой: так формулировка плана работает сильнее.
- Ф4. Человек выбирает время напоминаний и подключает Telegram.
- Ф5. Онбординг занимает не больше 5 минут и заканчивается первой победой: первую привычку можно отметить сразу, прогресс-бар стартует не с нуля.
4.2 Каждый день
- Ф6. Экран «Сегодня»: список привычек на день, отметка в одно касание, два варианта «сделал» / «сделал минимум».
- Ф7. После отметки короткая реакция: засчитано, как выросла сила привычки, к чему это приближает.
- Ф8. Напоминание в Telegram: не больше одного в день на привычку, каждое можно выключить. Отмечаем привычку на странице.
4.3 Прогресс и аналитика
- Ф9. Экран цели: результаты с прогресс-барами, привычки с силой привычки и календарём выполнений.
- Ф10. Аналитика «сколько не хватило» по каждому результату, в трёх видах:
- сколько осталось: «до 10 км осталось 3 км»;
- прогноз: «при текущем темпе к 1 июня выйдешь на 8,5 км»;
- что поменять: «чтобы успеть, нужно 4 пробежки в неделю вместо 3». Всегда с пометкой «по текущему темпу», без красного цвета и восклицаний.
4.4 Недельное ревью (по понедельникам)
- Ф11. Раз в неделю бот зовёт на ревью. Порядок всегда один:
- Что получилось: цифры недели, выполненные привычки, новые ачивки. Всегда первым пунктом.
- Что мешало: вопрос «что помешало?», а не «почему не сделал».
- Что упростить: если привычка стабильно не идёт, ИИ предлагает её облегчить («10 минут вместо 30», «2 раза вместо 3»).
- План на следующую неделю: максимум 1-2 изменения, чтобы не перекраивать всё сразу.
- Ф12. ИИ пишет короткий итог недели человеческим языком и сохраняет его в историю.
- Ф13. Каждую неделю подаём как новую главу: прошлые пропуски в новую неделю долгом не переносятся.
4.5 Геймификация
- Ф14. Ачивки. Даём за движение и возвращение, а не только за идеальный результат. Примеры: «Первый шаг», «Первая полная неделя», «Возвращение» (снова в ритме после паузы), «Не пропустил дважды», «Личный рекорд», «Экономный режим» (7 раз закрыл минимум, тоже засчитано), «Полпути до результата».
- Ф15. Промежуточные вехи: результат делится на отрезки (25/50/75%). Каждая веха отмечается, и сразу появляется следующая. Так рядом всегда есть близкая цель.
- Ф16. Экран «Мои победы»: лента ачивок, личные рекорды, лучшие недели. Сюда ведёт кнопка из недельного ревью.
- Ф17. Ачивки ничего не открывают и не закрывают. Они показывают прогресс, а всё приложение доступно всегда.
4.6 Демо-режим
- Ф18. Готовый демо-пользователь с историей за 6 недель: 2 цели, 5 привычек, 5 недельных ревью, ачивки, один «провальный» отрезок и возвращение после него. На нём видно, как продукт ведёт себя в хорошие и в плохие недели.
- Ф19. Кнопка «Начать с нуля» для живого онбординга при клиенте.
- Ф20. Кнопка «Прислать напоминание сейчас», чтобы на встрече показать, как сообщение приходит в Telegram.
5. Что НЕ делаем в демо
- Соревнования, рейтинги, друзья, общие цели.
- Оплату, тарифы, регистрацию по email (вход одной кнопкой или сразу демо-пользователь).
- Мобильное приложение: адаптивная веб-версия, открывается и с телефона.
- Отдельную инфраструктуру для Telegram: хватает одного бота и прямого вызова Bot API.
- Реальные вызовы ИИ по API (см. раздел 6).
- Сервер с базой, вход, публичную ссылку: всё локально на ноутбуке.
- Английский язык сейчас, но всё подготовлено к его добавлению.
6. Архитектура (коротко)
Всё локально, без сборки и без внешних сервисов, кроме Telegram (решение по ходу проекта: «проще, это демо»).
Страница в браузере (HTML + JS) → маленький локальный сервер → Telegram-бот → Telegram
↓
папка-очередь для ИИ-запросов
- Приложение: одна интерактивная HTML-страница. Данные хранятся в браузере, кнопка «Сбросить к демо» возвращает исходное состояние.
- Локальный сервер (один файл на Python, без фреймворков): отдаёт страницу и отправляет сообщения в Telegram через Bot API. Токен бота остаётся на сервере и в страницу не попадает.
- Telegram: напоминания, мягкое «небольшая пауза, так бывает», новые ачивки, приглашение на ревью, итог недели. Сообщения приходят в указанный в настройках чат.
- ИИ без API: демо-историю и итоги недель заранее написал ИИ. При живом онбординге запрос из страницы кладётся в папку-очередь, ИИ-агент (или человек) отвечает на него через
ai_inbox.py. Если ответа нет, есть кнопка «Взять заготовку». - Расчёты кодом, смысл ИИ: силу привычки, стрик, прогноз и разрыв до цели считает код по формулам. Формулировки, итоги недели и предложения облегчить привычку делает ИИ.
- Поддерживаемость: весь текст интерфейса и сообщений лежит в одном словаре (русский, с заделом под другие языки). Цвета, шрифты и отступы заданы дизайн-токенами.
- Запуск: одна команда, дальше страница открывается на
http://localhost:8765.
7. Как поймём, что демо удалось
- Живой онбординг нового человека при клиенте занимает до 5 минут, от «хочу…» до первой отмеченной привычки.
- Напоминание приходит в Telegram во время показа.
- На демо-пользователе видно все ключевые экраны: сегодня, цель с аналитикой, недельное ревью, мои победы.
- В интерфейсе и сообщениях бота нет ни одной стыдящей формулировки (прогоняем тексты через чек-лист из раздела 3).
- Клиент после показа понимает, как мы работаем: исследование, PRD, задачи, сборка, проверка. Сам путь тоже часть демо.
8. Решения по открытым вопросам
- Демо-персонаж: Анна, 34 года, руководитель отдела. Цели «Вернуть форму» и «Прочитать 12 книг за год».
- Отметка прямо в Telegram: не в демо, отмечаем на странице.
- Публичная ссылка: не нужна, показ с ноутбука.
- Название продукта: «Ритм».
PRD «Ритма», финальная версия. Он же лежит в репозитории проекта
Фишка: правки комментариями прямо в документе
Когда получаете большой документ и хотите прокомментировать конкретную строчку или абзац, не пишите в чат «а вот в том абзаце, где про...». Вы очень долго будете объяснять координаты. Гораздо проще прокомментировать прямо в документе.
PRD и почти всё, что пишут нейронки, это Markdown-файлы: обычный текст с небольшим количеством разметки. Выделяете нужное место двумя знаками равно с каждой стороны, ==вот так==, это разметка подсветки, и пишете комментарий. Нейронка отрабатывает каждый такой комментарий как отдельную задачу.
Для этого я пользуюсь редактором Zettlr, он бесплатный и есть для Mac, Windows и Linux. В чём прелесть: в Cursor и Zed, где я работаю, Markdown показывается двумя способами. Либо как сырой текст со звёздочками и решётками, который трудно читать, особенно таблицы. Либо красиво, но тогда почему-то нельзя редактировать. Zettlr показывает красиво и сразу даёт править. После комментария не забудьте сохранить файл: звёздочка у названия пропала, значит, сохранено.
Чтобы нейронка понимала такие комментарии, один раз опишите правило в CLAUDE.md: как их искать и что с ними делать. Дальше она находит их сама.
Когда PRD прочитан, пишем «оставил комментарий, делай» и переходим к реализации.
Шаг 4. Реализация армией агентов
Промт на реализацию был такой:
В рамках этой сессии будь оркестратором, запускай Sonnet-агентов для реализации, где можно распараллеливай. Если нужно, нарежь себе это на задачи, чтобы ничего не забыть и не потерять. После реализации обязательно запусти тесты, чтобы убедиться, что всё работает. Если нужно, поправь.
Почему Sonnet: Opus дороже, его хорошо использовать для планирования и анализа, а с реализацией Sonnet справляется прекрасно и ест, по моим ощущениям, процентов на 35 меньше токенов. Плюс пара волшебных слов. ultracode принудительно запускает так называемый динамический воркфлоу, по сути армию агентов. TaskCreate заводит список задач, по которому видно прогресс.
Если заглянуть под капот, видно, как это идёт: четыре агента-сборщика параллельно, потом интеграция, ревью и исправления. Раньше, во времена методики ai-dev-tasks, нейронки так не умели. Контекстные окна были маленькие, агенты не умели общаться друг с другом и запускать друг друга, поэтому приходилось постоянно их фокусировать: «Родной, перед каждой задачей прочитай PRD, прочитай список задач, сделай свою подзадачу и поставь галочку». Сейчас окно у Opus на миллион токенов, а рой агентов гоняет себя сам.
Чистый кодинг после готового PRD занял около 45–50 минут. Нейронка в какой-то момент сама открыла браузер и проверяла вёрстку: смотрела экраны, делала себе скриншоты. Это, кстати, самый наглядный показатель магии нейронок, когда она у тебя на глазах что-то делает в браузере за тебя.
Claude Design: прототип экранов, как в Figma
Пока шла сборка, я попросил отдельную сессию: «Нарисуй, пожалуйста, прототип трёх экранов, супер заморачиваться не надо, мне просто нужно продемонстрировать функционал». Для реального продукта я бы, конечно, попросил изучить лучшие практики дизайна, продумать юзабилити и задать вопросы.
Claude Design очень похож на Figma: можно кликнуть на любой элемент, поменять размеры, отступы, передвинуть блоки мышкой вместо того, чтобы писать «передвинь». И что классно, нейронка видит все ваши правки и не считает, что «так и было». Вы с ней в одном контексте.
Комментировать макет можно двумя способами. Базовые комментарии как в Figma, но у них есть проблема: иконки комментариев не закреплены относительно полотна и съезжают при правках. Когда комментариев много, получается мешанина, и уже непонятно, к чему какой относился. Поэтому я оставляю комментарии стикерами (клавиша N): они не разъезжаются, а под ними нейронка пишет отчёт о выполнении. И если не хотите, чтобы правки начали отрабатываться сразу, снимите соответствующую галочку: сначала оставьте все комментарии, потом отработайте их за один заход.
Красиво с первого взгляда не значит, что готово. Это касается текстов, презентаций, сайтов, приложений, чего угодно.
На словах и по смыслу всё выглядит правильно. Но когда начинаешь вникать, выступать по этой презентации, работать по этой инструкции, пользоваться этим приложением, возникает миллиард нюансов в духе «бро, ну почему ты так сделал?». Недавно я попросил нейронку сделать презентацию по большому кейсу: контекст она знала, доступ ко всему был. Выглядело безумно красиво, ключевые слова на местах. Начал вычитывать, а там фигня. В итоге 99% текста написано моими руками. Если не вникать, мир получил бы очередной нейрослоп.
С презентацией для этого воркшопа вышло наоборот. Я накидал структуру, открыл свой шаблон выступления в Figma, и нейронка всё собрала сама, красиво, без единой моей правки, кроме ссылок в конце. Так что с Figma она тоже прекрасно работает.
Что должно быть в MVP
Единственное полезное, что я вынес из роликов «сделай свой стартап и стань миллиардером»: в MVP должны быть красивый дизайн и безупречно работающая базовая функция. Не гонитесь сразу за фичами.
Типичная история: «Нам не нравится подписка на Битрикс, сделаем свою CRM», и дальше попытка воспроизвести 100% функционала Битрикса. Не надо. Для старта нужна доска с клиентами, ключевыми данными и задачами. Всё. Интеграции, формы, дашборды следующим этапом. Помните мемы про собственника, который за вечер что-то навайбкодил и довольный принёс команде? А там неработающая штука, которую допиливать ещё месяц. Лагающий, неработающий, бессмысленный проект умрёт до рождения.
Ещё один вопрос с эфира: где хранить данные? Для MVP, для одного человека или для локального использования всё безумно просто: локальный файл, туда пишутся данные, и все счастливы. Сложность возрастает раз в десять, когда подключаются облачная синхронизация, несколько пользователей, разграничение доступов. Я на этом когда-то сильно забуксовал со своим стартапом, редактором бизнес-процессов: пока всё было локально, работало идеально и предсказуемо, а как начались интеграции с Google, облачный доступ и совместная работа, пошли приколы.
Что получилось
Название «Ритм» нейронка придумала сама, мы её об этом не просили. Приложение сразу открылось с демо-данными: вымышленная Анна с историей за шесть недель, двумя целями и пятью привычками. Есть экран «Сегодня», цели с аналитикой, победы и ачивки, недельное ревью, напоминания приходят в Telegram.
Для демонстрации этого более чем достаточно. Но интерфейс, который нарисовал Claude Design, сильно симпатичнее того, что собрали агенты: иконки ужасные, градиент отвратительный, где-то маленькие отступы. Первое, что я бы сделал дальше, даже не вникая в отчёт: дал бы ID сессии с дизайном и сказал «подхвати дизайн оттуда, на твой без слёз не взглянешь». И, кстати, не стесняйтесь просить несколько вариантов дизайна сразу: рисует нейронка в самых разных стилях довольно прикольно.
Посмотрите, что произошло: мы написали буквально несколько строчек текста и оставили один комментарий в PRD, и у нас работающая приложуха. Это магия. Но именно тут ловушка, про которую не говорят те, кто продаёт красивые истории. MVP за вечер реален. А довести его до продукта, которым действительно удобно пользоваться, где всё продумано, могут уйти месяцы. Реализация всё ещё быстрая и лёгкая, её делают нейронки. Сложно другое: отловить косяки, потыкаться на личном опыте и правильно дать обратную связь.
Код, PRD и исследования «Ритма» после эфира я доработал и выложил в открытый репозиторий: github.com/ptrtrg/ritm-demo. Запускается одной командой, зависимостей нет.
Как не сломать то, что уже работало
Самый частый вопрос: «Ставлю задачу, вношу правки, первые две нормально, а на пятой нейронка начинает чудить и исправлять то, что не надо». Что с этим делать.
GitHub и коммит после каждого изменения
Подключите GitHub и после каждой фичи делайте коммит. Это как резервные копии кода: хранятся все версии, можно откатиться на сколько угодно шагов назад. Описание коммита нейронка напишет сама, вам останется его отправить. Если нейронку понесло, откатываетесь к нужной версии и продолжаете с этого места. 99% работы с коммитами я делаю не кнопками, а просто в диалоге: «закоммить», «откати к вот этой версии». Нейронка у меня и доступы сотрудникам к репозиториям выдаёт сама: у неё есть справочник сотрудников и их аккаунтов.
Локальный CLAUDE.md с описанием проекта
Прошлым летом, когда я только начинал вайбкодить, нейронка регулярно всё забывала: что за проект, что у нас уже есть файл с ключами, что какая-то функция уже написана. Она делала новую функцию рядом со старой, и у меня было четыре куска кода, которые отвечали за одно и то же. В рабочей версии использовался, естественно, только один. Я прошу поправить, она поправляет не тот, я говорю «да что за фигня», а она показывает: «ну я же сделал». Это и есть то неподдерживаемое месиво, на которое ругаются программисты.
Сейчас нейронки держат структуру сильно лучше. А если её задокументировать, становится совсем хорошо. В папке приложения должен лежать локальный CLAUDE.md: концепция, архитектура, какая функция за что отвечает, где что лежит. Руками его писать не надо. Если подхватываете чужой проект или свой, где такого файла нет, запустите команду /init: она сама сделает техническое описание проекта. Экономит тонну времени и убирает кучу ошибок из-за галлюцинаций и дублирующих функций.
Тесты
По лучшим практикам разработки регрессионные тесты, которые проверяют, что всё по-прежнему работает, занимают чуть ли не 70–80% всего объёма кода. Хардкорные программисты сначала пишут тесты, а потом код. Для маленьких инструментов под себя мы так не заморачиваемся: потыкались, работает, и окей. Но если начинаете что-то пилить всерьёз, обкладывайтесь тестами, чтобы не было «шнурки завязал, ухо замёрзло».
Никакого хардкода
Цвета, шрифты, размеры и тексты в коде должны быть переменными (их ещё называют токенами), а не конкретными значениями. Как в вёрстке сайтов: есть HTML-структура страницы и отдельный CSS-файл со стилями. Поменяли один раз цвет заголовка, и он поменялся во всём приложении. Тексты выносим в словарь, тогда в любой момент можно сказать «а теперь добавь английский» или китайский.
Я на этом обжёгся на своём первом веб-приложении. Интерфейс был как из Windows 90-х, квадратные кнопки, страшно смотреть. Нашёл классные библиотеки, скормил нейронке, она говорит «сделал», а я открываю, и там всё то же унылое. Выяснилось, что всё было захардкожено: она меняла таблицу стилей, а на приложение это никак не влияло. Вычищали долго, за много итераций. Так что говорите нейронке прямым текстом: без хардкода.
Когда правок много: список и задачник
Тыкаете по экранам и находите много чего поправить? Не пишите сразу в чат. Откройте заметку с чекбоксами и заносите всё туда. Потом копируете список, отдаёте нейронке, а после отмечаете галочками, что действительно сделано. Нейронка периодически что-то упускает, по списку это сразу видно. Так я делал свой личный сайт: начал в пятницу вечером, закончил в субботу днём, три итерации разноплановых правок.
Если пункт требует долгого мучительного обсуждения, скажите нейронке его припарковать и вернуться к нему позже. Так он не блокирует остальное.
Когда идей и задач становится совсем много, заведите доску задач в Notion, Trello, где угодно. Приоритизируйте, отмечайте, к какой функции относится задача. Список в доску нейронка перенесёт сама и структурирует. А раз нейронки сейчас прекрасно подключаются ко всем этим платформам, можно сказать: «Бери следующую задачу оттуда, сам отмечай, сам меняй статусы, меня не трогай, вернись, когда станем миллиардерами».
Демо-данные вместо ТЗ для клиентов
Ещё один классный сценарий, который мы сейчас активно используем. Приходит клиент, и вместо того, чтобы неделями обсуждать ТЗ, мы проводим встречу, а на следующую приносим работающий прототип. Сколько ТЗ ни пиши, все мелкие нюансы и скрытые хотелки видны, только когда потрогаешь вживую.
Чтобы клиент мог примерить прототип на себя, просим нейронку сделать вымышленные данные: «Вот сайт компании, пофантазируй и сделай игровые данные». Люди видят свой контекст на узнаваемых примерах. То же самое, когда хочется показать скриншоты в кейсе, а клиентские данные светить нельзя: нейронка наполняет копию интерфейса вымышленной информацией, всё один в один, и ни одной клиентской цифры.
Проверяющий агент в конце любой операции
После любого анализа, создания документа, чего угодно мы запускаем отдельного агента-проверяющего с одной строчкой: «Проверь по исходным данным: ничего не забыл, ничего не исказил». Без сложных промтов. Сколько мы такое запускали, даже на самых дорогих моделях, он всегда что-то находит и исправляет.
Темп работы команды поменялся
С нейронками пришлось по-другому договариваться с сотрудниками про нагрузку и объёмы. Раньше я накидывал обратную связь по приложению под запись минут на 30, и это значило «окей, увидимся через месяц». Сейчас это просто набор задач для нейронки: скопировал, вставил, пошёл пить кофе. Поэтому бывает, что обратную связь дали утром, а результат я хочу увидеть в середине дня. Ребятам, которые пришли из ИТ с привычным скрамом, планом на месяц и спринтом на неделю, приходится перестраиваться, такой ультраскрам. И хорошо, когда вы сами умеете это делать, иначе вам будут рассказывать сказки, что «тут работы на три дня», хотя там один промт.
Что тогда требуется от человека, если между мной и терминалом он просто прослойка? Нести дополнительную ценность. Жёстко бью по рукам за две вещи. Первая: сырой текст от нейронки, отправленный клиенту или команде. Не присылайте портянку, которую надо пролистывать в телеграме: вычитайте и напишите суть своими словами, три тезиса или один ключевой вопрос. Вторая: не проведённые тесты. Если до клиента доехал косяк, который можно было поймать проверкой, вы фактически переложили бета-тестирование на клиента. За что тогда деньги брать?
Два-три процесса параллельно, не больше
Поставили задачу, нейронка работает, вы пошли пить чай. Возникает соблазн открыть ещё один терминал и заняться другой задачей. Держите себя в руках: самое сложное для мозга это переключаться между контекстами. Максимум два-три параллельных процесса, иначе к концу дня мозги закипят, а вы не будете понимать почему.
Чтобы не путаться, называйте сессии по понятной схеме. Нейронка даёт название сама, но не всегда удачно, поэтому я пишу «Клиент. Суть» или «Проект. Суть»: «Рекрутинг. Отклики», «Трекер. Код».
Инструменты, которые экономят время каждый день
На эфире попросили перечислить программы, без которых я уже не работаю. Все для Mac, где знаю, дал аналоги для Windows.
- Диктовка. Топ-1, об этом выше. На Mac мой Dictator, бесплатный. Для Windows есть OmniDictate, WhisperWriter, aTrain.
- Смена раскладки. Caramba Switcher для Mac и Windows, около 400 ₽ в год. Написали не на той раскладке, он сам переключит и исправит. Punto Switcher бесплатный, но его купил Яндекс, так что кому важна приватность, берите Caramba.
- Менеджер буфера обмена. Maccy, бесплатный с сайта. Хранит историю всего скопированного. Особенно важен вместе с диктовкой: она вставляет текст через буфер, и если в момент диктовки вы переключили окно, текст не потеряется, он лежит второй строчкой в истории.
- Быстрое переключение между приложениями. Manico: к каждой программе своя клавиша. Я почти не пользуюсь Alt+Tab, потому что там каждый раз ищешь глазами, где Telegram, а где Zoom. Здесь не глядя. На Windows похожее встроено: Win+1…Win+0 для первых десяти приложений на панели задач.
- Чтобы Mac не засыпал. Команда
caffeinateв терминале или расширение Caffeinate в Raycast, в настройках Claude тоже есть такая опция. Актуально, когда агент работает долго, а вы ушли за кофе. У меня компьютер вообще работает 24/7: некоторые агенты крутятся постоянно.
Ответы на вопросы с эфира
С чего начать базу знаний компании
Одна участница рассказала, что компания перестраивается в процессную, каждый руководитель пишет инструкции по-своему, получается зоопарк, и в одних отделах ими пользуются, а в других нет. Коротко, делай раз-два-три:
- Понять, зачем. Сформулировать концепцию: какие сейчас проблемы, как база знаний их решит, какое светлое будущее вы хотите. И не абстрактное «прирост продаж на 15%», а что поменяется лично у вас, собственника. Мы на многих проектах заметили: всем сделали одинаково хорошо, но кто-то кайфует и годами продолжает с нами работать, а кто-то сказал спасибо и отвалился. Ключевое: получил ли собственник эффект на своей шкуре.
- Начать с самой геморройной задачи. С той, что отнимает у вас время, или с той, что отнимает энергию: два дня настраиваешься, десять минут делаешь, потом ещё полдня плачешь в душе, обняв коленки. Опишите её в инструкции и делегируйте. Не пытайтесь описать сразу всю базу знаний: одну инструкцию сделали и уже кайфанули.
- Выбрать подход. От частного к общему: выбесило что-то, сделали инструкцию, выбесило в другом отделе, сделали ещё, идёте от пожара к пожару. От общего к частному: сначала собираете структуру, нагляднее всего по оргструктуре, потому что на каждый отдел и каждую должность нужны свои инструкции. Дальше закрашиваете сделанное на дорожной карте зелёным: и дофамин, и не запутаетесь.
Подробнее я разбирал это в ролике «5 главных ошибок при внедрении регламентов в бизнесе» и в своей книге «Объясняю один раз».
Как вести протоколы встреч
Мы записываем встречи в Notion AI, но на эти заметки базово даже не смотрим, они больше для истории. Если ждать саммари от нейронки, во-первых, это уже после встречи: все разбежались, и никто не будет сидеть семь минут. Во-вторых, как понять, что она ничего не упустила, если встреча шла полтора часа? Никак, 90% вы забудете.
Ключевое другое: во время встречи люди сами пишут в общий документ «Повестка и бэклог» (Google Docs, Notion, что угодно), и он всё время на демонстрации экрана. Так сразу видно, что человек тебя правильно понял. И не нужно тратить время в конце на «а точно ли мы всё обсудили, давайте сверимся»: всё перед глазами, двойных трактовок нет. Об этом и других инструментах менеджмента у меня есть ролик «Как создать идеальную команду? 8 советов для предпринимателей».
Нейронка или скрипт, если нужна обработка файлов
Один участник пытался сделать себе читалку под iOS, которая превращает PDF в удобный текст, и застрял: при конвертации слетало форматирование. Автоматизации бывают двух видов. Механические, где нейронка пишет скрипт, который по алгоритму что-то делает. И такие, где нейронка обрабатывает данные сама. Для большинства задач второе проще. Когда мне нужно было распознавать текст со скриншотов переписки с клиентом, нейронка сразу предложила OCR, а он теряет, кто отправитель, кто получатель, время, картинки. Я сказал: «Ты же всё видишь, давай сам», и всё заработало.
Если же обработка должна идти прямо в приложении на телефоне, вариантов три: механический конвертер, вызов нейронки по API или хитрая схема. Файл падает на сервер, сервер замечает новый файл и запускает сессию нейронки по подписке, чтобы не платить за API, а результат возвращается в приложение с пушем. Хитро, но экономит на подписках.
Где хостить
Для бесплатных демок нейронка у нас как-то сама выбрала Vercel: бесплатно и удобно. Для платного зарубежного сервера я пользовался Hetzner, но сейчас требования к регистрации ужесточают, так что проверьте, что попросят у вас.
Итоги
- Вайбкодинг рискован для больших сервисов и топчик для своих задач и своей компании.
- Примеры: анализатор тендеров, который каждое утро разбирает 15–30 конкурсов, и генератор документов, который экономит 2–3 часа на комплект.
- MVP собрали вместе примерно за 50 минут чистого кодинга после PRD: надиктовать идею, получить вопросы, прочитать упрощённый PRD, запустить агентов.
- Фишки: правки комментариями в документе, список хотелок с парковкой, задачник, коммиты, локальный CLAUDE.md, проверяющий агент.
Что дальше
- Как собрать ИИ-агента не для кода, а для прикладных задач бизнеса и жизни (онбординг клиента, договоры и счета, сделка из контекста разговора, КП, кросспостинг), я разбираю по шагам на курсе по ИИ.
- Если хотите, чтобы мы выстроили систему управления и ИИ-агентов руками нашей команды, оставьте заявку в форме ниже.
- Новые разборы выходят в телеграм-канале и на YouTube.