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

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

• Проводить сквозную сборку одного продукта в Framer AI, Bolt.new и Lovable с опорой на единый файл DESIGN.md
• Применять трёхфазное дробление промптов в Bolt.new и пакетные запросы с GitHub-синхронизацией в Lovable на реальном задании
• Сравнивать поведение визуального холста и кодовых ИИ-агентов при вёрстке адаптивных секций и интерактивных виджетов
• Формировать собственный боевой стек для клиентских и продуктовых задач

Единый бриф и DESIGN.md: сервис глубокой фокусировки FocusTime

Чтобы на собственном опыте увидеть разницу между визуальным конструктором (Framer AI) и платформами вайб-кодинга (Bolt.new и Lovable), мы соберём во всех трёх инструментах не просто статичный текст, а продуктовый лендинг со встроенным интерактивным мини-виджетом таймера фокусировки и формой раннего доступа.

Перед открытием любого из трёх сервисов скопируйте эту спецификацию DESIGN.md — она послужит единым источником правды, чтобы ни один из генераторов не скатился в дефолтный фиолетовый шаблон:

# DESIGN.md — FocusTime Visual System
## 1. Color Tokens
- background.canvas: #F7F6F2 (тёплый каменный светлый фон)
- surface.card: #FFFFFF (чистый белый для карточек)
- surface.elevated: #EFECE6 (фон вторичных плашек и переключателей)
- border.subtle: #E2DDD5 (строгая рамка 1px для всех карточек)
- text.primary: #18181B (глубокий графит)
- text.muted: #71717A (спокойный серый для подписей)
- action.primary: #0F766E (глубокий хвойно-бирюзовый для главных кнопок и активного таймера)
- action.accent: #D97706 (тёплый янтарный для бейджей и индикатора серии дней)

## 2. Typography & Hierarchy
- Headings: Plus Jakarta Sans / Inter, weight 700, плотный трекинг -0.02em
- Body: Inter, weight 400/500, комфортная ширина строки 60–65ch
- Numbers / Timer: JetBrains Mono (моноширинный шрифт для цифр таймера и цен)

## 3. Spacing, Radius & Elevation
- Шаг сетки отступов: 8px / 16px / 24px / 48px / 80px
- Радиус скругления: карточки — 12px, кнопки и поля ввода — 8px
- Do / Don't: НЕ использовать неоновые градиенты, фиолетовые оттенки и размытые тени shadow-2xl. Все карточки отделяются от фона только рамкой 1px solid #E2DDD5.

Обязательная структура страницы FocusTime

1. Hero-секция: заголовок «Глубокий фокус без цифрового шума», подзаголовок для фрилансеров и инженеров, форма записи в ранний доступ по email и живой демо-виджет Pomodoro-таймера (25:00) с кнопками «Старт / Пауза / Сброс» и переключением режима «Фокус 25 мин / Перерыв 5 мин».
2. Секция боли («Почему день уходит впустую»): 3 карточки в ряд (Контекстные переключения, Бесконечные уведомления, Выгорание к вечеру).
3. Секция возможностей: 3 блока (Умная блокировка мессенджеров, Аналитика глубоких часов, Командные сессии тишины).
4. Тарифы: переключатель «Месяц / Год (-20%)» и 2 карточки — Solo ($0) и Pro ($6/мес) с бейджем цвета action.accent.
5. Футер: ссылки и политика конфиденциальности.

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

Лабораторный прогон 1: Framer AI — скорость визуального холста и анимаций

Во Framer AI мы проверяем, насколько быстро можно получить отполированный адаптивный лендинг с плавными анимациями появления.

1. Запустите таймер и откройте framer.com (с VPN): создайте проект через Start with AI, передав в промпт структуру из 5 секций и цвета из нашего DESIGN.md (#F7F6F2 фон, #0F766E основной акцент, #E2DDD5 тонкие рамки).
2. Привяжите переменные в Assets → Styles: сразу после генерации откройте панель стилей и зафиксируйте точные HEX-коды и моноширинный шрифт для цифр.
3. Добавьте тактильную физику: настройте Appear (Fade In + Slide Up) на карточках болей и возможностей и добавьте состояние Hover (подъём на 2px вверх) для карточек тарифов.
4. Проверьте мобильный брейкпоинт (390px) и нажмите Publish: откройте опубликованную ссылку *.framer.app, проверьте отступы на телефоне и остановите таймер.

На что обратить внимание во Framer: визуальная иерархия, шрифты и пружинные анимации настраиваются быстрее и точнее всего, но сам виджет таймера в Hero-секции на стандартном холсте остаётся декоративным макетом (чтобы он реально отсчитывал секунды, во Framer пришлось бы писать кастомный Code Component).

Лабораторный прогон 2: Bolt.new — трёхфазная сборка с живым таймером

В Bolt.new (bolt.new, работает без VPN) наша задача — применить правило трёх фаз из урока 3, чтобы получить не просто вёрстку, а по-настоящему тикающий таймер и пересчёт тарифов, потратив минимум токенов из дневного лимита 300K.

1. Фаза 1 (DESIGN.md + Статичный каркас): запустите таймер, вставьте блок DESIGN.md и попросите: «Пропиши эти токены в конфигурацию стилей как единственный источник правды. Собери все 5 секций лендинга FocusTime строго по этим цветам, рамкам 1px (#E2DDD5) и шрифтам. Пока без сложной логики».

2. Фаза 2 (Локальный стейт виджетов): когда вёрстка встала без ошибок, вторым промптом оживите интерактивные узлы: «1) Сделай Pomodoro-таймер в Hero полностью рабочим: обратный отсчёт по секундам (моноширинным шрифтом JetBrains Mono), кнопки Старт/Пауза/Сброс и переключение Фокус (25:00) / Перерыв (05:00). 2) Сделай рабочим переключатель тарифов Месяц ($6) / Год ($4.80)».

3. Фаза 3 (Валидация формы и публикация в Bolt Cloud): третьим промптом добавьте сохранение email из формы раннего доступа с проверкой корректности адреса и показом состояния успеха, после чего нажмите Publish / Deploy на домен *.bolt.host. Запишите время и расход токенов.

Лабораторный прогон 3: Lovable — пакетные итерации, Supabase и GitHub

В Lovable (lovable.dev, работает без VPN) на бесплатном тарифе у нас есть ровно 5 кредитов в день. Поэтому здесь мы тренируем дисциплину пакетных промптов, двустороннюю синхронизацию с GitHub и подключение реальной таблицы заявок в Supabase.

1. Кредит 1 (DESIGN.md + Полный каркас с живым таймером): создайте проект, передайте DESIGN.md вместе со структурой секций и сразу укажите требования к локальному стейту таймера (25:00 / 05:00) и переключателю тарифов.

2. Кредит 2 (Пакетная полировка UI и мобильной адаптивности): вместо того чтобы тратить по одному кредиту на каждую мелочь, объедините все визуальные правки в один нумерованный список: «1) Проверь мобильную вёрстку на 375px: кнопки в Hero должны вставать в колонку на всю ширину. 2) Добавь бейдж “Выбор фрилансеров” цвета #D97706 на карточку Pro. 3) Добавь плавное появление секций при скролле».

3. Кредит 3 (Подключение GitHub и таблицы waitlist в Supabase с RLS): подключите ваш GitHub-репозиторий и проект Supabase, после чего отправьте промпт: «Создай в Supabase таблицу waitlist (id, email, selected_plan, created_at). Настрой RLS-политику: разреши анонимный INSERT для отправки формы с лендинга, но запрети публичный SELECT, чтобы никто снаружи не мог выгрузить базу чужих email-адресов».

Откройте ваш репозиторий на GitHub, убедитесь, что все коммиты и миграции аккуратно сохранены, проверьте отправку тестового email в таблицу Supabase и остановите таймер.

Итоговая матрица вашей лабораторной работы

Оцените все три опубликованных проекта по 5-балльной шкале:

Главное из урока