Видео этого урока скоро появится
Конспект урока доступен ниже
Знакомство с Lovable: первый лендинг за один промпт
Разберёшься, как Lovable превращает текстовое описание в работающий сайт и чем он отличается от конструкторов. Напишешь первый промпт и получишь лендинг с заголовком, преимуществами и кнопкой действия. Сохранишь проект, чтобы дорабатывать его в следующих уроках.
Конспект урока
- 1
Создаём проект одним описанием
На главном экране Lovable есть одно поле ввода: опиши в нём проект и отправь. Через минуту слева будет чат, справа живой предпросмотр готовой страницы.
- 2
Формула первого промпта
В одном сообщении назови: для кого сайт, какое действие нужно от посетителя, какие секции нужны и в каком стиле. Запрос «сделай красивый сайт» даёт безликий шаблон, конкретика даёт результат.
- 3
Chat, Agent и Visual Edits
В режиме чата можно обсуждать и планировать, ничего не меняя в проекте; обычный режим сразу правит код. Visual Edits позволяет кликнуть по элементу в предпросмотре и поменять текст или цвет без промпта.
- 4
Правки маленькими шагами
Вместо одного «переделай всё» вноси по одному изменению за сообщение. Так видно, что именно сломалось, и легко вернуться назад.
- 5
История версий вместо страха
Каждый ответ Lovable становится точкой в истории проекта, к которой можно вернуться кнопкой восстановления. Экспериментируй смело: рабочая версия никуда не денется.
- 6
Проверяем на узком экране
Переключи предпросмотр в мобильную ширину сразу, а не в конце. Больше половины посетителей придут с телефона.
Практика
Создай проект в Lovable и одним промптом собери лендинг выдуманной услуги: заголовок, три выгоды, кнопка. Затем двумя отдельными сообщениями поменяй текст кнопки и фон первого экрана.
Сделал? Отметь урок пройденным и переходи дальше