Как создать сайт в Lovable: от брифа до публикации
Делаем первый сайт в Lovable: бриф, структура, точечные правки, проверка кнопок и мобильной версии, публикация и обновление сайта.
В Lovable можно описать сайт обычным языком, получить первую версию и постепенно уточнить её в чате. Чтобы результат можно было проверить и опубликовать, начни с небольшой страницы с понятными текстами и действиями посетителя.
В этом руководстве подготовим сайт вымышленного коворкинга «Тихий час»: первый экран, преимущества, форматы посещения, ответы на вопросы и контакты. На выходе должен быть публичный адрес с работающими переходами по странице. Регистрация и оплата для этого упражнения не нужны.
В комплекте — бриф, последовательность запросов и чеклист приёмки. Это материалы для создания сайта, не экспорт готового проекта. Инструкции сверены с документацией Lovable; генерация и публикация внутри аккаунта Lovable при подготовке статьи не выполнялись.
1. Опиши результат до генерации
Укажи, кто придёт на сайт, что он должен понять и куда нажать. Наш посетитель хочет оценить формат коворкинга. Он должен увидеть условия и перейти к ответам на вопросы. Отправка заявки остаётся за пределами учебной версии.
Вот достаточный первый бриф:
Создаём учебный сайт коворкинга «Тихий час».
Одна страница: первый экран, преимущества, форматы, FAQ, контакты.
Вымышленные данные: 12 мест, Wi-Fi, тихая зона, часы 09:00–18:00.
Учебные цены: час 300 ₽, день 1 500 ₽.
Кнопка «Посмотреть форматы» ведёт к форматам посещения.
Кнопка «Узнать условия» ведёт к FAQ.
В контактах: «Учебный проект. Бронирование недоступно».
Не придумывай адрес, телефон, отзывы или награды.
Светлый фон, один зелёный акцент, читаемые тексты.
Пока предложи структуру и тексты. Сайт ещё не создавай.Это даёт основу для приёмки. Число мест, часы и цены должны совпасть с брифом. У каждой кнопки есть конкретное действие. Текст о недоступном бронировании объясняет посетителю ограничение примера.
Для настоящего сайта замени учебные данные своими до публикации. Если нет подтверждённого отзыва, не проси придумать его для заполнения макета. Лучше убрать секцию или оставить её вне публичной версии.
2. Собери первую версию
В новом проекте Lovable передай бриф и сначала просмотри предложенную структуру. Если платформа предлагает дополнительные страницы, объясни, какие из них нужны. Для нашего упражнения всё помещается на одной странице.
Затем дай отдельное задание на реализацию:
Создай согласованную страницу по брифу.
Сохрани учебные факты и явно обозначь демонстрационный характер сайта.
CTA сделай якорями к существующим секциям.
Не добавляй backend, форму заявки, регистрацию и платежи.
После создания перечисли, какие действия посетителя реализованы.В предпросмотре проверь структуру: один главный заголовок, понятные названия секций, видимые условия. Если вместо перехода к FAQ появилась форма, это уже изменение сценария. Исправь его до обсуждения оттенков и иллюстраций.
Подход с предварительным описанием задачи и последовательными изменениями соответствует руководству Lovable по созданию продукта. Конкретный бриф здесь учебный: его можно адаптировать под портфолио, страницу услуги или небольшой каталог.
3. Исправляй по одной проблеме
Запрос «сделай красивее» оставляет слишком много вариантов. Назови элемент, проблему и желаемый результат:
На первом экране кнопка «Посмотреть форматы» теряется на фоне.
Сделай её основной: зелёный фон, контрастная надпись.
Сохрани текст, переход к форматам и остальные секции.
После правки проверь состояние фокуса при навигации клавиатурой.Для ошибки в поведении используй другую форму: «При нажатии X происходит Y, а должно Z». Например, «Кнопка в первом экране открывает пустой адрес, а должна прокручивать страницу к секции форматов». Такой запрос позволяет проверить исправление повторением того же действия.
После каждой содержательной правки повтори затронутый сценарий. Замена блока может случайно убрать его идентификатор и сломать якорь. Новый текст может перестать помещаться на мобильном экране.
4. Проверь страницу как посетитель
Открой предпросмотр на ширинах около 390 и 1280 пикселей. Текст не должен обрезаться, а вся страница — прокручиваться горизонтально. Если узкий экран показывает меню, открой и закрой его, затем проверь переход к секции.
| Проверка | Что должно получиться |
|---|---|
| «Посмотреть форматы» | Видна секция с ценами 300 ₽ и 1 500 ₽ |
| «Узнать условия» | Видна секция FAQ |
| Текст страницы | 12 мест и часы 09:00–18:00 без выдуманных обещаний |
| Контакты | Явно указано, что бронирование недоступно |
| Клавиатура | Tab перемещает видимый фокус, Enter активирует ссылку |
| Узкий экран | Заголовок, цены и кнопки полностью читаются |
Отдельно проверь заголовок вкладки, описание страницы и изображение для публикации ссылки. Для учебного сайта подойдёт title «Тихий час — учебный сайт коворкинга». Не ставь обещания о лучшем сервисе или реальном адресе, которых нет в брифе.
Если создаёшь рабочую форму, проверяй весь путь: отправка, сохранение, доставка заявки и сообщение об ошибке. Надпись «Заявка отправлена» сама по себе не подтверждает, что данные куда-то дошли. В нашем упражнении формы нет, поэтому эту проверку не подменяем имитацией успеха.
5. Опубликуй сайт
Когда проверка завершена, открой Publish в редакторе. Настрой адрес и доступ к опубликованному сайту. Для публичного учебного лендинга выбери публичный доступ и доступный адрес на lovable.app. Подключение собственного домена — отдельный шаг, для первого упражнения он не обязателен.
Проверь настройки публикации и замечания, которые показывает платформа. Затем опубликуй проект и открой полученный адрес в окне без авторизации. Убедись, что это именно живая версия, а не ссылка на редактор или временный предпросмотр.
Доступ к редактору проекта и доступ посетителей к сайту — разные настройки. Публикация не означает, что посетитель получил право редактировать проект. Условия и интерфейс описаны в документации публикации Lovable.
6. Проверь следующее обновление
Для упражнения исправь одну заметную строку, например заголовок FAQ. Сначала проверь её в предпросмотре. Затем снова открой Publish и выполни Publish changes: изменения в редакторе не становятся опубликованной версией автоматически.
После обновления открой публичный адрес заново и найди изменённую строку. Повтори два перехода по кнопкам. Сохрани адрес и чеклист рядом с брифом — это будет минимальная инструкция для следующей правки.
Если сайт нужен для реального бизнеса, следующей задачей выбери один работающий сценарий: заявку, запись или оплату. Определи, где хранится результат и как человек узнаёт об успехе или ошибке. Так развитие сайта остаётся последовательностью проверяемых улучшений.
Преврати ИИ-инструменты в рабочую систему
«Быстрый старт в AI»: практические воркшопы по AI-инструментам, прототипам и автоматизации. Собираем результат, который можно применить в работе.
21 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗