Урок 2: Инструменты веб-дизайнера

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

• Ориентироваться в экосистеме AI-инструментов для веб-дизайна
• Понимать, какой инструмент для какой задачи
• Знать бесплатные и платные варианты в каждой категории
• Составить личный набор инструментов под свои задачи

Три категории инструментов

Все AI-инструменты для веб-дизайна делятся на три категории:

Дизайн-системы с AI — Figma, Framer, Webflow. Классические инструменты, дополненные искусственным интеллектом.

Генераторы из промпта — Bolt, Lovable, v0, Cursor. Создают работающие страницы и приложения из текстового описания.

UX-инструменты — анализируют поведение пользователей, тестируют интерфейсы, оптимизируют конверсию.

Не нужно осваивать все. Достаточно одного из каждой категории.

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

Дизайн-системы с AI

Figma AI

Figma — стандарт индустрии для UI/UX-дизайна. В 2025-2026 годах добавлен набор AI-функций:

Figma Make — преобразование макетов в код. Выделяете фрейм, выбираете формат (React, HTML/CSS, Tailwind, SwiftUI) — получаете работающий код. Работает на Claude от Anthropic. Качество напрямую зависит от качества макета: auto layout, осмысленные имена слоёв, компонентная структура.

AI Autolayout — автоматическая расстановка элементов с учётом паттернов дизайна. Экономит рутину при создании сложных layouts.

AI Rename — переименовывает “Frame 847” в осмысленное “hero-section-title”. Мелочь, но при передаче макета разработчику — бесценно.

Цена: Starter бесплатный (до 3 проектов). Professional от $15/мес.

Framer

Визуальный конструктор сайтов с AI. Отличие от Figma: результат — не макет, а работающий сайт с хостингом.

AI Page Generator создаёт целые страницы из промпта. AI Copy генерирует тексты. AI Styles подбирает палитру и типографику. Результат публикуется одним нажатием — сайт работает сразу.

Цена: бесплатный тариф (с баннером Framer). Mini от $5/мес.

Webflow

Профессиональный no-code конструктор с AI-ассистентом. Генерирует секции из описания, наполняет контентом, встроенная CMS. Отличие от Framer — мощнее для сложных проектов: CMS, формы, интеграции.

Цена: Starter бесплатный. Basic от $14/мес.

Генераторы из промпта

Эти инструменты — суть vibe coding. Описываете, что хотите — получаете работающий результат.

v0 от Vercel

Генерирует React-компоненты из текстового промпта. Результат — код с shadcn/ui и Tailwind CSS, который можно скопировать в проект.

Лучше всего для: отдельных компонентов UI. Карточки, формы, навигация, таблицы, дашборды.

Пример:

Промпт: "Карточка товара: изображение сверху, название,
цена, рейтинг из звёзд, кнопка Купить.
Минималистичный стиль, тени, скруглённые углы."

Результат: готовый React-компонент, который можно
скопировать и вставить в проект.

Цена: бесплатный тариф.

Bolt.new

Генерирует не компоненты, а целые приложения. Включая логику, роутинг и базу данных. Результат разворачивается на хостинге одним нажатием.

Лучше всего для: MVP, прототипов, лендингов с формами.

Цена: бесплатный тариф. Pro от $20/мес.

Lovable

Фокус на визуальном качестве. Генерирует интерфейсы, которые выглядят профессионально. Встроенный визуальный редактор для доработки без кода.

Лучше всего для: красивых интерфейсов, когда важен визуал.

Цена: бесплатный тариф. Pro от $25/мес.

Cursor

AI-IDE (среда разработки) для работы с существующими проектами. В отличие от Bolt/Lovable, Cursor не создаёт с нуля — он дорабатывает. Понимает весь проект: файлы, зависимости, стили.

Лучше всего для: доработки и поддержки уже созданных проектов.

Цена: от $20/мес.

UX-инструменты с AI

AI помогает не только создавать интерфейсы, но и проверять их эффективность.

Attention Insight

Предсказывает, куда посмотрит пользователь на странице. Генерирует тепловую карту внимания без реальных пользователей — на основе модели, обученной на eye-tracking данных.

Как использовать: загрузите скриншот страницы — получите карту. Проверьте, видят ли пользователи ключевые элементы: CTA, заголовок, цену.

Цена: от $19/мес.

Hotjar

Тепловые карты, записи сессий, обратная связь. AI-функции: автоматические выводы из данных, суммаризация отзывов.

Цена: бесплатный тариф (35 ежедневных сессий).

Maze AI

Платформа для UX-исследований. Автоматическая генерация отчётов, AI-суммаризация ответов, выявление паттернов поведения.

Цена: бесплатный тариф (до 10 ответов). Starter от $99/мес.

Наборы инструментов под роль

Фрилансер / один дизайнер

• Дизайн: Figma Starter (бесплатно)
• Генерация: Lovable или Bolt (бесплатный тариф)
• UX: Hotjar (бесплатно)
• Бюджет: 0 руб/мес

Дизайн-студия

• Дизайн: Figma Professional ($15/мес) + Figma Make
• Генерация: v0 + Framer
• UX: Attention Insight ($19/мес)
• Бюджет: ~$35/мес

Продуктовая команда

• Дизайн: Figma Organization
• Генерация: Cursor ($20/мес) + Figma Make
• UX: Maze AI + Hotjar
• Бюджет: от $120/мес

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

1. Откройте Lovable или Bolt и сгенерируйте лендинг по промпту (тема — на ваш выбор)
2. Оцените результат: что хорошо, что нужно доработать
3. Составьте свой набор из 3 инструментов, которые хотите освоить первыми

Итоги

Экосистема AI-инструментов для веб-дизайна в 2026 году зрелая и разнообразная. Классика (Figma, Framer, Webflow) добавила AI-функции. Генераторы (Bolt, Lovable, v0, Cursor) создают работающий код из описания. UX-инструменты автоматизируют исследования. В следующем уроке разберём, какие из этих инструментов доступны из России и как получить доступ к остальным.