Как создать MVP продукта с помощью нейросетей
Недавно фаундер Нейроцеха, Паша Молянов, провел обучающий веб и на своем примере показал, как сделал с нейронками небольшой сервис для проверки битых ссылок на сайтах. Сервис уже лежит в магазине расширений Google, его установили 400 раз.
Фишка в том, что руками Паша ни сделал практически ничего: весь код, все описания и т. д. делали разные нейронки. В этом гайде Паша расскажет, как он придумал расширение, как его создавал и с какими трудностями столкнулся. Его советы помогут вам запустить свой MVP и лучше понять, как разрабатывать что угодно вместе с нейронками.
Какие нейросети использовал
Я работал в 3 сервисах: ChatGPT, Claude и Cursor. При этом большую часть работы делал в ChatGPT: брейнстормил, задавал вопросы по внутрянке сервиса, генерировал графику и даже немного общался с техподдержкой Гугла.
В Claude я делал SEO-описание товара, потому что ChatGPT с этой задачей не справился.
А за всю разработку отвечал Cursor. Дальше я подробнее расскажу про него и про все нюансы.
Основатель Нейроцеха
Сам я тоже принимал участие: управлял нейронками и делал дизайн, потому что нейронки самостоятельно придумать ничего нормального не смогли.
Давайте пошагово пройдемся по всему процессу разработки.
Шаг 1: поиск и генерация идеи
Изначально у меня не было идеи, что я хочу создать. Это было просто домашнее задание в рамках обучения на одном курсе.
Я решил сделать расширение для Chrome, потому что его не трудно продвигать, да и для первого pet-проекта оно идеально подходит.
Я решил не изобретать велосипед и не придумывать ничего нового. Вместо этого решил найти то, на что уже есть спрос, где уже есть пользователи и подключенная монетизация. Логика была простая: я хотел найти рабочий сервис и сделать что-то чуточку лучше.
Сначала я искал сервисы вручную, а потом делегировал все ChatGPT. Для поиска расширений использовал простой и понятный промпт:
Я хочу разработать свое расширение для Хрома и ищу идеи. Твоя задача — найти для меня 30 идей.
В качестве идей мы будем брать уже существующие расширения — то есть те, на которые есть очевидный спрос. То есть тебе надо найти 30 уже существующих расширений, у которых есть пользователи.
Отбирай по таким критериям:
Больше 10 000 пользователей chromewebstore
Одна простая функция.
Не нужны сложные перегруженные сервисы, нужно что-то простоеЛегко в реализации. Я не очень хороший программист и что-то сложное сделать не смогу. Надо что-то, что можно наковырять за 2 недели
Разработчик — не корпорация. Нет смысла быть конкурентами Адобу или Майкрософт, ноль шансов их обойти
Целевая аудитория расширения — специалисты. То есть это инструмент, который помогает людям делать их работу, экономить время и так далее. Развлекушки, игры, обои, сервисы «для всех подряд» типа загрузки видео с Ютуба — не подходят
Есть SEO-спрос на функционал этого сервиса. Оно делает что-то такое, что люди ищут в гуглеДавай ответы в таком виде:
Название расширения
Ссылка на chromewebstore
Количество юзеров
Краткое описание, что делает
Количество отзывов
Средний рейтинг
Твой комментарий, почему ты веришь в эту идею
После первого запроса ChatGPT нашел 30 сервисов. Все эти сервисы я перебрал, посмотрел, установил и оценил монетизацию. Так и решил, что хочу сделать расширение для проверки ссылок.
Шаг 2: оценка сложности проекта
Я не разработчик и создать что-то сложное даже вместе с нейронками казалось мне чем-то невозможным. Поэтому я решил уточнить у ChatGPT, насколько сложно вообще реализовать подобный сервис или что-то похожее на него. Использовал такой промпт:
Проанализируй эти расширения для Хрома. Изучи, что они делают и оцени сложность их реализации. Исходи из того, что реализовывать будет всего 1 начинающий разработчик без опыта за 2 недели.
Поставь им от 1 до 10 баллов по сложности и срокам реализации. 1 — очень сложно. 10 — очень просто. Оценивай друг относительно друга, а не просто «в вакууме». Обоснуй свои оценки.
При оценке учитывай: есть ли на Гитхабе опенсорсные решения, которые можно полностью или частично взять, насколько это легко и быстро сделать вручную, насколько это посильная задача для кодинга с помощью GPT
[ссылки]
Мою идею с битыми ссылками ChatGPT оценил как несложный проект. Правда, на Гитхабе похожих проектов не нашел, хотя ручным поиском подобный сервис я все-таки обнаружил.
Шаг 3: маркетинговая подготовка и SEO
Перед самой разработкой я решил заняться продвижением сервиса. Ннакодить сервис легко, а вот найти юзеров — очень сложно. В моем случае для продвижения нужно было SEO-описание на зарубежный рынок, т. к. сервис предназначен для зарубежных пользователей.
Я пошел таким путем: через Semrush собрал ключевые запросы, по которым могут искать сервисы проверки битых ссылок. Затем отправил собранные ключи в Claude и использовал такой промпт:
Действуй как опытный сео-копирайтер, который пишет тексты на английском языке для продвижения на рынке США и Западной Европы.Твои тексты помогают страницам выходить в топ Гугла.
Сейчас твоя задача — написать текст для расширения для Хрома, которое проверяет все ссылки на открытой странице, находит и подсвечивает битые ссылки.
Аудитория сервиса — сеошники, вебразработчики, маркетологи и другие спецы, которым надо быстро проверить сайт и найти на нем нерабочие ссылки.
Расширение называется Broken Link Checker. Это же основной поисковый ключ.
Начнем с дескрипшена.
Вот задача:
Максимум 132 символа.
Проверь этот момент обязательно, посчитать количество символов сгенерированного описания. Оно должно быть максимально длинным, но ни в коем случае не превышать 132 символа
В кратком описании 1 раз должен быть использован ключ из названия Broken Link Checker
Желательно, основной ключ не должен быть первым словом, перед ним должно быть что-нибудь еще, но не другой ключ. 1-2 слова максимум.
В кратком описании должны присутствовать другие среднечастотные ключевые слова (всего вместе с названием — 3-6 ключей).
Одно отдельно взятое слово (самое важное слово из названия) не должно повторяться более 3 раз. Другие слова могут повторяться не более 2 раз.
Список всех ключей в приложенной таблицеНе используй слова best , recommended , premium, free, #1 и другие подобные. Такое не пропустит модерация.
Broad — это основные ключи. Related — вспомогательные
3 хороших примера описаний, можешь на них ориентироваться:
Let youtube repeat replay song in one click! Loop youtube video, listen song on repeat, and enjoy infinite loop for hours.
Youtube to Text: transcribe youtube video to text, generate accurate youtube transcript. Simplify convert youtube video to text.
Use Temp Phone Number app to get a disposable phone number to receive sms online for free verifications and avoid spam calls.
Дополнительно я показал нейронке примеры хороших описаний, чтобы та могла на них ориентироваться.
ChatGPT с задачей, кстати, не справился.
А Claude набросал много вариантов, но все они мне не очень нравились.
Я взял самый оптимальный вариант и попросил его доработать простым промптом:
Давай попробуем приблизиться к 132 символам. Сделай описания от 126 до 132 символов
| Совет! Когда работаете в нейросетях, используйте несколько чатов. Например, получили ответ в одном чате, скопируйте его в другой со словами «Я сделал Х, проверь, насколько хорошо получилось, сравни с Y и т. д.» Нейронка перепроверит себя на свежую голову и дополнительно улучшит ответ, если будет необходимость. |
По такому же принципу я сделал SEO-описание сервиса. Отправил промпт → получил результат → обычными просьбами отредактировал текст. И так до момента, пока мне все не понравилось.
Затем я открыл новый чат, добавил туда сгенерированный текст и такой промпт:
Сделай отчет по ключам, сколько раз какой ключ употребили в прямом вхождении, или в измененном/частичном
Шаг 4: перевод контента и создание логотипа
В моих планах сделать так, чтобы сервисом пользовались люди из разных стран. Для этого я решил перевести его на 50 языков вроде испанского, японского, итальянского, русского и т. д.
Переводы делал в ChatGPT, потому что его результаты мне понравились больше.
Здесь была задача придумать название, по которому подобные сервисы могут гуглить жители других стран. Для этого я закидывал в ChatGPT описание сервиса с таким промптом:
Мой сервис называется Broken Link Checker. Как его могут гуглить на португальском? Мне важны именно слова на этом языке, не английском. Напиши варианты и переводы на русский.
Также проверь, какие фразы реально чаще всего показываются среди названий сервисов для проверки битых ссылок и хром-расширений. И насколько эти расширения популярны, сколько у них юзеров и отзывов? На основе этого вымери 1–2 варианта лидеров.
Так я придумал название на разных языках. А затем перевел описание инструмента на разные языки.
Дальше я сгенерировал логотип. Использовал максимально простой промпт «Сделай иконку на прозрачном фоне». С первого раза получилось не очень.
Я попросил нейронку постараться получше, та переделала и вторая иконка мне понравилась.
Шаг 5: процесс вайб-кодинга
Следующим этапом был интерфейс. С ним я решил поработать в Cursor. Я надеялся сгенерировать что-то удобное промптом вроде «Сделай нормальный и удобный интерфейс, но Cursor делал все максимально неудобно и не юзабельно.
Поэтому я пошел другим путем — нарисовал вручную макет в Figma и выгрузил его в HTML.
Изначально пытался сделать все в ChatGPT, но тот каждый раз выдавал неудобный дизайн. Где-то были кривые кнопки, где-то предложения нейронки были явно неудачными. Поэтому я отрисовал все сам примерно за час. В результате получилось такое:
На работу ушло минут 40, иконки использовал бесплатные. Готовый дизайн из Фигмы я выгрузил в HTML-формате и пошел кодить в Cursor.
Изначально я пытался сделать все расширение за раз. Для этого описывал Cursor задачу, мол, хочу собрать расширение для Chrome для проверки битых ссылок.
В итоге ни разу из всех попыток у меня не получилось сделать ничего рабочего. Поэтому я решил двигаться итерациями.
Для этого в Google Docs максимально подробно описал, что это за расширение, что оно делает, что я хочу получить от сервиса. Описал пользовательский путь, как человек взаимодействует с сервисом, что происходит при нажатии на кнопку и т. д.
Этот большой текст я добавил в Cursor вместе с HTML-файлом дизайна. Непосредственно в чате написал такой запрос:
Твоя задача — сделать готовое к публикации расширение, я уже нарисовал дизайн в Фигме и выгрузил его в HTML. Теперь надо сделать так, чтобы все работало. Прикладываю подробное описание расширения и скриншот интерфейса.
И… Снова ничего не вышло. Cursor просто стал забрасывать меня вопросами и в итоге делать абсолютно нерабочий сервис.
Поэтому я начал двигаться маленькими шагами и за 1 запрос делать какую-то одну маленькую понятную функцию. Когда функция начинала работать, я делал бэкап и переходил к следующей функции.
| Важно! Всегда сохраняйте промежуточные версии. Когда вы разрабатываете что-то с нейронками, те в любой момент могут затупить и испортить все, что вы сделали до этого.Чтобы ничего не потерять и не начинать разработку сначала, возьмите за правило: получили рабочий код — сохранили в отдельной папке на ПК. Если что-то затем сломалось — в текущий или новый чат прислали резервную копию и продолжили работать. |
В общем, за кучу итераций сделал расширение, которое просто запускается и ничего не делает, но уже выглядит как надо.
Шаг 6: очень много правок и тестов
Затем я перешел к основной части — непосредственно функции сервиса для проверки ссылок.
Задачу я описал примерно так:
Нужно, чтобы при открытии инструмент сканировал все ссылки на странице и выводил их список, проверял на ошибки.
Здесь я тоже объяснял, что это за расширение, что оно должно делать и т. д. И затем маленькими итерациями улучшал код.
При этом я не использовал промпты по типу «Твоя роль — это супервеб-разработчик, пожалуйста, там сделай так-то». Я общался с Cursor как с разработчиком и писал обычным языком: «Вот еще штука, если я закрываю расширение, то у меня результаты сбрасываются, при повторном открытии начинается заново. Давай сохранять промежуточные результаты».
Cursor хорошо понимает такие просьбы и действительно выполняет их. В общем, как реальный сотрудник.
При этом я не всегда объяснял задачу текстом. Иногда просто закидывал скриншот и просил что-то исправить, добавить и т. д.
Дальше я просто много тестировал сервис, искал различные баги и правил их.
| Может быть такое, что какие-то баги никак не получится исправить. В этом случае рекомендую идти в ChatGPT примерно с таким запросом: «Я делаю приложение Х, у меня возникает проблема Y. Подумай, в чем может быть проблема и как ее можно решить». С включенным веб-поиском ChatGPT начнет гуглить и искать, как подобную проблему решали другие люди. Когда получите ответ ChatGPT, можете отправить его в Cursor с таким промптом: «Независимый эксперт предложил такое решение пробелмы [советы ChatGPT]». Высокая вероятность, что после этого все заработает. Но можно использовать и другой вариант — просить Cursor добавить в приложение логи, а потом отправлять их ему. Так сервис быстрее найдет, на каком этапе возникает ошибка. |
| Важно! У нейросетей есть понятие — контекстное окно. Это объем информации, который они могут помнить в рамках одного чата. Когда контекстное окно перепоняется, нейросеть глупеет, путается в информации и качество ответов сильно падает. Поэтому периодически создавайте новые чаты. Просто рассказывайте, на чем вы остановились и что нужно делать дальше. Cursor, кстати, сам создает новый чат, когда контекстное окно переполняется. И присылает в новый чат саммари предыдущего. |
Шаг 7: публикация и модерация
Когда я написал расширение и все стабильно работало, отправил его на публикацию в Google Chrome. Там пришлось проходить модерацию и отвечать на много вопросов. Чтобы не тратить время, я делал скриншот страницы → показывал его ChatGPT и спрашивал, что там нужно отвечать. Копировал ответы ChatGPT и переносил их в магазин-расширений.
Шаг 8: реклама
Последний этап — сделать рекламные объявления и привлекать трафик. Здесь я использовал такой промпт:
Сколько времени и денег ушло на разработку
На разработку ушло около 9000 рублей: примерно 7000 рублей на кредиты в Cursor (я работал в режиме Max, где за каждый ответ нейросети нужно платить) и 2000 рублей на подписку Cursor (без этой подписки перейти на режим Max было нельзя). Подписка на ChatGPT у меня была, но если считать и ее — это еще 1600 рублей. Плюс подписка на Claude — тоже 1600 рублей.
На рекламу заложил 20 000 рублей, но это моя личная инициатива. В траты на разработку это можно не записывать:)
На разработку ушло примерно 8 часов, а вообще на всю работу — около 25–30 часов. И если считать мое потраченное время + 9000 рублей на разработку, то, конечно, дешевле было бы дать задание разработчику и получить готовый продукт. Но мне было интересно разработать что-то своими руками с полного нуля и протестить возможности нейронок.
Читайте также:
