Урок 1: Framer AI — сайт за 10 минут

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

• Собирать и публиковать сайт в Framer AI от структурного промпта до живого домена
• Управлять свободным холстом (freeform canvas), глобальными стилями и брейкпоинтами, чтобы ИИ-генерация выглядела как авторский проект, а не шаблон
• Настраивать три уровня анимаций (Appear, Scroll, Hover) без единой строчки кода
• Работать с базовой CMS, On-Page Editing и проверять адаптивность на мобильных ширинах

Почему дизайнеры выбирают Framer для маркетинговых сайтов

В плейбуках 2026 года по выбору инструментов (brainy.ink/paper/vibe-coding-for-designers) действует жёсткое правило: выбирайте инструмент по слою задачи, а не по шуму в соцсетях. Когда ваша цель — имиджевый лендинг, запуск продукта или портфолио с выразительной типографикой и микровзаимодействиями, вайб-кодинг в чате проигрывает визуальному холсту.

Framer — единственный конструктор, который соединяет свободу графического редактора в духе Figma с мгновенной публикацией в продакшен. Вы двигаете слои, настраиваете сетки (Stack и Grid) и кривые анимации руками, а по нажатию кнопки Publish получаете оптимизированный сайт с высоким баллом скорости загрузки.

Инстроенные AI-инструменты в Framer решают три задачи:

• Start with AI / Wireframer: собирает многосекционный каркас страницы с адаптивными брейкпоинтами за 40 секунд;
• Redesign with AI и AI Style: перекрашивает и перестраивает отдельные блоки под заданную палитру и шрифтовую пару, не ломая ваш контент;
• AI Translate и Text Rewrite: локализует страницу на другие языки и адаптирует плотность копирайтинга прямо поверх макета.

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

Пошаговый воркфлоу: от промпта и дизайн-токенов до публикации

Главная ошибка новичков во Framer AI — написать в стартовом окне «Сделай красивый сайт портфолио» и пытаться двигать кривые блоки мышкой. Как и в кодовых ИИ-агентах (duply.ai/blog/give-your-ai-agent-a-design-system), Framer даёт на порядок более чистый результат, если в первом же промпте задать ритм секций, характер типографики и точные цветовые роли, а сразу после генерации зафиксировать глобальные стили.

1. Шаг 1. Запустите генерацию со структурным брифом: откройте framer.com (с VPN), нажмите New Project → Start with AI и опишите не только тему, но и состав секций сверху вниз, температуру палитры и характер контраста.

2. Шаг 2. Зафиксируйте глобальные стили (Assets → Styles) до ручных правок: сразу после того как ИИ собрал страницу, откройте левую панель Assets и проверьте созданные переменные цветов (Background, Surface, Primary Text, Muted Text, Accent) и текстовые стили (H1, H2, Body). Приведите их к вашим точным HEX-кодам и шрифтовой паре — весь макет перестроится каскадно.

3. Шаг 3. Достройте недостающие блоки точечно: нажмите + → Generate with AI между секциями, чтобы вставить недостающий блок (например, аккордеон FAQ или таблицу сравнения), либо кликните правой кнопкой по неудачной секции и выберите Redesign with AI, сохранив уже вписанный текст.

4. Шаг 4. Проверьте стек и мобильный брейкпоинт (390px): на холсте Framer рядом лежат три брейкпоинта — Desktop (1200px+), Tablet (810px) и Phone (390px). Проверьте, чтобы на мобильном экране крупные заголовки не вылезали за край, а карточки перестраивались из 3 колонок в 1 вертикальный стек (Direction: Vertical).

Три уровня анимаций без единой строки кода

Сильная сторона Framer — физическая плавность пружинных анимаций (spring physics), которая настраивается в правой панели в разделе Effects:

1. Appear Effect (при появлении на экране): плавное всплытие заголовка и карточек первого экрана при загрузке (Fade In + Slide Up на 16–24px, задержка Delay: 0.1s между соседними элементами).
2. Scroll Animation / Scroll Transform (при прокрутке): привязка масштаба, прозрачности или лёгкого параллакс-сдвига к позиции скролла. Например, скриншот продукта в Hero-секции плавно выравнивается из наклона и увеличивается с Scale 0.92 до 1.0, когда пользователь прокручивает первый экран.
3. Hover & Press States (на компонентах): обязательный стандарт качества для всех интерактивных элементов. Превратите кнопку или карточку кейса в компонент (Ctrl/Cmd + Alt + K), добавьте состояние Hover и задайте лёгкий подъём (Y: -2px), усиление рамки и плавный переход (Spring: Stiffness 400, Damping 30).

CMS, On-Page Editing и тарифы (2026)

Даже на простых сайтах не стоит копировать карточки кейсов или статей вручную — используйте встроенную CMS:

• Откройте CMS → New Collection, задайте поля (Title, Slug, Cover Image, Client, Impact Metric, Full Story) и свяжите их со слоями карточки на холсте.
• После публикации вы (или ваш заказчик) можете включить режим On-Page Editing прямо поверх открытого сайта в браузере и поправить опечатку, поменять обложку или добавить новый кейс за 30 секунд без захода в сложный интерфейс слоёв.

Тарифная сетка Framer (2026, framer.com/pricing)
├── Free ($0): поддомен .framer.app, плашка «Made in Framer», базовые AI-функции
├── Basic ($10/мес при годовой оплате): свой домен, до 30 страниц, 1 коллекция CMS
├── Pro ($30/мес): тестовый контур (staging), встроенная аналитика, редиректы, до 10 коллекций CMS
└── Enterprise: индивидуальные лимиты, SSO и SLA

(Примечание: старый промежуточный тариф Scale за $100 компания закрыла 16 июня 2026 года).

Лендинг на десктопе и мобильном (Nano Banana 2 через arckep.ru)

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