Если на вашем сайте есть форма обратной связи, поле «введите имя и e-mail», корзина или регистрация — вы автоматически становитесь оператором персональных данных. Хорошая новость: процедура бесплатная, делается онлайн и занимает один вечер.
Если юридическая обвязка дается тяжело — начните с постов Саши. Он прошел весь путь и поделился всеми тонкостями.
Разбираемся, из чего состоит сайт и как разные части работают вместе
Архитектура веб-сайта
Промпт отправляется в Lovable — и он создаёт обе части сразу
Всё, что вы видите на экране и с чем взаимодействуете: кнопки, формы, картинки, анимации, цвета. Когда вы открываете lovable.dev и видите интерфейс — это фронт-энд.
Фронт-энд отвечает на вопрос: «Как это выглядит и как с этим работать?»
HTML · CSS · JavaScript
Интерфейс Lovable — то, что видит пользователь
То, что происходит «под капотом» (помните этот термин из глоссария?). Где хранятся пользователи, как обрабатываются оплаты, куда уходит письмо после нажатия «Отправить», как сайт понимает, какой именно товар вы положили в корзину.
Бэк-энд отвечает на вопрос: «Как это работает внутри и где живут данные?»
В Lovable чаще всего — это встроенный Supabase (база данных и логика «под капотом»). Хотите форму сбора заявок? Подключается буквально в один клик: Lovable сам создаёт таблицу, привязывает к ней кнопку и начинает складывать туда данные. Для прототипа или зарубежного проекта — отлично.
Skills и логика — «кухня» вашего проекта
Облачный Supabase хранит данные на серверах за пределами РФ. А по закону персональные данные российских пользователей (имя, телефон, email) нельзя хранить на не-российских серверах. То есть собрать красивую страничку вы можете, но подключать облачный Supabase для сбора данных россиян напрямую — нельзя, это нарушение закона о персональных данных.
Что делать? Не собирайте персональные данные прямо на лендинге. Рабочий вариант: на странице стоит кнопка «Купить» / «Оставить заявку», а по клику человек переходит в чат-бота в Telegram или MAX — и уже там идёт диалог и оплата. Лендинг остаётся «витриной» без хранения данных, а вся персоналка живёт в мессенджере. Для большинства небольших проектов этого достаточно.
(Для серьёзного сервиса с большим потоком данных стоит отдельно свериться с юристом и выбрать российский хостинг для бэка — но это уже за рамками вайбкодинга.)
Вёрстка — это превращение дизайна в реальные экраны, которые открываются в браузере или приложении. Дизайнер нарисовал в Figma макет — это ещё не сайт, это картинка. Чтобы по картинке можно было кликать и нажимать на кнопки, её нужно сверстать.
Вёрстка — это «как» фронт-энда: где что расположено и как сайт ведёт себя на разных экранах (телефон, планшет, ноутбук). Один и тот же сайт на смартфоне схлопывается в одну колонку, на ноутбуке разворачивается в три — за это отвечает вёрстка.
Адаптив · КроссбраузерностьЧтобы точнее формулировать промпты. «Сделай красивую кнопку» — это фронт. «Сохрани заявку в базу и пришли уведомление в Telegram» — это бэк. «Сделай так, чтобы на телефоне всё было в одну колонку» — это вёрстка.
Когда вы понимаете, к какой части относится задача, ИИ понимает вас быстрее и тратит меньше токенов на догадки.
Прочитайте фразу и выберите один из трёх вариантов
Вопрос 1 из 7
7 / 7
Разбираемся, что считается персональными данными, зачем нужна политика и как не получить штраф.
Любая информация, по которой можно понять, что речь идёт о конкретном человеке.
Имя, фамилия, телефон, e-mail, адрес, дата рождения, фото лица, номер карты, IP-адрес — всё это персданные.
Оператор — это тот, кто собирает и хранит чужие персональные данные.
Если на вашем Lovable-сайте есть хоть одна форма, где человек оставляет о себе что угодно — вы оператор.
Это документ на вашем сайте, в котором вы описываете:
Это не формальность — без политики платёжные сервисы могут отказать в подключении, а Роскомнадзор — выписать штраф.
Размещается отдельной страницей. Ссылка на неё ставится в футере сайта и рядом с каждой формой.
Готовый промпт, который можно скормить ИИ (ChatGPT, Claude), чтобы получить заготовку политики под ваш проект.
Ты — юрист по российскому праву, специализируешься на 152-ФЗ «О персональных данных». Помоги мне составить политику обработки персональных данных для моего сайта.
Я дам тебе образец чужой политики (для структуры) и свои данные. Адаптируй образец под меня: подставь мои реквизиты, убери лишнее, оставь только те цели и виды данных, которые реально про мой случай.
Мои данные:
— Кто оператор: [ИП / ООО, ФИО или название]
— ИНН: [номер]
— ОГРН / ОГРНИП: [номер]
— Контакт для обращений: [рабочая почта — НЕ личная]
— Что я собираю на сайте: [например: имя, email, телефон через форму заявки; данные для оплаты через платёжный сервис]
— Зачем собираю: [например: связаться с клиентом, оказать услугу, прислать материалы]
— Использую ли аналитику: [например: Яндекс.Метрика — да/нет]
— Передаю ли данные третьим лицам: [например: платёжному сервису, сервису рассылок — да/нет, кому]
Важные требования:
Не указывай мой домашний адрес. Для идентификации достаточно ИНН/ОГРН и рабочей почты.
Не выдумывай цели обработки и виды данных, которых нет в моём списке выше. Не должно быть избыточных формулировок.
Согласие — это подтверждение от пользователя, что он разрешает вам собирать и обрабатывать его данные.
На практике выглядит как чекбокс под формой. Без этой галочки кнопка «Отправить» или «Оплатить» не должна работать.
Там, где происходит сбор данных.
На любой странице, где есть форма, должны быть две вещи:
Вы собрали прототип в Lovable, повесили кнопку «Оплатить» — и кажется, что дело за малым. Не торопитесь: между кнопкой и первым платежом есть пункты, которые должны быть на месте. Хорошая новость — половина из них отпадает, если выбрать правильный путь.
Текстовый мини-урок — чек-лист из 12 пунктов с короткими пояснениями. Подключайте платёжный сервис (подробнее — в Уроке 4) после того, как пройдётесь по списку.
Всё, что описано в этом уроке — про РФ-проект. Если у вас международный проект и вы принимаете оплату через Stripe, фискализация и эти документы вам не нужны — см. Урок 4.
Ваш сервис (Prodamus, Robokassa и др.) сам отправляет чеки клиентам. Пункты 6 (ОФД) и 7 (КЭП) не нужны — сервис закрывает фискализацию. Для большинства новичков это правильный выбор: меньше бюрократии, быстрее старт.
Вы подключаете эквайринг напрямую через банк — тогда нужна своя онлайн-касса, и пункты 6 (ОФД) и 7 (КЭП) обязательны. Путь сложнее, но даёт полный контроль.
ИП — быстро открывается, простая отчётность. ООО — если несколько основателей или планируете инвестиции. Принимать оплату на личную карту по закону нельзя — нужна официальная форма.
Обязательно
Для курсов, консультаций и цифровых товаров. Чек формируется в «Мой налог», касса не нужна — пункты 4, 5, 6 отпадают. Минус: не все сервисы работают с самозанятыми.
Для самозанятых
Не обычный банковский, а счёт для бизнеса. Открывается в любом банке, обычно бесплатно. Для самозанятых необязателен — деньги могут приходить на личную карту.
Обязательно
Посредник между сайтом и картой клиента. Все варианты — в Уроке 4. На этапе прототипа в Lovable достаточно платёжной ссылки.
Обязательно
По 54-ФЗ при каждой оплате клиенту должен приходить чек. Если сервис отправляет сам (Prodamus, Robokassa) — ничего дополнительно делать не нужно. Если нет — подключайте кассу.
Обязательно
Посредник между кассой и налоговой. Если сервис берёт чеки на себя — ОФД уже подключён. Если своя касса — подключаете отдельно (ОФД.ру, Платформа, Такском).
Только своя касса
Квалифицированная электронная подпись — нужна для регистрации кассы в ФНС. Для ИП — бесплатно через ФНС. Если встроенные чеки — не нужен.
Только своя касса
Обязательна по 152-ФЗ. Размещается там, где собираются данные. Если сбор через чат-бота — в боте запрашивайте согласие и давайте ссылку на политику (см. Урок 3).
ОбязательноЧто продаёте, за сколько, права и обязанности. Для онлайн-продаж — публичная оферта на сайте, принимаемая фактом оплаты. Без неё юридически вы ничего не продали.
Обязательно
Чекбокс со ссылкой на политику. На лендинге — под формой, в боте — в начале диалога. Подробнее — в Уроке 3.
ОбязательноПосле оплаты — «Спасибо, оплата прошла» + что дальше. При ошибке — «Что-то пошло не так» + кнопка «Попробовать ещё раз». У Prodamus, ЮKassa, Robokassa эти страницы уже встроены — настройте текст в личном кабинете.
Обязательно
Пропишите заранее: в каких случаях возвращаете деньги, в какие сроки, куда писать. Это должно быть и в оферте, и на сайте — в FAQ или разделе «Оплата и возвраты». Сервис делает возврат технически, но инициировать — ваша задача.
Обязательно
Если все пункты на месте — подключайте платёжный сервис (см. Урок 4) и вешайте ссылку на кнопку. Выглядит как много бюрократии, но для самозанятых и тех, кто выбрал сервис со встроенными чеками, реально нужных пунктов — 6–7, а не 12.
Разбираемся, как приложения общаются друг с другом и зачем нужны ключи доступа
Определение
API (Application Programming Interface) — это интерфейс, через который две программы общаются между собой. Одна программа отправляет запрос, другая его выполняет и возвращает результат. API — это способ не изобретать велосипед. Не нужно учить ИИ распознавать речь или отправлять письма — часто есть готовый сервис или коннектор, вы подключаете его по API и пользуетесь чужой мощностью за пару строк. Так вы можете собрать сложный продукт из готовых кубиков.
Две программы общаются через API
Так выглядит панель Connectors в Lovable — здесь подключаются сервисы по API
Доступ
API key — это секретный ключ, по которому сервис понимает: это именно вы, у вас есть право мной пользоваться. Своего рода пароль для приложения. Без ключа сервис вас не пустит — даже если вы знаете правильный API.
Когда вы подключаете в Lovable какой-нибудь сервис — например, отправку писем через SendPulse, или ChatGPT-функцию, или Telegram-бота — Lovable просит «введите API key». Вы идёте в личный кабинет того сервиса, генерируете там ключ (обычно это длинная строка букв и цифр), копируете и вставляете в Lovable. Всё, теперь Lovable «знает», что у него есть пропуск к этому сервису.
Пример: подключённый коннектор Fireflies с типом «API Key»
Пошагово
01
Зайдите в сервис и найдите раздел API
02
Нажмите «Создать ключ» — получите строку
03
Скопируйте и вставьте в поле API key
Важно
API key — это пароль.
Укажите Project Name для вашего коннектора — так вы будете его находить в списке
Сравнение
API
Адрес сервиса и правила общения
API key
Доказательство, что вам можно
Справочник
Генерация текста, диалоги, суммаризация, помощь в написании контента
Платный
Создание ботов, уведомления, чат-боты для клиентов
Бесплатный
Приём платежей, оформление подписок, выставление счетов
Платный
Отправка email-рассылок, писем подтверждения, уведомлений
Платный
Работа с таблицами, хранение данных, автоматизация отчётов
БесплатныйКогда вы пишете промпт ИИ, вы можете дать ему примеры — а можете не давать. От этого зависит, насколько точно ИИ поймёт, что вы от него хотите. Чем точнее поймёт — тем меньше токенов сожжёт и тем быстрее вы получите нужный результат. Три формата ниже — это три уровня «подсказок» для ИИ.
Вы пишете задачу одной фразой и ждёте результат. Никаких образцов, никаких «вот так делай, а вот так нет».
ИИ сам решает, что считать удачным заголовком. Иногда выдаёт хорошо, иногда — мимо.
Вы даёте ИИ один образец того, что хотите получить, и просите сделать так же.
ИИ видит структуру и тональность и подгоняет ответ под образец.
Вы даёте 2–5 примеров — ИИ видит паттерн и воспроизводит его.
Главный принцип: чем больше примеров вы дали — тем меньше у ИИ свободы интерпретации.
