Навайбкодил сервис за день с Claude и VS Code — вот что получилось
Решил попробовать себя в вайбкодинге без какого либо опыта в программировании (я электрик). Решил сделать сервис для поиска АЗС рядом с топливом. В итоге за день собрал карту АЗС. Писал не я, писал Claude. Я в основном говорил, что хочу, и просто апрувил предложенные изменения (в коде ничего не понимаю, даже не смотрю туда). Рассказываю, как это было и что в итоге получилось.
С чего всё началось
Проблемы с заправкой в последние дни прочувствовал каждый, у кого есть машина. В том числе и я. Приезжаешь на заправку — а там либо очередь на полчаса, либо «95-го нет, только дизель», либо вообще пусто. Едешь на следующую — та же история.
Мысль простая: эту информацию знают сами водители. Один человек заехал, увидел, что 95-й закончился — и если он отметит это на карте, следующим десяти людям не придётся туда ехать.
Идея хорошая, но садиться писать сервис с нуля неделями — не мой вариант, я в коде ни бум-бум. Решил проверить, насколько далеко можно уехать на вайбкодинге.
Инструменты: Claude + VS Code
Весь стек «разработки» — это Claude Code с подпиской за 100 $ внутри VS Code. Работает как напарник, который сам читает проект, пишет файлы, запускает команды и правит свои же ошибки. Ты формулируешь задачу человеческим языком — он предлагает решение и код.
Мой рабочий цикл выглядел так:
- Описываю фичу словами: «хочу карту, на ней метки АЗС, у каждой — статус топлива от пользователей».
- Claude раскладывает это на задачи, пишет код, объясняет, что сделал.
- Я смотрю результат в браузере, говорю, что не так.
- Он правит. Повторяем.
Ключевой момент: я вообще не писал код руками. Я принимал решения — какой должна быть логика, что важно, что выкинуть, — а рутину набора закрывал ИИ.
Что получилось за день
К вечеру был живой рабочий MVP. Под капотом, если интересно:
- Next.js 15 (сайт и API в одном проекте) + TypeScript;
- карта на Leaflet + OpenStreetMap;
- PostgreSQL + PostGIS для быстрого поиска ближайших АЗС по геолокации;
- Prisma для работы с базой;
- mobile-first вёрстка на Tailwind — сервис в первую очередь для телефона.
По функциям:
- открываешь с телефона → выбираешь топливо → видишь ближайшие АЗС, где оно есть по свежим отметкам;
- можешь сам отметить наличие/отсутствие топлива в один тап;
- статусы «есть / очередь / мало / нет» с учётом свежести отметки;
- работает как приложение (можно добавить на главный экран).
Разумеется, это только MVP. Впереди еще не один день работы, чтобы довести до идеала.
Что зашло, а что нет
Зашло:
- Скорость. То, что раньше заняло бы у меня месяцы или годы, уложилось в один день.
- Claude отлично выполняет свою задачу - писать софт теперь может любой.
- Он сам ловит и правит свои ошибки, ничего не нужно понимать, не нужно смотреть в код вообще.
Не зашло / нюансы:
- Без понимания, что ты вообще делаешь, вайбкодинг превращается в кашу. Нужна как минимум идея и примерное направление, что в итоге должно получиться.
- Иногда проще один раз чётко сформулировать мысль, чем десять раз переспрашивать. Я в итоге завёл файл с правилами проекта, которых ИИ придерживается.
Итог
Главный вывод: порог входа в создание рабочих сервисов рухнул. Не «прототип на коленке», а настоящий сервис с картой, базой и API — за один день силами одного человека, который больше говорил, чем печатал.
Прошу на оценку Бензин Рядом - обругайте меня за первый опыт в написании сайта
Буду рад фидбеку в комментариях — что добавить, что улучшить. Вопросы про сам процесс вайбкодинга тоже задавайте, отвечу.