Урок 5: Практика — лендинг тремя способами

Чему вы научитесь

• Создавать лендинг в Framer AI, Bolt и Lovable по единому брифу
• Оценивать результат по 5 критериям
• Формулировать рекомендацию под свой рабочий процесс

Бриф: лендинг мобильного приложения

Единый бриф для всех трёх инструментов. Используйте дословно — это даст честное сравнение.

Продукт: FocusTime — приложение для тайм-менеджмента
Аудитория: фрилансеры и удалённые сотрудники 25-40 лет
Стиль: чистый, современный, лёгкий (референс: Todoist, Forest app)

Структура лендинга:
1. Hero: заголовок "Фокус, который приносит результат",
   подзаголовок, 2 кнопки (App Store, Google Play), мокап телефона
2. Проблема: "Знакомо?" — 3 боли (отвлечения, прокрастинация,
   выгорание) с иконками
3. Решение: 3 фичи (Pomodoro-таймер, статистика фокуса,
   блокировка уведомлений) с мини-скриншотами
4. Как это работает: 3 шага (Установите → Настройте → Фокусируйтесь)
5. Отзывы: 3 цитаты пользователей с аватарами
6. Тарифы: Free / Pro $4.99/мес
7. CTA: "Начните фокусироваться сегодня" + кнопки магазинов
8. Футер: ссылки, политика конфиденциальности

Для практики используем arckep.ru — все основные модели, без VPN, оплата рублями. Вы можете использовать любые другие сервисы.

Способ 1: Framer AI

Засеките таймер.

1. Откройте framer.com (через VPN) > New Project > Start with AI
2. Вставьте бриф
3. Дождитесь генерации, оцените первый вариант
4. 2-3 итерации:
   • Замените текст-заглушки на данные из брифа
   • Добавьте анимации: fade-in при скролле на «Проблема» и «Фичи»
   • Настройте цвета: мягкий градиент в hero (мятный #10B981 > белый)
5. Опубликуйте на .framer.app
6. Остановите таймер. Запишите время.

Способ 2: Bolt.new

Засеките таймер.

1. Откройте bolt.new
2. Вставьте бриф и добавьте: «React + Tailwind, адаптивный, плавные анимации при скролле»
3. Дождитесь генерации (1-2 минуты)
4. Проверьте preview, итерируйте:
   • «Hero-секция с градиентом от мятного к белому»
   • «Hover на карточках тарифов: тень + лёгкий подъём»
   • «Мобильная версия: кнопки App Store/Google Play в колонку»
5. Опубликуйте на Bolt Cloud — получите .bolt.host URL
6. Остановите таймер. Запишите время и URL.

Способ 3: Lovable

Засеките таймер.

1. Откройте lovable.dev > New Project
2. Вставьте бриф
3. Дождитесь генерации
4. Итерируйте:
   • «Заголовок 48px, межстрочный интервал 1.2»
   • «Плавная анимация появления секций при скролле»
   • «Pro-тариф: карточка крупнее, бейдж “Популярный”»
5. Проверьте GitHub: зайдите в репозиторий, убедитесь, что код запушен
6. Остановите таймер. Запишите время.

Оценка результатов

Оцените каждый результат от 1 до 5:

Разбор типичных результатов

Framer AI обычно побеждает по дизайну. Секции выглядят отполированно, анимации добавляются в пару кликов, мобильная версия аккуратная. Но кастомизация зависит от вашего уровня владения Framer — если вы в нём новичок, правки будут медленными. И нужен VPN.

Bolt.new выигрывает по скорости и соотношению «бесплатно / что получаешь». Миллион токенов хватает надолго. Хостинг из коробки. Дизайн generic (типичный Tailwind), но код чистый и работающий. Для прототипа или MVP — оптимальный выбор.

Lovable даёт лучший баланс для продуктовых команд. React + TypeScript, строгая типизация, GitHub-синхронизация. Разработчик берёт код и продолжает. Ограничение — кредитная система: 5 бесплатных в день заставляет думать перед каждым промптом.

Итоговые рекомендации

Вы UI/UX дизайнер, работающий в Figma?
└── Framer -- логичное продолжение рабочего процесса (canvas + анимации)

Вы маркетолог, делающий лендинги?
└── Bolt.new -- бесплатно, быстро, не нужен VPN

Вы продукт-дизайнер, создающий MVP?
└── Lovable -- код в GitHub, разработчик подхватит

Вы фрилансер, делающий сайты клиентам?
└── Framer (простые) + Webflow (сложные с CMS) -- два инструмента на 90% задач

Дополнительная практика

Если хотите закрепить:

1. Личный сайт: создайте портфолио в победившем инструменте с реальными работами
2. Клиентский проект: возьмите бриф из реального проекта и создайте лендинг
3. Полный цикл: прототип в Figma Make (модуль D.7) > код в v0 > деплой на Vercel. Мост от прототипа к готовому сайту