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

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

• Использовать Webflow AI Site Builder для генерации многостраничного сайта
• Понимать, как AI создаёт дизайн-систему (цвета, типографика, компоненты)
• Работать с CMS для динамического контента
• Сравнивать Webflow с Framer и понимать, когда нужен именно Webflow

Webflow AI: дизайн-система, а не секция

Главное отличие от Framer и всех остальных: Webflow AI генерирует не отдельные секции, а полную дизайн-систему для сайта. При генерации создаётся:

• Набор цветовых переменных (primary, secondary, accent, background)
• Типографическая шкала (H1-H6, body, caption)
• Переиспользуемые компоненты (кнопки, карточки, навбар)
• Spacing-система (отступы, gap)

Измените primary-цвет в одном месте — он обновится на всех страницах. Это каскадные обновления, как в CSS-переменных. Для сайта на 5+ страниц — критическое преимущество.

Ещё одно обновление 2026 года: AI Site Builder теперь поддерживает multi-page генерацию — до 5 страниц за один запрос. Раньше AI генерировал только одну страницу, остальные приходилось создавать вручную.

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

Создание сайта через AI Site Builder

Шаг 1: Запуск генерации

1. Откройте webflow.com и войдите
2. New Site > Generate with AI
3. Опишите: «Корпоративный сайт IT-компании. 5 страниц: главная, услуги (разработка, дизайн, консалтинг), портфолио с 6 кейсами, команда из 4 человек, контакты с формой. Профессиональный стиль, светлая тема, синий акцент»
4. AI задаст уточняющие вопросы: цветовая гамма, настроение, индустрия
5. Нажмите Generate — 30-60 секунд

Результат — 5 связанных страниц с общей навигацией, единой дизайн-системой и заполненным контентом-заглушками.

Шаг 2: Редактирование дизайн-системы

Откройте Design System (левая панель > иконка палитры):

Colors: кликните на primary-цвет, измените на фиолетовый — каждая кнопка, каждый акцент на всех 5 страницах обновится автоматически.

Typography: измените шрифт H1 — все заголовки первого уровня на сайте получат новый шрифт. Не нужно менять на каждой странице отдельно.

Spacing: отредактируйте базовые отступы — секции сайта подстроятся.

Шаг 3: Компоненты (Symbols)

Webflow AI создаёт переиспользуемые компоненты:

1. Левая панель > Components
2. Список: Button, Card, Navbar, Footer, CTA и другие
3. Кликните на компонент — откроется master-версия
4. Измените master — все экземпляры на сайте обновятся

Это привычная логика из Figma: master-компонент и его инстансы. Изменили кнопку в одном месте — она обновилась на 15 страницах.

CMS: когда контент обновляется часто

CMS (Content Management System) отделяет контент от дизайна. Идеально для блогов, портфолио, каталогов товаров — всего, где контент добавляется регулярно.

Создание CMS-коллекции для блога:

1. Левая панель > CMS > New Collection
2. Задайте структуру:
   • Title (текст)
   • Cover Image (изображение)
   • Content (rich text)
   • Author (ссылка на коллекцию Authors)
   • Published Date (дата)
   • Category (select: Design, Tech, Marketing)
3. Добавьте 3-5 записей через встроенный редактор
4. На странице блога привяжите коллекцию к шаблону карточки

После настройки CMS клиент или маркетолог добавляет статьи через простой интерфейс — без доступа к дизайну. Новые записи автоматически появляются на сайте в правильном оформлении.

Webflow AI Assistant

Помимо Site Builder, в Webflow появился AI Assistant — чат-бот внутри редактора. Он помогает с текущими задачами:

• Генерация копирайтинга: выделите текстовый блок, попросите «напиши заголовок для секции услуг IT-компании»
• Генерация кода: добавление кастомного CSS или JavaScript через чат
• SEO-аудит: AI анализирует страницу и даёт рекомендации по SEO
• Web Apps (2026): генерация full-stack веб-приложений с подключением к CMS

Web Apps — новая функция 2026 года. Webflow AI может сгенерировать не просто страницу, а интерактивное приложение с логикой, подключённое к вашему CMS и развёрнутое на Webflow Cloud.

Тарифы Webflow

Webflow Site Plans (2026)
├── Starter: $0, AI включён, 50 CMS items, 1 GB трафик
├── Basic: $14/мес, 10 GB, кастомный домен
├── CMS: $23/мес, 2 000 CMS items, 50 GB
├── Business: $39/мес, 10 000 CMS items, 100 GB
└── Enterprise: по запросу

Отдельно: Workspace-планы для командной работы от $29/мес за участника. E-commerce — от $29/мес. AI включён во все планы, даже бесплатный Starter.

Webflow vs Framer: когда что

Выбирайте Framer, если: лендинг на 1-3 страницы, нужен быстрый результат, важны анимации, нет динамического контента.

Выбирайте Webflow, если: сайт на 5+ страниц, нужен CMS или блог, e-commerce, команда из нескольких человек, контент обновляется часто.

Кривая обучения Webflow круче: 1-2 дня на освоение против 1-2 часов у Framer. Но инвестиция окупается на сложных проектах. Canvas в Webflow структурный (flexbox/grid), а не свободный — это ограничивает на старте, но даёт предсказуемый responsive-поведение.

Практическое задание

Создайте корпоративный сайт через AI Site Builder:

1. Генерация: «Сайт агентства веб-дизайна. 5 страниц: главная, услуги (3 услуги), портфолио (6 работ), команда (4 человека), контакты. Чистый, профессиональный стиль, светлая тема, синий акцент»
2. Дизайн-система: измените primary на фиолетовый — проверьте, что обновился везде
3. CMS: создайте коллекцию «Портфолио»: Title, Image, Description, Category. Добавьте 3 записи
4. Публикация: опубликуйте на .webflow.io
5. Сравните с Framer: где быстрее? Где качественнее?

Резюме урока

Webflow AI — самый мощный визуальный билдер из рассмотренных. AI Site Builder генерирует дизайн-систему с каскадными обновлениями и до 5 страниц за запрос. CMS, e-commerce и Web Apps делают Webflow единственным выбором для сложных сайтов с динамическим контентом.

Кривая обучения круче Framer, но для сайтов на 5+ страниц с частым обновлением контента — это правильная инвестиция.