|
Professor Seleznov
|
Это продолжение статьи "Вайбкодинг как управляемая разработка".
Неделя на маленькую штуку в углу сайта
Разработку я начал с самого виджета.
Мне было интересно, сможет ли ИИ сгенерировать виджет именно так, как я его вижу?
Не абстрактный чатик, а конкретное поведение, конкретный UI, сценарии, состояния, открытие, закрытие, мобильная версия, десктопная версия, аватары.
Я подробно описывал поведение, прикладывал скриншоты, объяснял use cases. В итоге удалось добиться приемлемого результата. Виджет заработал примерно так, как я хотел. Но отдельно я упёрся в аватары.
Мне не хотелось скучных статичных картинок. Хотелось, чтобы оператор выглядел живым, т.е. немного двигался, кивал, печатал, создавал ощущение присутствия.
Для этого я снова использовал ИИ. В ChatGPT генерировал фотографии менеджеров высокого качества, а в Kling AI анимировал их, превращая в короткие движущиеся ролики.
Пример анимированного аватара
Получилось очень классно. Но была проблема. Ведь ролики оказались большими и слишком качественными для маленькой аватарки в виджете.
Мне нужны были маленькие, лёгкие, оптимизированные Webm-файлы с видео оператора. Через сторонние сервисы и локальные программы результат получался ужасный. Совсем ужасный.
После долгих манипуляций мы с ChatGPT собрали целую папку Python-скриптов и библиотек. На вход подавалось видео высокого качества, на выходе получался компактный WebM нужного размера.
Фактически с виджетом и картинками я провозился целую неделю. Именно чтобы добиться качественного UI. Потому что без виджета и нормальных аватаров всё остальное теряло смысл.
Дизайн от ИИ
Я работаю в банке, поэтому заниматься вайбкодингом мог в основном вечерами и по выходным. Но тут ещё удачно пришлись майские праздники, и я смог уделить проекту много времени.
Очень сильно увлёкся вайб-кодингом, сидел допоздна. Это тот редкий случай, когда после основной работы ты вроде бы должен отдыхать, но вместо этого снова открываешь ноутбук, потому что интересно: "А что ещё можно успеть сегодня?"
Сначала дизайн мне категорически не нравился
Как ни описывай словами, ИИ всё равно часто выдаёт что-то в духе дефолтного Laravel из коробки. Формально работает, но визуально... ну нет. Не то.
После многочисленных попыток я нашёл подход, как добиваться более качественного дизайна. Это отдельная тема, и я, наверное, напишу про неё отдельную статью.
Но общий принцип такой. Нельзя просто сказать "сделай красиво". Надо показывать примеры, прикладывать скриншоты, давать HTML-фрагменты из чужих интерфейсов, уточнять, что именно нравится: отступы, карточки, табы, поведение, плотность, акценты.
Иногда я открывал в браузере консоль, выбирал фрагмент чужого сайта, копировал HTML и отдавал Claude Code вместе со скриншотом. Не для копирования один в один, а как визуальный ориентир.
Так постепенно удалось добиться внешнего вида, который мне понравился.
И вот здесь вайбкодинг начал по-настоящему впечатлять
Кстати, в какой-то момент я понял, что во всём кабинете клиента после рефакторинга исчезла страница, где можно взять код виджета для вставки на сайт. Я просто говорю: "сделай вкладку "Код", где будет инструкция и сам код установки".
Через несколько минут вкладка появляется. В ней нормальный текст, код в блоке, который можно выделить, но нельзя случайно отредактировать, кнопка "Скопировать" в буфер обмена, всё адаптивно под мобильную версию.
И вот на таких нюансах начинаешь особенно ценить ИИ.
Потому что руками это несложно. Но таких мелочей сотни. И когда они появляются за минуты, это меняет ощущение от разработки.
На превью всё работало отлично. На боевом сайте - нет.
CORS - реальность пришла и сказала "нет"
Как и ожидалось, больше всего проблем доставил раздел управления виджетом. Там есть превью, и архитектура непростая.
Оказалось, проблема в CORS (Cross-Origin Resource Sharing).
CORS не позволял виджету полноценно запускаться и общаться с нужными сервисами на реальном сайте.
Я попросил ИИ предложить варианты решения: "как это обычно делают современные сервисы вроде Яндекс.Метрики или Google Analytics, какие есть подходы, плюсы и минусы".
ИИ предложил несколько вариантов. Я выбрал один, который показался мне архитектурно правильным.
После этого начался большой рефакторинг часа на два. Были переработаны JavaScript виджета и Go-скрипт gateway.
И после этого виджет сразу заработал в боевой версии.
Вот это важный момент. ИИ может быстро писать код, но реальность всё равно будет приходить через нюансы (CORS, TLS, домены, окружения, заголовки, кэши и прочие радости продакшна). И здесь технический опыт очень помогает понять, что происходит и куда копать.
Продолжение в статье"Документация как топливо для ИИ"
В ней рассказываю, как документация становится важным инструментом для ИИ, а я остаюсь тем самым человеком, который спрашивает: "почему ты решил хранить это именно так?"
Если тема вайбкодинга, архитектуры ИИ‑продуктов и реального опыта вам интересна, подписывайтесь на мой Telegram‑канал"Системный архитектор".
Показываю детали, ссылки на продукты, промежуточные решения и те самые вещи, которые обычно не влезают в статью.
Коллеги‑вайбкодеры, разработчики, аналитики, архитекторы и все, кто уже пробует делать продукты с ИИ, приглашаю задавать вопросы в комментариях. Мне правда интересно сравнить практики, у кого что получается, где ломается, какие подходы работают, а какие лучше больше не повторять.
-Источник
|
