Реалити-вайбкодинг, 10-й день. 300 посетителей сервиса оформления скриншотов, откаты и загадка мобильного.

Здравствуйте. Меня зовут Евгений Чужакин, я руководитель IT-компании. За свою карьеру запустил десятки программ и сервисов, как успешных, так и провальных, занимался всем: от проработки идей и архитектуры до тестирования, продаж и поддержки. Сейчас активно применяю вайбкодинг и делюсь опытом - в чём ИИ удобен и эффективен, а с чем он не справляется. Я призываю применять AI в целом, и вайбкодинг в частности. Но также рассказываю о подводных камнях (их много), и о методах решения проблем, вызванных искусственным интеллектом.

Это вторая часть истории о вайбкодинге в "режиме реального времени", где каждый может проверить результат - это не закрытый проект под NDA, а бесплатный сервис без регистрации. В Яндекс ищем "загрузить скриншот ", выбираем сервис Kili - и тестируем самостоятельно.

Первую рабочую версию (пилот) я сделал за полчаса и опубликовал 30 июля, детали в статье на Хабре:

После публикации ссылок на паре наших сайтов я ждал три дня - результат ноль. Не было видно ни в Яндекс, ни в Google. Затем при анализе с помощью ИИ выяснилась проблема: нет файла robots.txt и sitemap.xml. Заниматься самому не хотелось - я попросил ИИшку их добавить - и AI файлы добавил, сразу на сервер! Навайбкодил, значит. Результат: сейчас на первых местах в Яндексе по запросу "загрузить скриншот", а в Google пока не видно (точнее, в поисковик попала первая версия, на вторую страницу выдачи). Вывод: ИИ сам распознал ключевую проблему, мешавшую выдаче, и сам её решил. Удобно.

Скорость появления на первых местах в Яндексе и большое количество посещений сайта удивило - ранее на такую работу уходило больше времени, а более 100 SEO-посетителей в сутки мне удавалось получить лишь на международных ресурсах, а тут чисто трафик на русском языке.

Видно, что сервис заработал 30 числа, там были в основном наши тестовые заходы, а с 5 августа заработал поиск Яндекса и пошли реальные клиенты. За разработку дашборда ставлю машине пятёрку с минусом - доработки были минимальны.

Вначале я "просто" попросил ИИ сделать справку, промпт:

Получился обычный текст: заголовки и описание. Затем я попросил более развёрнуто, промпт:

Один из дополнительных промптов далее, в частности - в справке не было окна редактора выносок, и я просил его добавить:

После одного из обновлений большие вертикальные скриншоты стали открываться на телефоне в масштабе 6%. Посреди огромного тёмного экрана стояла крошечная картинка.

За подобные проблемы снижаю балл оценки ИИ. Ухудшения функционала - это очень плохо, потому что крайне сложно тестировать (и часто баг обнаруживается не в момент ухудшения, а через несколько итераций). С другой стороны, я понимаю, что в работе с программистами-людьми подобные проблемы также случаются часто, и без дополнительного тестирования не обойтись в обоих вариантах.

У выноски можно выбрать стрелочный наконечник. На конце оранжевой стрелки было заметно круглое утолщение: линия с закруглённым окончанием выступала из-под треугольника стрелки.

Я имел в виду небольшой визуальный баг в геометрии наконечника. ИИ меня понял иначе. Он решил, что я хочу полностью убрать круглый маркер выноски по умолчанию и заменить его стрелкой.

После этого сообщил:

Технически всё было сделано аккуратно. Только это было вообще не то, что я просил.

Проблема "круглых наконечников" была видна в ранних версиях на обычных стрелках и для решения мне понадобилось около пяти промптов, постоянно тестируя результат и заставляя систему все "правее" смещать острие стрелки. А после, когда система сделала инструмент "Выноска" и добавила вариант "стрелка" - то эта стрелка осталась с геометрией "как раньше". Интересно, что благодаря скриншоту ИИ сразу понял о чём идёт речь.

90% функционала сервиса посвящено оформлению скриншотов. Редактор очень мощный, с выравниваниями, с undo/redo, с масштабированием в CAD-стиле. Недавно добавили вставку дополнительных картинок и автоматическое увеличение скриншота в случае, если элементы рисуются за пределами экрана. Особенно интересный и полезный инструмент - это выноска.

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

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

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

v2.36 → v2.35 — полностью отменил изменения v2.36 и вернул к предыдущей версии. Причина - правка визуализации выносок для старых iPhone привела к тому, что ИИ отказался от последних вариантов работы HTML+SVG. Визуально правка вызвала другие баги на iPhone, поэтому я решил полностью откатить назад. Все версии ИИ автоматически сохраняет в GIT.

Как подключиться к GIT?

Спрашиваем у ИИ и следуем инструкции. Вообще всё, что связано с взаимодействием с разными сайтами сервисами - поначалу вызывает трудности, но ИИ тут отлично помогает. Если в инструкции просят нажать на некую кнопку Settings, а вы её не видите - делаете скриншот и отправляете в чат ИИ - получите уточнения в стиле "вначале нажмите на кнопку аккаунта внизу слева, затем.." или даже "на вашем скриншоте кнопка Settings третья сверху сразу после Usage".

Другой типичный возврат функционала описан выше - когда ИИ заменила в выноске наконечник "кружок" на стрелку по умолчанию, ввиду недопонимания. Но больше всего откатов в течение проекта было связано с проблемами масштабирования картинки после загрузки - этот баг при разработке периодически возвращается и его нужно править заново (часто я даю ссылку на одну из предыдущих версий и пишу, что там было хорошо - ИИ понимает и исправляет).

Многие делают статьи при помощи ИИ, и я попробовал. Статья у ИИ получается читабельной и интересной, но "галлюцинации" порой дают ложные выводы, плюс ИИ делает упор на вещах, которые являются вторичными и не говорят о том, о чём я хочу рассказать. Возможно, я пишу хуже, чем ИИ, но зато о том, что лично мне кажется наиболее интересным и новым.

Пример абзаца для статьи "от ИИ":

ИИ пишет хорошо и логично. Только не всегда верно, например фраза "что я понял за десять дней" - звучит забавно. Задолго до появления вайбкодинга я за 1-2 дня делал рабочие mvp-проекты, на доработку которых уходили годы. Хотя, конечно, те проекты были значительно урезаннее того, что сейчас делает ИИ буквально за 15 минут. Здесь нет ничего нового, описанные моменты очевидны для любого руководителя проектов - и постепенное развитие, и важность правильного описания задачи (неважно, описываем мы её для программиста-человека или для машины - описывать нужно подробно и со скриншотами).

Меня весьма удивила фраза ИИ "скриншот часто полезнее тысячи слов" - машина пыталась "попасть" в мою стилистику и попала: для своих коллег в компании я написал такой лозунг в стиле хокку:

Суть фразы в том, что долгие обсуждения багов на 90% состоят из "мусорных слов и бесполезной потери времени", а наличие скриншота и ссылки на порядок (то есть примерно в 10 раз) ускоряет процесс понимания. Сейчас некоторые наши постоянные клиенты "натренированы" и сразу ко всем своим вопросам дают скриншоты и ссылки - это очень удобно. С одной стороны, к вайбкодингу это отношение не имеет. С другой стороны - именно такой метод "сделай скриншот и дай ссылку" - очень эффективен в вайбкодинге в решении проблем.

Это, наверное, самый яркий результат от вайбкодинга. У нас всегда было много разных проектов, но так чтобы за неделю начать и довести до состояния рабочего пилота сразу 3 новых проекта - о подобном ранее и не мечтали. Тематика проектов:

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

Качественное тестирование - необходимая часть развития любого IT-проекта. Так было всегда, и в вайбкодинге тестирование автоматизировано довольно слабо. Я не говорю про авто-тесты (их в проекте оформления скриншотов ИИ добавил более 30 штук) а про тестирование нового функционала и проработку необходимых улучшений и идей. Здесь работы у тестировщика меньше не стало, а так как код и продукт выдаются с небывалой до того скоростью - именно в тестировании и обсуждении с пользователями сейчас состоит основная работа по вайбкодингу.

Можно ли автоматизировать тестирование?

Частично - да. Например, в программе счётчике посетителей офиса я предлагаю ИИ гипотезу изменения логики, после чего ИИ автоматически тестирует новую логику по прежним событиям захода в дверь и выдаёт аккуратную таблицу "где изменится результат". Это удобно. Для XML генератора я "заставил" ИИ самостоятельно тестировать результат на сервисе проверки XML. Эти примеры говорят о положительных сдвигах в тестировании, но всё же автоматизация здесь не более 20%, всё равно много, очень много надо тестировать вручную и детально со скриншотами описывать баги и пожелания к изменениям.

В трёх проектах подряд я столкнулся с одной и той же ошибкой: разработчик — специалист по вайбкодингу — принимал ответы ИИ за истину и переставал самостоятельно проверять поведение системы.
Если ИИ упирается в ошибку и не может её исправить, искусственный интеллект часто предлагает всё более сложные гипотезы. Они выглядят убедительно и «очень умно», но никак не приближают решение, зато раздувают и ухудшают архитектуру. Некоторые разработчики принимают такую "имитацию бурной деятельности" за реальный прогресс. В этих трёх случаях проекты в результате зашли в тупик.
Решение оказалось скорее организационным, чем техническим. Вместо ожидания, что ИИ "ещё немного подумает и, наконец, справится", человеку нужно самому начать разбираться в задаче и её логике. Для этого необязательно погружаться непосредственно в код.
Например, мне потребовалось разобраться во внутренней логике алгоритма сравнения людей. Сначала ИИ отвечал общими формулировками и не раскрывал параметры, влияющие на результат. После серии настойчивых запросов я получил подробные таблицы с десятком внутренних показателей детекции.
Изучив эти параметры, я выявил проблемы алгоритма, и значительно повысил качество распознавания (количество ошибок детекции снизилось в 4,5 раза). При этом самостоятельно код я не писал: лишь анализировал логику, показывал ИИ конкретные ошибки и формулировал, что именно требуется изменить.

Пусть этот опыт даст вам новые идеи по применению вайбкодинга, и оградит от лишних ожиданий, что "оно само всё сделает", и тем более от мыслей что "ИИ всегда прав".

Всем успешных и быстрых проектов!

Продолжение: