Урок 2: Webflow AI — профессиональный уровень

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

• Генерировать многостраничные сайты (до 5 связанных страниц за раз) через Webflow AI Site Builder
• Управлять автоматически созданной дизайн-системой Webflow: переменными цветов, типографической шкалой, сеткой отступов и мастер-компонентами
• Проектировать реляционные коллекции Webflow CMS для блогов, каталогов и портфолио с десятками записей
• Использовать Webflow AI Assistant и понимать границу выбора между Framer и Webflow

Webflow AI: генерация архитектуры и дизайн-системы, а не просто картинки

Если Framer даёт дизайнеру свободу рисования на холсте, то Webflow с первого дня строится на настоящей объектной модели браузера (DOM), классах CSS и строгой вложенности контейнеров (Flexbox и CSS Grid).

В 2026 году Webflow AI Site Builder совершил качественный скачок: вместо одной изолированной посадочной страницы он генерирует за один проход многостраничный сайт (до 5 связанных страниц) и, что самое важное, разворачивает под него полноценную систему переменных и компонентов:

• Variables (переменные): семантические токены для палитры (Primary, Secondary, Surface, Text Muted), семейств шрифтов и базовой шкалы отступов;
• Style Guide & Typography Scale: единые классы для заголовков H1–H6, основного текста, подписей и контейнеров секций;
• Components (мастер-компоненты): переиспользуемые блоки навигации, подвала, карточек и кнопок с настроенными свойствами (Props), смена которых в одном месте мгновенно обновляет все 5–20 страниц сайта.

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

Пошаговая сборка многостраничного сайта на дизайн-переменных

В руководствах по системному дизайну ИИ-интерфейсов 2026 года (designsystemscollective.com, duply.ai/blog/give-your-ai-agent-a-design-system) подчёркивается: чем больше страниц в проекте, тем опаснее править стили вручную на каждом экране. В Webflow вы управляете сайтом через панель переменных.

1. Шаг 1. Запустите multi-page генерацию в AI Site Builder: откройте webflow.com, нажмите New Site → Generate with AI и перечислите структуру из 5 страниц: «Корпоративный сайт инженерного бюро промышленного дизайна. 5 страниц: Главная, Услуги (3 направления), Кейсы (сетка проектов), О команде, Контакты с брифом. Строгая модульная сетка, светлая тема, акцент — глубокий кобальт #1D4ED8».

2. Шаг 2. Откалибруйте сгенерированную дизайн-систему до наполнения контентом: в левой панели откройте вкладку Variables (иконка переменных). Проверьте созданные ИИ цветовые токены, размеры шрифтов и радиусы скруглений. Если вам нужно сменить кобальтовый акцент на изумрудный #059669 или поменять шрифт заголовков на Manrope — измените переменную один раз, и все 5 страниц перестроятся синхронно.

3. Шаг 3. Проверьте мастер-компоненты (Components): откройте панель Components (бывшие Symbols). Убедитесь, что Navbar, Footer и CTA Banner оформлены как единые компоненты: правка пункта меню на главной странице автоматически отразится в шапке страницы контактов.

4. Шаг 4. Переведите повторяющиеся списки на реляционную CMS: замените статичные карточки кейсов и статей на динамическую коллекцию Collection List, чтобы контент-менеджер мог добавлять новые проекты через форму без риска сломать сетку.

Webflow CMS: когда проекту становится тесно в простом конструкторе

Главная причина выбрать Webflow вместо Framer или чистого генератора кода — его реляционная CMS. Она позволяет связывать разные типы контента между собой (поле Reference и Multi-Reference):

1. Вы создаёте коллекцию «Кейсы» (поля: название, обложка, задача клиента, галерея результатов, год).
2. Создаёте вторую коллекцию «Услуги» (промышленный дизайн, разработка прототипа, упаковка) и третью — «Авторы / Инженеры».
3. Связываете их перекрёстными ссылками: теперь на странице конкретной услуги автоматически выводятся только те кейсы, которые относятся к этому направлению, а внутри кейса отображается карточка ведущего инженера со ссылкой на все его работы.

Webflow AI Assistant и Web Apps (2026)

Помимо стартового конструктора сайта, непосредственно внутри редактора работает Webflow AI Assistant:

• Адаптация секций под дизайн-систему: вы вставляете новую секцию, а ассистент автоматически перекрашивает её классы в переменные вашего текущего проекта;
• Контекстный копирайтинг и SEO-аудит: ИИ переписывает тексты прямо в блоках под нужную длину строки, генерирует мета-теги Title / Description и проверяет правильность иерархии заголовков H1 → H2 → H3;
• Генерация кастомного CSS/JS и Web Apps: если стандартных настроек панели стилей не хватает (например, нужен нестандартный горизонтальный скролл или фильтрация каталога на лету), ассистент пишет чистый фрагмент кода, а функция Web Apps (2026) позволяет подключать интерактивные модули к данным вашей CMS на базе Webflow Cloud.

Тарифная сетка и честное сравнение с Framer

Тарифы Webflow Site Plans (2026, webflow.com/pricing)
├── Starter ($0): до 2 страниц (или демо AI-генерации), домен .webflow.io, 50 записей CMS, 1 ГБ трафика
├── Basic ($14/мес при годовой оплате): свой домен, до 150 статических страниц, без CMS, 10 ГБ трафика
├── CMS ($23/мес): 2 000 записей CMS, 50 ГБ трафика, 3 места для редакторов контента
└── Business ($39/мес): до 10 000 записей CMS, 100 ГБ трафика, загрузка файлов в формах

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