Раньше мое портфолио было в Notion. В одном из чатов с дизайнерами я увидела обсуждение портфолио, и то, что дизайнер обязательно должен иметь свой сайт. Так как у меня уже были новые кейсы, то вопроса о том, делать сайт или нет, передо мной не стояло. Я уже много раз слышала о вайбкодинге, часто юзала GPT и решила так и сделать…

Как на инструменте я остановилась на lovable: но не хотела пользоваться готовыми решениями и повторять стандартные портфолио типа: «маленький контейнер-белый фон-черный текст».

Я нарисовала решение в Figma, продумав, чтобы оно было кратким, ёмким и информативным. Добавила кейсы с последнего места работы, а остальные примеры работ убрала в горизонтальный скролл. Затем посмотрела видео про вайбкод в ловабл, нашла промпт и изменила под себя, получив что-то отдаленно похожее на мой прототип. Подгрузить скриншот из Figma не помогло — все, наоборот, поехало.

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

А вот с отступами была прямо беда — он просто брал и делал их то больше, то меньше, вне зависимости от того, что я просила их сократить. Ясно, что это из-за того, что он добавлял внутри контейнеров. Но и об этом мне удалось просто-напросто договориться. Писать расстояния в пикселях не прокатывало.

Затем начались баги с картинками — почему-то ловабл хотел постоянно их поменять и смазывал изображения. Но и с этой фигней вопрос удалось порешать просто на уровне объяснения ему, как тупушку. Потанцевать с бубном пришлось и возле видео с анимациями — иногда он просто сворачивал их и не показывал. С названиями компаний и картинкой на первой страничке надо было ой как пострадать — он не понимал, почему я размещаю это вне сетки, делал контейнеры, за которыми компании скрывались.

А вот с интерактивным курсором все получилось довольно быстро — мы сразу поняли друг друга.

Вайбкодила я две недели, продляла подписку на кредиты по несколько раз стоимостью $25. Так как я делала портфолио сразу на двух языках, то пришлось подумать о переводе кейсов (lovable справился), переводе макетов в фигме (изи с подпиской), ссылках, переключении языков и CV.

Стоит ли говорить, что когда я просила со всеми описаниями сделать адаптивы, то все летело на десктопе, приходилось откатывать и редактировать промпт.  Для возвращения назад, подскролла к блокам тоже приходилось все тщательно описывать. Почти в каждое логичное действие необходимо было ткнуть носом и описать, почему так.

НО самое интересное, что после общения с этой бездушной машиной ты начинаешь понимать логику нейросетки. Хочешь общаться с нейросеткой — думай как нейросетка.

Кстати, перед публикацией можно просканировать сайт на безопасность, баги и прочую фигню, тут же пофиксить. Мой сайт без сбора данных, так что это было относительно легко.

Сначала ловабл работал хорошо, но потом его заблокировала сама компания на территории РФ, и мне пришлось некоторое время танцевать с бубном, чтобы вернуть доступ. За неполадки мне насыпали кредитов в службе поддержки, чему я конечно рада.

После создания портфолио в lovable я была счастлива, как никогда. Ведь это мой первый полноценный навайбкоженный сайт-портфолио✨

https://danilova-design-space.lovable.app/

#продуктовыйдизайн #дизайнер #uxui #портфолио