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

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

• Применять главное правило плейбука 2026 года: выбирать инструмент по слою задачи, а не по хайпу (v0 против Bolt.new, Lovable, Framer и Cursor)
• Работать со связкой Figma Make + Figma MCP Server + Make Kits и голосовым холстом Google Stitch
• Переносить единый паспорт дизайн-системы DESIGN.md между всеми инструментами без потери фирменного стиля
• Собирать оптимальный стек под бюджет фрилансера, дизайн-студии и продуктовой команды

Главное правило 2026 года: выбирайте инструмент по слою задачи

Главная причина разочарования в AI-инструментах — попытка забивать гвозди микроскопом. Дизайнер видит в соцсетях вирусный ролик про v0, пытается собрать в нём многостраничный личный кабинет с базой данных, застревает на авторизации и решает, что «вайб-кодинг не работает».

В индустриальном руководстве Vibe Coding for Designers: A 2026 Playbook (brainy.ink, 2026) сформулирован базовый принцип: «Pick the tool by the layer, not the hype» (Выбирайте инструмент по архитектурному слою задачи, а не по шуму вокруг него).

Матрица выбора по слою задачи

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

Категория 1: Дизайн-системы и визуальные холсты с ИИ

Figma в 2026 году: Make, MCP Server и Make Kits

В 2026 году ИИ в Figma перестал быть «одной волшебной кнопкой» и разделился на три профессиональных инструмента (Figma Blog: Workflow Lab — Moving Between Design and Code With Agents, август 2026; Figma Help: Make resources and MCP):

1. Figma Make (интерактивные прототипы и код из макета). Превращает текстовый бриф или выделенный фрейм Figma в кликабельное веб-приложение (работает на базе моделей Claude).
   • Инженерное правило промптинга в Make: сначала описывайте маршрут пользователя и состояния (откуда пришёл, что происходит при пустом списке, сохраняются ли фильтры при нажатии «Назад»), и только в конце — визуальные пожелания.
2. Figma MCP Server (прямой мост из макета в код). Раньше разработчики кормили нейросеть скриншотами из Figma, теряя переменные и сетку. Через официальный Figma MCP server агенты (Cursor, Claude Code, VS Code) читают напрямую структуру слоёв, Auto Layout, переменные цветов (Variables) и компоненты выбранного фрейма.
3. Make Kits (фиксация правил дизайн-системы). Если в команде при каждой генерации в Figma Make разъезжаются кнопки и цвета, дизайн-лид собирает Make Kit — связку кодового пакета, библиотеки стилей и строгих правил («какую кнопку использовать для главного действия, когда она переходит в disabled»).

Цена: тариф Starter — бесплатный; Professional Full seat — $16/мес (figma.com/pricing, август 2026).

Google Stitch — бесконечный холст для Vibe Design и генератор DESIGN.md

В марте 2026 года Google Labs полностью перестроил Google Stitch (stitch.withgoogle.com), превратив его в главный инструмент раннего визуального поиска (Abduzeedo: Google Stitch and the Rise of Vibe Design):

• От настроения сразу к high-fidelity экранам. Вместо рисования серых вайрфреймов вы задаёте вектор («строгий минимализм финтеха в духе Stripe» или загружаете фото наброска с маркерной доски) — и Stitch раскладывает на бесконечном холсте несколько готовых визуальных направлений.
• Voice Canvas (голосовой холст). Можно разговаривать с холстом голосом в реальном времени: «сделай палитру теплее», «добавь блок сравнения тарифов», «покажи три варианта мобильного меню».
• Автоматический экспорт DESIGN.md и Figma-слоёв. Stitch умеет извлекать из любого референса готовый файл DESIGN.md (токены цветов, шрифтов и отступов) для передачи в Cursor, Lovable или v0, а также выгружать чистый HTML/CSS и редактируемые слои в Figma с сохранённым Auto Layout.
• Цена: бесплатно во время публичной беты (350 стандартных и 50 экспериментальных генераций в месяц).

Framer и Webflow — визуальный продакшен с хостингом

Когда вам нужен кастомный маркетинговый лендинг со сложной анимацией, который открывается по боевому домену сразу после нажатия Publish:

• Framer: лучший выбор для промо-страниц, продуктовых лендингов и портфолио с живой анимацией и AI-генерацией секций. Бесплатный тариф (с баннером Framer), Basic — $10/мес, Pro — $30/мес (тариф Scale за $100 снят 16 июня 2026 года). Из России требует VPN.
• Webflow: индустриальный стандарт для крупных многостраничных сайтов с мощной встроенной CMS и точной работой с классовой версткой. Тариф Starter — бесплатный, Site Basic — $15/мес при оплате за год (webflow.com/pricing, август 2026).

Категория 2: Генераторы кода и продуктов из промпта

Все четыре ключевых генератора 2026 года (v0, Bolt.new, Lovable, Cursor) показывают профессиональный результат только при одном условии — если перед началом работы вы передали им текстовый паспорт дизайн-системы DESIGN.md (или настроили базовые CSS-переменные, как описано в гайде On-Brand prototyping: styling AI apps like a pro).

Как распределить генераторы в реальном проекте

1. Шаг 1: Разведка стиля и паспорт системы (Google Stitch или Figma). Быстро нащупайте визуальное направление в Stitch или Figma и зафиксируйте токены в файле DESIGN.md. Если для первого экрана нужны уникальные продуктовые рендеры или иконки, сгенерируйте их в Nano Banana Pro или Recraft V4.1 на arckep.ru.

2. Шаг 2: Генерация сложных UI-секций в Vercel v0 (бесплатный тариф). Если вам нужна безупречная таблица с фильтрами, калькулятор цены или карточка дашборда — скормите DESIGN.md в v0 и заберите готовый React-компонент.

3. Шаг 3: Быстрый прототип в Bolt.new (Free до 1M токенов/мес, Pro $25/мес) ИЛИ полный MVP в Lovable (Free тариф, Pro от $25/мес). Если нужно просто прокликать сценарий на созвоне к пятнице — собирайте в Bolt.new. Если продукт должен реально регистрировать пользователей и сохранять заказы в базу данных Supabase без участия программиста — собирайте в Lovable.

4. Шаг 4: Проверка адаптивности и доводка в Cursor (от $20/мес). Как советует практический гайд Figma to Code With AI (2026), обязательно откройте сгенерированную страницу на ширине мобильного экрана 320px–375px, проверьте переносы длинных русских заголовков, размер зон нажатия (не менее 44×44px) и доведите детали в Cursor.

Категория 3: UX-аналитика и проверка интерфейсов с ИИ

Создать страницу за 10 минут — половина дела; вторая половина — убедиться, что пользователь за первые 3 секунды считывает заголовок и находит целевую кнопку.

• Attention Insight (от $19/мес): нейросеть, обученная на тысячах лабораторных исследований айтрекинга (движения глаз). Загружаете скриншот макета из Figma или ссылку на собранный в Lovable лендинг — и через 15 секунд получаете тепловую карту внимания (Heatmap) и процент заметности (Clarity Score) главной кнопки ещё до запуска рекламы.
• Hotjar (бесплатно до 35 сессий в день): записывает реальные визиты пользователей на ваш опубликованный сайт, строит карты кликов и скролла, а встроенный AI автоматически группирует жалобы и места, где люди испытывают раздражение (Rage Clicks).
• Maze AI (бесплатный стартовый тариф, платные планы для команд от $99/мес): платформа для быстрых немодерируемых UX-тестов. Вы даёте респондентам ссылку на прототип и задание («Найдите тариф для команды и оформите пробный период»), а ИИ формирует готовый отчёт с узкими местами воронки.

Готовые наборы инструментов под вашу роль и бюджет

Не пытайтесь оплачивать и изучать десяток сервисов одновременно. Соберите компактный стек из одного инструмента на каждый слой:

1. Стек фрилансера и соло-дизайнера (Бюджет: 0 ₽ в месяц)

• Проектирование и система: Figma Starter (бесплатно) + собственный шаблон DESIGN.md
• Сборка рабочих сайтов и MVP: Lovable или Bolt.new (бесплатные тарифы) + v0 для отдельных секций
• Проверка UX после запуска: Hotjar Basic (бесплатно)

2. Стек дизайн-студии и маркетолога (Бюджет: ~$35–45/мес)

• Проектирование и визуал: Figma Professional Full seat ($16/мес) с Figma Make + генерация уникальной графики и 3D на arckep.ru (за рубли по мере задач)
• Публикация клиентских сайтов: Webflow ($15/мес) или Framer ($10–30/мес)
• Предварительный UX-аудит макетов: Attention Insight ($19/мес)

3. Стек продуктовой команды и Design Engineer (Бюджет: от $65–120/мес)

• Дизайн-система и мост в код: Figma (Make Kits + Figma MCP Server) + DESIGN.md в корне репозитория
• Быстрые MVP и разработка: Lovable Pro ($25/мес) для проверки гипотез + Cursor ($20/мес) для основного продукта
• Исследования: Maze AI + Hotjar