Небанальный сайт-подарок с помощью вайбкодинга

Рассказываю, как сделать сайт-пасхалку для подводки к подарку. По задумке:

1) Получатель загружает в поллароидные рамки 5 фотографий, которые соответствуют придуманным вами заданиям,

2) На сайте происходит "печать", и появляется итоговый поллароид с 5-ю ранее загруженными и одной секретной фотографией.

Секретную фотографию вы добавляете сами - это может быть намёк на местоположение подарка или приятное сообщение.

Описание моих действий для тех, кто хочет сделать такой же для своих половин или друзей:

1) Купила доступ в Lovable на месяц, потому что в бесплатной версии слишком мало кредитов для генерации. Можно купить аккаунт на 100 единиц генерации на GGsel или на Plati.Market всего за 100-300₽ - этого более, чем хватит на несколько несложных сайтов. Сайты всегда можно перенести на другой аккаунт после окончания срока подписки, поэтому не переживайте, что покупаете не на личный аккаунт.

2) Далее я включила VPN (Lovable не работает без него) и начала с базового промпта:

Cгененируй мне сайт (mobile first), который будет выглядеть как печатная машинка для поллароида. При открытии сайта из поллароида будет выезжать часть фотопленки и там будет место для загрузки первой фотографии. Должна быть заглушка с текстом, при клике на которую можно загрузить фотографию. Как только первая фотография будет загружена, то фото-карточка будет продолжать выезжать вниз и будет место для загрузки новой фотографии. Всего нужно загрузить 5 фотографий. Как только загрузят 5 фотографий, будет написано, что идет печать и будет собран коллаж из 6 фотографий. Формат - для сторис в инстаграм. 6-я фотография секретная - её я буду загружать сама через Lovable.

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

4) Я начала докручивать визуал. Какие промпты были после (вы можете игнорировать некоторые и переделать дизайн под себя).

Объедини отдельные фото-карточки в одну длинную пленку. Новые карточки должны появляться сверху (из поллароида). Старые должны уезжать вниз. Сохраняй прогресс, но в конце добавь возможность переделать коллаж. Пусть фотографии сохраняются просто для одного устройства. Замени сам поллароид на этот (отправляю фото с Pinterest) Сделай фон цветом A1221B (красный цвет) Добавь стикеры по краю камеры и пленки и пусть они чуть-чуть шевелятся (прикрепила фото с Pinterest с заранее вырезанным фоном) Поменяй шрифт на Anonimous Pro Добавь текст с заданиями для каждой из фотокарточек. 01. Загрузи нашу первую совместную фотографию 02. Загрузи твою любимую нашу фотографию 03. Загрузи фотографию, где я красивая 04. Загрузи фотографию, где ты смешной 05. Загрузи фотографию, как ты нас представляешь в будущем На последнем экране обьедини все фотографии в одну (как будто это одна фотокарточка). Стикеры должны быть по бокам. Над Всеми фотографиями должна быть печатающаеся надпись you're my Valentine <3 Добавь эту фотографию (прикрепите свою) как секретную. Она должна быть на первом месте после печати.

4) Если какие-то элементы не устраивают вас по расположению или цвету, то вы можете подвигать их вручную через режим Visual Edits:

Небанальный сайт-подарок с помощью вайбкодинга

5) Посмотреть, как сайт будет выглядеть именно на телефоне, можно в верхней панели:

6) Уберите водяной знак Lovable в настройках:

7) Опубликуйте сайт и протестируйте его на своём телефоне перед тем, как отправлять получателю

Небанальный сайт-подарок с помощью вайбкодинга

Сделала его без умения писать код, с помощью генератора Lovable