ИИ для дизайнеров: 6 задач и сборка макета в живую страницу

Шесть задач, которые снимает ИИ

Ни одна из шести задач не про вкус - все про повторяющиеся руки. Первый черновик экрана делают в Figma Make вместо рисования с нуля. Несколько версий одного блока получают без ручного дублирования фрейма. Презентацию клиенту собирают как кликабельный прототип вместо статичной картинки. Дизайн-систему нового проекта не пересобирают вручную в каждом файле. Передачу в вёрстку через MCP-сервер Figma избавляет от текстовой спецификации отступов. А сборка живой страницы из макета отдаёт клиенту ссылку на рабочую страницу вместо PNG.

Где ИИ не заменяет дизайнера

Отраслевые опросы за 2026 год фиксируют быстрый рост использования ИИ дизайнерами по сравнению с прошлым годом, хотя такие опросы обычно предупреждают о смещении выборки в сторону тех, кто уже принял технологию. При этом машина собирает варианты, а отбор, приёмка и ответственность за решение перед клиентом остаются у человека - клиент платит именно за то, что кто-то отвечает за выбор, а не может перебрать сотню вариантов сам.

Что нужно для сборки

Понадобятся установленный Claude Code, платная подписка Claude и пустая папка под проект - редактор кода, сервер или хостинг не нужны. После установки команда проверки версии должна напечатать номер и название инструмента; если этого не произошло, программа не встала и двигаться дальше рано.

Экспорт макета

Экспортируйте фрейм целиком в PNG шириной макета - не частями и не в JPG: части машина склеит по-своему, а JPG размывает границы блоков. Заранее посчитайте число блоков в макете - это пригодится на приёмке. Слишком длинный фрейм (в разы больше типовой ширины) лучше разрезать на части: чем длиннее исходное изображение, тем больше мелких деталей теряется при разборе.

Передайте макет и опишите результат

Откройте Claude Code в папке проекта и передайте PNG перетаскиванием, вставкой из буфера или указанием пути. Дальше словами опишите, что нужно получить:

Собери из этого макета одну статичную страницу: index.html со стилями внутри файла.
Точно повтори сетку, отступы, размеры шрифтов и цвета. Шрифт возьми системный.
Кнопки и пункты меню сделай ссылками-заглушками. Никаких внешних библиотек.
Ниже 860 пикселей ширины блоки складываются в одну колонку.

Указание «стили внутри файла» позволяет открыть страницу двойным кликом, требование точной сетки не даёт модели упростить вёрстку по своему усмотрению, а строка про узкую ширину задаёт поведение на телефоне, которого не видно на статичном макете.

Проверьте результат по блокам

Откройте собранную страницу через локальный сервер, а не двойным кликом - так поведение точнее совпадает с настоящим сайтом. Проверьте вид при узкой ширине окна: блоки должны складываться в колонку, а не уезжать за край.

Крупные размеры модель обычно снимает с макета точно, а мелкий текст - шрифт подписей, кнопок, второстепенных элементов - часто расходится с оригиналом на глаз незаметно для машины: страница валидна, сервер отвечает без ошибок, но кегль не совпадает. Правьте это точными числами, а не описанием «чуть крупнее»:

Кегль мелкого текста не совпадает с макетом по всей странице: подзаголовок в герое,
подпись на кнопках, текст в карточках и подписи под числами.
Поставь ровно по макету: подзаголовок героя 28 пикселей, текст на кнопках 26,
заголовок карточки 34, текст карточки 20, подпись под числом 22.
Сетку, цвета и отступы не трогай.

Проверяйте по одному дефекту за заход: несколько правок в одном запросе модель часто выполняет лишь частично.

Передача в вёрстку через MCP-сервер Figma

Когда страница собрана и утверждена, для передачи разработчику MCP-сервер Figma заменяет скриншот со спецификацией: редактор разработчика читает переменные, компоненты и раскладку прямо из файла. Подключает сервер тот, кто верстает - со стороны дизайнера важно дать ссылку на фрейм и назвать слои понятными именами: имена слоёв становятся данными, по которым модель собирает интерфейс, а не просто внутренней гигиеной файла.

Во что это обходится

Платить приходится за две вещи отдельно: генеративные кредиты дизайн-инструмента (общий счётчик на все AI-функции, размер лимита зависит от тарифа и типа места) и подписку Claude, которая включает и чат, и Claude Code на одном плане. Точные цены и лимиты кредитов меняются и различаются по регионам - проверяйте их на официальных страницах сервисов перед стартом работы.

Что меняется, когда клиенту уходит ссылка, а не картинка

Правки по статичному макету обычно звучат как вкусовщина - «сделайте поживее». Правки по живой странице становятся конкретными: кнопка расположена низко, заголовок на телефоне разбивается на три строки. Обе стороны смотрят на одно и то же поведение, а не интерпретируют картинку каждый по-своему. Снимается и вопрос, кто виноват, если итоговая вёрстка разошлась с макетом.

Чек-лист