Гайд для практикующего дизайнера · август 2026
ИИ для дизайнеров: 6 задач и живая страница из макета
ИИ для дизайнеров закрывает шесть кусков работы: черновик экрана, варианты блока, презентацию клиенту, дизайн-систему, передачу в вёрстку и сборку живой страницы из макета. Вкус, отбор и приёмка остаются человеку. На прогоне 14 августа макет 1440 на 2400 стал страницей в 6774 байта, а весь мелкий текст встал по макету после одной фразы
ИИ для дизайнеров закрывает шесть кусков работы: черновик экрана, варианты блока, презентацию клиенту, дизайн-систему, передачу в вёрстку и сборку живой страницы из макета. Вкус, отбор и приёмка остаются человеку. На прогоне 14 августа макет 1440 на 2400 стал страницей в 6774 байта, а весь мелкий текст встал по макету после одной фразы
Здесь макет превращается в живую ссылку за одну команду. Как поставить это на поток по всей своей практике, а не на одном проекте, разбираем отдельно
Ставим сборку на поток на ИИ-Лагере, три дня
Это заявка в мой закрытый канал, не оплата. Впускаю сразу, дальше бот в личке отдаёт путёвку на три дня
Что ИИ забирает у дизайнера: шесть задач
ИИ для дизайнеров закрывает 6 повторяющихся кусков работы: первый черновик экрана в Figma Make, варианты блока, презентацию клиенту, дизайн-систему проекта, передачу в вёрстку и сборку живой страницы
Ни один из шести не про вкус, все шесть про руки:
| Задача дизайнера | Чем делать | Какой шаг уходит из процесса |
|---|---|---|
| Первый черновик экрана | Figma Make | не рисуешь пустой экран с нуля, правишь прямо в канвасе |
| Пять версий одного блока | Figma Make или Claude Design | не дублируешь фрейм руками ради пятой версии |
| Презентация клиенту | Claude Design | клиент смотрит кликабельный прототип, а не картинку |
| Дизайн-система нового проекта | Claude Design | не пересобираешь цвета и шрифты в каждом новом файле |
| Передача в вёрстку | MCP-сервер Figma и Claude Code | не пишешь спецификацию отступов текстом |
| Макет в живую страницу | Claude Code | клиенту уходит ссылка на index.html, а не PNG |
Таблица прокручивается вбок →
В последней колонке стоят не часы, а вырезанный шаг: час у каждого свой, а исчезнувший шаг виден одинаково
Две соседние темы в шестёрку не входят. Логотип и фирменный стиль живут отдельно, разбор в гайде про бренд. Стили и палитра генерации картинок тоже своя история, она в гайде про палитру. Здесь речь про конвейер: что происходит с макетом от экспорта до открываемой ссылки
Где ИИ не заменяет дизайнера и за что платит клиент
Машина собирает варианты, а отбор, приёмка и ответ на вопрос «почему так» остаются человеку: за выбор перед клиентом отвечает деньгами живой дизайнер, а не программа
Отраслевой замер за этот год: 91% дизайнеров используют ИИ еженедельно против 54% годом раньше, 75% ежедневно. Цифры из AI in Design Report 2026, его собрали Designer Fund и Foundation Capital на 900+ ответах в первом квартале 2026 года. Авторы сами предупреждают, что выборка смещена: «the sample may skew towards respondents who have embraced AI more than the average designer, or who work at companies that are actively supporting adoption». Держи оговорку рядом с цифрой, иначе 91% читается как «уже все»
Два года назад профильный институт писал обратное:
«Our research and evaluation show that there are currently few design-specific AI tools that meaningfully enhance UX design workflows. As of Spring 2024, AI isn't ready for designers to take advantage of them»
Перевод: профильных инструментов, которые улучшают рабочий процесс дизайнера, тогда почти не было. За два года набор под рукой стал другим, способности человека остались прежними
Статья для того, кто уже умеет проектировать. Если дизайнера в проекте нет вообще, тебе в гайд про дизайн без дизайнера: там путь строится от нуля, а не от готового макета
Клиент платит за вкус по простой причине: он не может перебрать сотню вариантов и не хочет. Он покупает одно решение, за которое кто-то отвечает
Шаг 0. Что поставить до первой команды
До первой команды в системе должны быть три вещи: Claude Code, аккаунт Claude и пустая папка под проект. Ни редактора кода, ни сервера, ни хостинга не нужно
Claude Code - это окно, куда ты обычными словами пишешь ИИ, что сделать, и оно работает с файлами твоего компьютера напрямую, без кнопок и меню. У дизайнера такое окно обычно закрыто годами, поэтому установка вынесена в отдельный разбор: как поставить Claude Code с нуля - по шагам, со скринами и с ошибками первого запуска
Если открывать это окно не страшно, программа ставится одной строкой через пакетный менеджер, то есть встроенный магазин программ для командной строки. На Mac скопируй строку, вставь в открывшееся окно и нажми Enter:
brew install --cask claude-codeНа Windows то же самое окно называется PowerShell, команда своя:
winget install Anthropic.ClaudeCodeДокументация даёт и третий вариант, установочный скрипт через curl, но новичку он лишний: там ты скачиваешь чужой код и сразу запускаешь
Проверка, что программа встала
- В том же окне впиши
claude --versionи нажми Enter что увидишь: номер версии и рядом слова «(Claude Code)» - у меня 14 августа вышло2.1.186 (Claude Code)
если вместо этого пришла строка «command not found» - программа не встала, дальше идти рано: ставь заново по гайду установки и вернись к этому шагу
Аккаунт нужен платный: подписки Claude Pro, Max, Team, Enterprise либо доступ через Claude Console. При первом запуске программа сама откроет браузер
Признак готовности шага: окно печатает номер версии, и рядом создана пустая папка под проект командой mkdir moy-lending
Шаг 1. Экспортировать макет и проверить, что файл годится
Экспортируй фрейм целиком в PNG шириной макета, у меня это 1440 пикселей, и положи в папку проекта. Не кусками и не в JPG: куски машина склеит по-своему, JPG размывает границы блоков
Мой вход в прогоне: один фрейм лендинга студии интерьеров, 1440 на 2400, вес 90 килобайт. Шесть блоков внутри: шапка с меню, герой с кнопкой, плашка под фото, три карточки услуг, тёмная полоса с цифрами и финальный экран
Здесь у практикующего дизайнера сразу возникает вопрос: зачем PNG, если у Figma есть свой канал связи с ИИ (это MCP, речь о нём на Шаге 5), он доступен на всех тарифах и Claude Code в списке его клиентов. Ответ упирается в то, кто делает работу. Через этот канал уезжают данные всего фрейма, и нужны они там, где вёрстку ведёт разработчик в своём редакторе. Для одной страницы, которую ты собираешь сам и сегодня, путь короче: не нужно ничего подключать, выдавать доступ к файлу и следить, что уехало в модель. Обратная сторона честная: из PNG не приходят переменные и состояния компонентов, машина видит только нарисованное
Размер файла в macOS показывает встроенная команда, ставить ничего не нужно. На Windows то же самое видно в свойствах файла, вкладка «Подробно»
Если нужен полный маршрут по этому шагу, он расписан в разборе Нейросеть делает 3D-модель из фото: 6 шагов до файла
Проверить ширину, высоту и вес макета
- В том же окне впиши
sips -g pixelWidth -g pixelHeight maket-lending.pngи нажми Enter что увидишь: две строки с числами - ширину и высоту в пикселях; мой вход 14 августа -pixelWidth: 1440иpixelHeight: 2400 - Следом впиши
ls -lh maket-lending.pngи нажми Enter что увидишь: строку с весом файла - у меня вышло 90 килобайт
Ограничений по весу картинки документация Claude Code к дате проверки не публикует, цифру порога я не выдумываю. Правило по прогону другое: чем длиннее фрейм, тем больше мелких деталей теряется за проход. Фрейм выше примерно 4000 пикселей режь пополам
Фотографии готовь до сборки: подрезать, убрать фон, поднять разрешение. Как это делает нейросеть, разобрано в гайде про обработку картинок. В сборку они приходят готовыми файлами
Шаг закрыт, когда файл лежит в папке проекта, команда напечатала ширину и высоту, а ты посчитал блоки. Число блоков нужно на приёмке
Шаг 2. Отдать макет Claude Code одной строкой
Запусти программу в папке с макетом и передай ей PNG одним из трёх способов, описанных в документации Claude Code. Все три равнозначны, выбор зависит от того, где лежит файл
cd moy-lending
claude| Способ | Как выглядит | Когда удобнее |
|---|---|---|
| Перетащить файл | тянешь PNG мышкой в окно программы | файл лежит рядом, окно открыто |
| Вставить из буфера | копируешь картинку и жмёшь Ctrl+V, в iTerm2 и Cmd+V | скопировал фрейм из редактора |
| Указать путь | пишешь путь текстом в строке запроса | файл в папке проекта |
Таблица прокручивается вбок →
Дальше словами объясняешь, что с картинкой делать. Документация приводит два примера запроса: Generate CSS to match this design mockup и What HTML structure would recreate this component?. По-русски модель понимает так же, поэтому добавляй то, чего на картинке не видно
Рабочая формулировка, которую я использую сам. Скопируй её целиком и вставь в окно вместе с макетом:
Собери из этого макета одну статичную страницу: index.html со стилями внутри файла.
Точно повтори сетку, отступы, размеры шрифтов и цвета. Шрифт возьми системный.
Кнопки и пункты меню сделай ссылками-заглушками. Никаких внешних библиотек.
Ниже 860 пикселей ширины блоки складываются в одну колонку.Четыре вещи в ней дают результат. «Стили внутри файла» - чтобы страница открывалась двойным кликом. «Точно повтори сетку» - иначе машина упростит вёрстку по своему вкусу. «Никаких внешних библиотек» - страница ничего не тянет из интернета. Последняя строка задаёт поведение на телефоне, которого в статичном макете нет
Документация подтверждает, что макет для программы штатный вход: «Image analysis works with diagrams, screenshots, mockups, and more». Заход удачный, когда в папке появился файл index.html
Шаг 3. Открыть страницу в браузере и показать клиенту
Собранную страницу открывают двумя способами: двойным кликом по index.html или маленькой программой, которая раздаёт твою папку браузеру так же, как это делает настоящий сайт, через порт 8412 (номер двери, по которому браузер находит эту программу). Второй способ честнее к результату
Двойной клик открывает файл по адресу вида file:///Users/..., и часть вещей там ведёт себя иначе, чем на настоящем сайте. Эта программа поднимается одной встроенной командой:
python3 -m http.server 8412Дальше открываешь в браузере http://localhost:8412/ и смотришь глазами. Окно занято этой командой, поэтому следующую команду набирают в новой вкладке того же окна, а первую останавливают сочетанием Ctrl+C
Проверить, что страница отдана целиком
- Впиши
ls -lh index.htmlи нажми Enter что увидишь: вес файла - у меня вышло 6.6К - Впиши
python3 -m http.server 8412и нажми Enter что увидишь: строку «Serving HTTP on ...» - программа встала и раздаёт папку - В новой вкладке того же окна впиши
curl -s -o /dev/null -w 'вес %{size_download} байт\n' http://localhost:8412/и нажми Enter что увидишь: строку с весом в байтах - у меня вышло 6774 байт, страница отдана целиком
если вместо веса пришла ошибка соединения - вернись во вкладку с первой командой и проверь, что она всё ещё выполняется и не остановлена по Ctrl+C
Вес 6774 байта показывает, что внутри только твоя вёрстка, без библиотек в полмегабайта. Вся папка проекта вместе с макетом весит 100 килобайт
Второе, что смотрят до показа клиенту, это телефон. Сузь окно браузера до ширины около 390 пикселей и проверь, что блоки встали в колонку, а не уехали за край. Клиент откроет ссылку с телефона первым делом, а на статичном макете такого поведения нет
Шаг 4. Починить то, что собралось не так
Первая сборка повторила сетку, цвета и все шесть блоков, а разошлась в кегле: 6 значений мелкого текста набраны мельче макета - подзаголовок героя, надписи на кнопках, тексты карточек и подписи под числами
Дизайнер ловит такое за секунду, потому что глаз держит эталон рядом. Машина про расхождение не сообщит: с её стороны страница собрана, файл валидный, страница открылась. Крупные размеры она сняла с кадра точно, мелкие взяла разумные по умолчанию
Правится это не руками в коде, а фразой в той же сессии. Числа в ней обязательны, без них машина снова угадает. Вставь фразу в то же окно и увидишь пересобранную страницу:
Кегль мелкого текста уехал вниз по всей странице: подзаголовок в герое,
подпись на кнопках, текст в карточках и подписи под числами набраны мельче макета.
Поставь ровно по макету: подзаголовок героя 28 пикселей, текст на кнопках 26,
заголовок карточки 34, текст карточки 20, подпись под числом 22.
Сетку, цвета и отступы не трогай.Вторая сборка подняла все шесть значений. Страница выросла по высоте с 2394 до 2433 пикселей, а вес файла не сдвинулся: 6774 байта до и после
Копию первой сборки я отложил рядом под именем index-do-pravki.html, поэтому шесть изменившихся размеров видно построчным сравнением файла до правки и после
Сравнил файл до правки и после текстовым поиском по слову «размер шрифта» в обоих: шесть значений выросли ровно до чисел из моей фразы, а сетка, цвета и отступы не сдвинулись ни на пиксель
| Где текст | Было (мельче макета) | Стало (по фразе) |
|---|---|---|
| Подзаголовок героя | 24px | 28px |
| Текст на кнопке героя | 19px | 26px |
| Заголовок карточки услуги | 28px | 34px |
| Текст карточки услуги | 17px | 20px |
| Подпись под цифрой в тёмной полосе | 18px | 22px |
| Текст на кнопке «Оставить заявку» | 18px | 26px |
Таблица прокручивается вбок →
И сразу цена одной фразы на шесть значений. Я написал «текст на кнопках 26», а в макете кнопка героя 26, кнопка финала 24. Машина исполнила буквально, обе получили 26, и нижняя ушла на два пикселя вверх от эталона. Ловится это только второй приёмкой: ошибка в моей формулировке, а не в сборке
Что ломается чаще всего:
| Симптом | Причина | Что сказать в сессии |
|---|---|---|
| Мелкий текст мельче макета | размер угадан, а не измерен | «поставь текст карточки ровно 20 пикселей» |
| Блоки съехали в узкую полосу | сетка досталась обёртке, а не строке | «дай ряду свой класс и перенеси сетку туда» |
| Отступы гуляют между секциями | у секций нет общего правила | «сделай вертикальный отступ секции 80 пикселей» |
| Цвет отличается от фирменного | цвет назван словом, а не кодом | «поставь кнопке код цвета #2563EB» |
| На телефоне блоки уезжают за край | нет правила для узкой ширины | «ниже 860 пикселей складывай блоки в колонку» |
Таблица прокручивается вбок →
Приёмка идёт по блокам сверху вниз, по одному дефекту за заход: две правки в одном запросе машина часто делает наполовину
Шаг 5. Передать вёрстку разработчику через MCP-сервер Figma
Страница собрана, дальше её отдают в вёрстку, и тут MCP-сервер Figma заменяет скриншот со спецификацией: редактор разработчика читает переменные, компоненты и раскладку из твоего файла
MCP-сервер подключает внешний источник данных к программе, которая работает с моделью. У Figma он бывает двух видов. Удалённый живёт по адресу https://mcp.figma.com/mcp и, по гайду Figma, доступен «on all seats and plans», то есть на любом месте и тарифе. Десктопный работает через приложение Figma и требует места Dev или Full
Подключает его тот, кто верстает: в том же гайде названы Claude Code, Claude Desktop, VS Code, Cursor, Windsurf и Codex by OpenAI. Твоя часть другая: дать ссылку на фрейм и назвать слои по-человечески
Что уезжает в модель, Figma описывает в анонсе сервера от 4 июня 2025 года: компоненты, переменные и стили, скриншоты, интерактивность и содержимое. Про содержимое сказано дословно:
«Text, svg, images, layer names, and annotations can help LLMs derive how to fill the interface with the data model»
Перевод: текст, векторы, картинки, имена слоёв и аннотации помогают модели понять, чем наполнять интерфейс. Вывод для дизайнера: имена слоёв перестают быть личной гигиеной файла и становятся данными, по которым собирается вёрстка. Слой Frame 427 расскажет разработчику ровно ничего
Анимацию через этот канал не передают: движение живёт отдельным форматом, и как отдать его файлом, разобрано в гайде про Lottie
Сколько это стоит: кредиты Figma и подписка Claude
Платить приходится за две вещи: кредиты Figma за её ИИ-возможности и подписку Claude, цифры ниже сняты со страниц компаний 14 августа 2026 года
Кредиты Figma устроены как общий счётчик. В вопросах по тарифам сказано: «Figma AI uses a credit system that is shared across all Figma AI features and products», то есть один запас тратят и генерация, и Make. Норма начисляется на место, а не на команду:
| Место или план | Кому достаётся | Кредитов в месяц |
|---|---|---|
| План Starter | пробуешь в одиночку | 500 |
| Professional, место Full | практикующий дизайнер со своими проектами | 3 000 |
| Organization, место Full | дизайнер в штате компании | 3 500 |
| Enterprise, место Full | дизайнер в крупной компании | 4 250 |
| Места Collab, Dev, View | верстальщик, менеджер, наблюдатель | 500 |
Таблица прокручивается вбок →
Кончился счётчик - Figma предлагает докупить кредиты в своём тарифе. Оговорка с той же страницы: часть возможностей в бете кредитов пока не тратит, а после беты «...standard AI credit usage will apply», то есть счётчик начнёт тратиться как обычно
У Claude кредитов нет. Claude Design по странице анонса доступен подписчикам планов Pro, Max, Team и Enterprise без отдельной оплаты, Claude Code работает на той же подписке. Сумму смотри на странице тарифов: цены отличаются по странам и способу оплаты, одна цифра здесь была бы враньём
Про Adobe цифр не будет: три страницы про генеративные кредиты 14 августа 2026 года не ответили за минуту ожидания. Смотри свой тариф в личном кабинете
Что вышло в моём прогоне 14 августа
Прогон 14 августа 2026 года дал такую пропорцию: вход - макет 1440x2400 весом 90 килобайт, выход - страница в 6774 байта, две сборки и одно расхождение на шесть значений
Честно про вход: макет я отрисовал сам как тестовый фрейм лендинга студии интерьеров, клиентский проект в статью не потащишь. Блоки внутри обычные, шесть штук
Версия инструмента - Claude Code 2.1.186, система macOS. Сетка, цвета, отступы и поведение при ширине 390 пикселей сошлись с первого захода. Разошёлся кегль мелкого текста: шесть значений, одна фраза, вторая сборка. Повторный замер той же командой по готовой странице дал ответ: страница открылась, вес 6774 байта и время 0.000740 секунды
Чего в этих цифрах нет: замера часов. Своей дизайнерской практики у меня нет, и сравнивать «раньше день, теперь час» я не буду, это была бы выдуманная цифра. Выше стоит измеримое: сколько блоков совпало, сколько значений разошлось, сколько байт весит результат
Вывод: сборку отдаёшь машине, приёмку не отдаёшь никогда. Дальше меняется не скорость, а то, что ты приносишь клиенту
Что меняется, когда клиенту уходит ссылка, а не PNG
Клиент, который открыл ссылку с телефона и нажал кнопку, обсуждает другое: не «нравится ли картинка», а как страница ведёт себя у него в руках
Разница видна в правках. По PNG правки звучат как вкусовщина: «сделайте поживее», «шрифт какой-то не такой». По живой странице они становятся конкретными: кнопка низко, на телефоне заголовок в три строки, блок с ценами хочется выше. Спорить не о чем, вы оба смотрите в одно и то же
Меняется и предмет сделки. Картинку клиент читает как обещание, работающую страницу как часть готового дела. Заодно снимается спор, кто виноват, если вёрстка вышла не как в макете
Что остаётся открытым, назову честно. Одну страницу из макета ты после этой статьи соберёшь. Дальше вопросы другого порядка: что показывать на первом экране, куда падает заявка, как собрать конвейер под поток клиентских задач
Этот кусок вынесен в отдельный гайд Manus AI 2026: 6 задач агенту, кредиты и доступ из России
Источники
- Anthropic, анонс Claude Design - планы доступа
- Документация Claude Code, работа с картинками - три способа отдать картинку
- Документация Claude Code, быстрый старт - установка и проверка версии
- Figma, вопросы по тарифам и кредитам ИИ - общий счётчик, норма по местам
- Figma Help, гайд по MCP-серверу - удалённый и десктопный
- Figma Blog, анонс Dev Mode MCP server - 4 июня 2025 года
- Figma Make, продуктовая страница - «code-backed and visually editable»
- AI in Design Report 2026, глава про инструменты - 91% против 54%
- AI in Design Report 2026, методология - 900+ ответов, оговорка о выборке
- Nielsen Norman Group, «AI Isn't Ready for UX Design» - 13 мая 2024 года
Памятка: девять строк от макета до ссылки клиенту
Весь путь прогона, по строке за шаг
Сохрани себе
- Claude Code стоит, команда версии печатает номер и слова (Claude Code)
- Папка проекта создана, имя латиницей, например moy-lending
- Фрейм экспортирован в PNG шириной макета и лежит в этой же папке
- Число блоков в макете посчитано заранее, оно нужно на приёмке
- Макет отдан в сессию перетаскиванием, вставкой или путём к файлу
- В запросе названы: одна страница, стили внутри файла, точная сетка, узкий экран
- Локальный сервер открывается, страница открыта и при ширине 390 пикселей
- Приёмка по блокам сверху вниз, одна правка за заход, размеры названы числами
- Вторая сборка сверена с макетом заново, включая то, что правил
Что останется после трёх дней
Не пересказ теории про ИИ в дизайне, а рабочий инструмент, который проведёт следующий макет через сборку сам
Собираешь его на своих реальных проектах, а не на учебном примере
Заявка в закрытый канал, одобряю сразу. Бот сам напишет первым и покажет, как забрать три дня Лагеря. Бесплатно
Частые вопросы
Какая нейросеть лучше для дизайнера?
Ответ разный по задачам. По опросу AI in Design Report 2026 дизайнеры чаще называют Claude - 78% респондентов, следом ChatGPT с 65% и Gemini с 48%. Для картинок берут генераторы, для макета Figma Make, для сборки страницы Claude Code
Заменит ли ИИ дизайнера?
К дате проверки нет, и видно это по типу дефектов. Машина собирает варианты и вёрстку, но не выбирает, что показать клиенту, и не отвечает за выбор деньгами. Расхождение моего прогона программа считала нормой
Можно ли из макета Figma сразу получить сайт?
Статичную страницу получишь за заход: экспортируешь фрейм в PNG, отдаёшь Claude Code, забираешь index.html. Что не появится автоматом: формы заявок, каталог, личный кабинет
Нужно ли дизайнеру уметь программировать?
Писать код не нужно, читать ответы окна нужно. Из всей технички здесь три команды: установка, проверка версии и запуск локальной программы для показа страницы. Правки формулируются словами, а не селекторами
Сколько стоит ИИ для дизайнера в месяц?
Считаются две подписки. Кредиты Figma идут в тариф: 500 в месяц на Starter и местах Collab, Dev, View, 3 000 на Professional Full, 3 500 на Organization, 4 250 на Enterprise. Claude Design и Claude Code входят в планы Pro, Max, Team и Enterprise
Что делать, если ИИ собрал макет неточно?
Правь по одному дефекту за заход и называй числа, а не ощущения. Две правки в одном запросе часто исполняются наполовину. Мой мелкий кегль встал по макету одной фразой с пятью размерами
