Заголовок кликбейтный да и слово "вайбкодинг" не люблю, но все так и есть. Собрал лендинг для портфолио, написав 5-6 строк на TypeScript. В остальном наблюдал, что делает AI и корректировал.
Давно хотел попробовать lovable.dev, продукт шведского early stage стартапа. Команда делает платформу, где в пару кликов можно собрать web-приложение с фронтендом, бэкендом, интеграциями с бд (по крайней мере так команда продает себя) и все задеплоить. Подумал, что хорошая возможность сделать себе сайт-визитку и посмотреть, как их сервис работает на практике.
🔘Результат - maxsh.live. Статический сайт на react с базовыми анимациями и cсылками на разные профили в соц сетях.
🔘Цена - 5$ (за домен на год), сама разработка - бесплатно (детали ниже)
🔘Время - 1 час 15 минут, четверть ушла на деплой.
📌Процесс создания
1️⃣Создал бесплатный аккаунт на lovable.dev, дал доступ к своему гитхабу. В бесплатной подписке дается всего 5 кредитов в день на их сервис. Не густо. А платить 25$ не хочется.
2️⃣По максимум запихнул в первый кредит все ожидания от сайта. Закинул картинку своего блога в тг, дал инструкций:
* I'm looking to create a portfolio website inspired by the logo of my personal blog (attached in the image)
* The site should have a visually appealing design.
* The "max.sh" panel should feature a 3D hover effect, allowing it to move interactively when hovered over.
...
3️⃣Он сверстал сразу в целом неплохой вариант. 80% работы было сделано. Остались те самые 20%, где нужно подкрутить пару деталей в каждом блоке, уточняя, как именно все расположить. К слову, в платформу встроен удобный редактор: можно выделить конкретную секцию, div, и описать что именно с ней сделать.
4️⃣Кредиты моментально закончились. Я синхронизировал промежуточный результат с гитхабом. Далее склонировал репозиторий локально. Открыл Windsurf Editor (это примерно как Cursor. Свой редактор, fork vscode-а, в который встроен UI для взаимодействия с агентом). У Windsurf-а за бесплатно можно получить адекватные лимиты на Claude 3.7. Чем я и воспользовался.
5️⃣До-вайбкодил локально вместе с Windsurf-ом. Где-то агент упорно отказывался делать простую вещь, пришлось открыть скрипт самому и по старой доброй традиции зарешать вместе с stackoverflow. Вышло 6 строк. Локально сайт был готов. Осталось задеплоить.
6️⃣Через lovable.dev доступен автодеплой с помощью Netlify (площадка для деплоя react-приложений). Но только в платной подписке. Извините, но я и сам могу так. Бесплатно.
7️⃣Создал аккаунт на Netlify. Купил через них доменное имя для сайта. Дал доступ на чтение в репозиторий проекта на гитхатбе, нажал автодеплой
8️⃣Ждем пока обновятся DNS записи для домена и подцепится сертификат. Все готово.
9️⃣Теперь можно в таком же режиме вайбкодить остальные секции страницы. Чем и займусь. Когда-нибудь.
📌Итоги и впечатления
🔘вся ценность lovable.dev в том, что с пары запросов дает визуально удовлетворительное первое впечатление от сайта. Скорее всего это достигается за счет тулзов у их агента, адаптированных под шаблоны реакта. Другой плюс, то что есть визуальный редактор, где можно выделить конкретный элемент, который хочется пофиксить. Для прикола попробовал с нуля сделать все тоже самое через windsurf редактор, но получил кривую версию, которую бы редактировал вайбкодом точно еще несколько часов.
🔘Цена в 25$ за подписку, где есть 100 кредитов на месяц, возможность создавать приватные проекты и автодеплоить - сомнительно. Платить не готов, учитывая что все равно тут и там нужно дошлифовывать.
🔘Что lovable.dev, что агенты общего назначения для кодинга типа windusrf все еще с трудом делают сложную логику. Например, я хотел на бэкраунд себе красивую матрицу из мерцающих огоньков (типа как тут). Но 4 попытки не увенчались успехом, становилось только хуже. В конечном итоге Claude 3.7 сам себя сломал. Вмешательство и фиксы нужны регулярно.
Накидайте 🔥❤️ если откликается такой тип контента в канале в стиле DIY, и рады были бы почитать в будущем еще 😃
И делитесь в комментариях своими поделками ☺️
#проекты
@max_dot_sh