Пет-проект: своя штука за один вечер

Первое, что услышишь, рассказав об идее: «так это же уже есть». Да, есть. Таск-трекеров тысячи, калькуляторов калорий сотни, и все они кому-то не подходят, иначе не появлялись бы новые. Пет-проект не обязан быть уникальным. Он обязан быть твоим: решать задачу так, как удобно тебе, а не среднему пользователю из чужой аналитики. Instagram вырос из совсем другого приложения. Первый Slack — побочным инструментом игровой студии. Figma несколько лет делали до публичного запуска. Идеи, которые «уже есть», выигрывают исполнением и углом зрения. А угол зрения у дизайнера как раз есть.

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

Белый лист пугает, потому что кажется, что нужно придумать продукт. Не нужно. Нужно найти раздражение: то, что ты делаешь руками каждую неделю и каждый раз злишься (тема «Вайбкодинг: сайты», раздел «Если не понимаешь, что вайбкодить»). Три источника, где оно всегда есть:

• Твоя таблица или заметка, которую ты ведёшь вручную. Бюджет, список книг, трекер тренировок, учёт заказов на фрилансе. Всё, что живёт в Google-таблице с костылями, — уже готовое ТЗ на маленький продукт.
• Чужое приложение, которым ты пользуешься со злостью. Открой его и выпиши, что бесит. Это и есть спецификация: то же самое, но без этого, этого и этого.
• Вопрос, который тебе задают третий раз. Коллеги спрашивают, как перевести пиксели в миллиметры для печати. Клиенты — сколько стоит правка. Ответ можно один раз превратить в страницу.

Дальше самая важная операция: урезать до одного экрана и одного действия. Не «трекер привычек с напоминаниями, статистикой и синхронизацией», а «страница, где я отмечаю, сделал ли сегодня зарядку, и вижу цепочку дней». Всё остальное потом, если захочется. Первая версия должна быть настолько маленькой, чтобы её было стыдно показывать. Тогда она будет готова за вечер, а не за никогда.

Если идея всё равно не приходит, помогает разговор, а не размышление:

Я дизайнер, хочу сделать маленький личный продукт за пару вечеров, чтобы пройти путь до живой ссылки. Задавай мне по одному вопросу за раз о том, что я делаю руками каждую неделю, чем пользуюсь со злостью и что мне приходится объяснять людям снова и снова. Через 6–8 вопросов предложи три идеи размером в один экран и одно действие — и скажи, какая из них проще всего в реализации

Ресёрч для пет-проекта не про рынок и не про презентацию инвестору. Он про два вопроса: как это делают другие и что нужно тебе на самом деле. На него достаточно вечера. Вот из чего он состоит:

1. Три-пять аналогов, разобранных руками. Не читай обзоры, а заведи аккаунт и пройди главный сценарий в каждом. Выпиши: что сделано хорошо и что повторить, что раздражает, чего не хватает. Скриншоты — в мудборд. Библиотеки паттернов вроде Mobbin (тема «Вайбкодинг: интерфейсы») сокращают этот шаг для мобильных сценариев.
2. Собственные требования из реального использования. Неделю до старта записывай, как ты решаешь эту задачу сейчас: когда, где, что мешает. Это заменяет интервью с пользователями. Пользователь — ты.
3. Два-три человека, у которых такая же проблема. Не спрашивай «понравилась бы тебе такая штука?», на этот вопрос все отвечают «да». Спрашивай «как ты сейчас это делаешь?» и «когда в последний раз это бесило?». Принципы из темы «Поиск и ресерч контента» работают и здесь, только выборка маленькая. И это нормально.
4. Проверка, что это реально собрать. Один вопрос агенту: что в этой идее просто, что сложно, от чего можно отказаться в первой версии. Часто выясняется, что «сложная» часть — как раз та, без которой можно обойтись.

Вот идея: [описание в трёх предложениях]. Оцени по частям: что здесь тривиально, что потребует базы данных или аккаунтов, что честно сложно. Предложи версию, которую можно собрать за один вечер без бэкенда — и скажи, что она потеряет по сравнению с полной

После публикации появятся комментарии вроде «такое уже есть», «дизайнеру не надо кодить», «вайбкодинг — не разработка». По ним нельзя понять, что не так с продуктом, поэтому делать с ними ничего не нужно.

Полезный отзыв говорит о продукте и конкретен: «на телефоне не видно кнопку», «не понял, что делать после первого экрана». Такие отзывы записывай и закрывай во второй версии. Отзыв без конкретики пропускай. Вечер на ответ в комментариях — это вечер, который мог уйти на вторую версию.

Результат пет-проекта измеряется двумя вещами: пользуешься ли им ты и пользуется ли ещё хотя бы один человек. Лайки и звёзды этого не показывают. Если один человек открыл ссылку второй раз, продукт кому-то нужен. Сто комментариев под постом этого не подтверждают.

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

1. Запиши одно предложение: «[Кто] заходит, чтобы [что сделать], и уходит через [сколько]». Оно висит перед глазами весь вечер и отсекает лишнее.
2. Продумай экран в разговорном UI-инструменте (тема «Дизайн-мышление до кода»). 20 минут, не больше. Или нарисуй от руки. Или не рисуй вообще, если экран очевиден.
3. Собери в веб-агенте (тема «Вайбкодинг: сайты»): v0, bolt.new, Lovable, что открыто. Промпт — это твоё предложение из пункта 1 плюс описание экрана. Первая версия без аккаунтов и базы данных. Данные хранятся в браузере, и этого хватает, чтобы пользоваться самому.
4. Задеплой. Та же тема, раздел «Деплой». Живая ссылка в конце первого вечера — обязательное условие, а не бонус. Пока проекта нет в интернете, его нет. Бесплатные дневные лимиты v0, bolt.new и Lovable могут кончиться посреди вечера, поэтому держи второй инструмент запасным.
5. Пользуйся сам неделю. Не улучшай. Записывай, что мешает. Через неделю список правок будет настоящим, а не придуманным.
6. Покажи одному человеку, у кого такая же проблема. Смотри, как он пользуется, молчи, записывай.

Аккаунты, база, оплата, ИИ-функция внутри, бот в мессенджере — всё это есть в материале (темы «Вайбкодинг: интерфейсы», «ИИ как функция внутри прототипа», «Боты и ИИ-ассистенты как продукт»). И всё это вторая версия. Если она понадобится.

Самая частая причина, по которой первая версия не собирается за вечер, — не инструмент, а сырой запрос. «Сделай трекер привычек» — это не задача, а тема. Агент заполнит пробелы сам: добавит регистрацию, статистику и тёмную тему, а ты потом будешь всё это вырезать. Дешевле разложить запрос до того, как отправлять. Помогает та же раскладка из пяти частей, что в теме «Фундамент», раздел «Анатомия хорошего промпта»:

• Роль. Кем агент работает в этой задаче. Не «ты программист», а «ты фронтенд-разработчик, который собирает маленькие личные инструменты и не тащит лишние зависимости».
• Контекст. Что агент должен знать, чтобы не додумывать. Твоё предложение из пункта 1 маршрута, для кого приложение («для меня одного, открываю с телефона») и что бесит в чужих трекерах.
• Задача. Что именно получить на выходе, одним чётким глаголом. «Сделай одностраничное веб-приложение: я отмечаю, сделал ли сегодня зарядку, и вижу цепочку дней подряд».
• Формат ответа. Порядок действий и критерий готовности каждого шага. «Сначала экран с одной кнопкой, потом сохранение в браузере, потом цепочка дней. После каждого шага показывай результат».
• Ограничения. Чего делать нельзя. Без аккаунтов, без базы, данные в браузере, никаких напоминаний и статистики.

Собранный промпт для трекера привычек выглядит так:

Ты фронтенд-разработчик, который собирает маленькие личные инструменты без лишних зависимостей. Сделай одностраничное веб-приложение для меня одного: я захожу, отмечаю, сделал ли сегодня зарядку, и вижу цепочку дней подряд. Мобильная версия в приоритете. Без регистрации, без базы данных, данные хранятся в браузере. В чужих трекерах меня бесят напоминания, статистика и десять привычек на экране — ничего этого не нужно. Порядок: 1) экран с одной кнопкой «Сделал» на сегодня; 2) сохранение отметок в localStorage; 3) цепочка дней в виде ряда точек. После каждого шага показывай результат и жди моего ответа. Готово, когда я могу поставить отметку с телефона и увидеть её завтра

Проверь себя: если убрать любую из пяти частей, агент начнёт угадывать именно в этом месте. Нет роли — сделает как попало. Нет контекста — додумает функции. Нет задачи — сделает не то. Нет формата — принесёт всё сразу и половину сломанным. Нет ограничений — добавит регистрацию и статистику, которые потом придётся вырезать. Для простых правок вроде «поменяй цвет кнопки» раскладывать не нужно: контекст уже в проекте. Пять частей нужны там, где задача ещё размыта — то есть ровно на старте пет-проекта.

• Иконки, шрифты, компоненты — тема «Библиотеки и ресурсы для вайбкодинга»: Phosphor, shadcn/ui. Не рисуй иконки для первой версии.
• Данные — открытые API и датасеты: погода, курсы валют, базы продуктов и калорийности, справочники. Спроси агента, есть ли бесплатный источник под твою задачу, прежде чем набивать таблицу руками.
• Референсы интерфейсов — Mobbin, Refero и Nicelydone для экранов продуктов, Recent и Land-book для сайтов, Dribbble для настроения (не для копирования). Таблица галерей сайтов — в теме «Вайбкодинг: сайты», раздел «Где смотреть референсы сайтов», экраны продуктов — в теме «Вайбкодинг: интерфейсы».
• Иллюстрации и картинки — генерация по стайл-гайду (темы «Генерация изображений», «Вектор, иконки и иллюстрации»).
• Чужой открытый код — GitHub полон маленьких проектов под свободными лицензиями. Агент может взять готовый репозиторий за основу вместо сборки с нуля. Как подключить чужой репозиторий, у каждого веб-агента устроено по-своему и не везде доступно на бесплатном плане. Лицензию при этом прочитай (тема «Этика, приватность и ограничения»).

Застрять — нормально. Сломалось и непонятно почему (тема «Чтение и отладка кода агента»). Захотелось добавить ещё пять функций. Показалось, что всё получается плохо. Три правила на этот случай. Откатись к последней рабочей версии, а не чини поверх. Вернись к предложению из пункта 1 и вычеркни всё, чего в нём нет. Закрой ноутбук и вернись завтра: половина «непреодолимых» проблем решается утром за десять минут.

Надоело — тоже нормально. Пет-проект, заброшенный после первой версии, не провал. Живая ссылка и опыт остались. В портфолио такой проект можно показать как есть: что сделал, что не стал делать и почему.

Вот моя идея в одном предложении (вставить). Разложи её по четырём блокам — установка, модель, контекст, алгоритм — и собери из них промпт для веб-агента. Где информации не хватает, задай мне вопрос, а не додумывай

Вот три приложения, которыми я пользуюсь для [задача], и что меня в них бесит (вставить). Помоги сформулировать, чем мой вариант будет отличаться, — одним предложением, без слова „лучше“

Вот моя идея (вставить). Урежь её до одного экрана и одного действия. Всё, что вырезал, положи в список „версия 2“ с пометкой, что из этого реально понадобится, а что просто хочется

Найди через веб-поиск бесплатный открытый источник данных для [что нужно: калорийность продуктов, курсы валют, расписание]. Дай 2–3 варианта: прямая ссылка на данные, ссылка на лицензию, формат, лимиты. Не нашёл лицензию — так и напиши

Без поиска часть ссылок окажется устаревшей или выдуманной, а лицензия — пересказанной неточно. Нужен чат с включённым поиском.

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

Собери одностраничное приложение: [одно предложение из пункта 1]. Один экран, одно главное действие, данные хранятся в браузере, без регистрации. Мобильная версия в приоритете. Дизайн — минимальный, без декоративных градиентов, шрифт [название]