Дизайн — то место, где новички чаще всего застревают. Открываешь графический редактор, видишь сотню кнопок и закрываешь. С ИИ это решается иначе: вы описываете сайт словами, а нейросеть рисует работающий прототип — страницу, которую можно открыть в браузере, полистать и показать друзьям.

Я делал дизайн этого блога в Figma Make. Всё, что вы видите на сайте — шапка, карточки статей, обложки, — сначала появилось там. Так же можно нарисовать сайт услуг с кнопкой записи, экран бронирования или личный кабинет сервиса.

Что такое Figma Make

Figma — самый известный редактор для дизайнеров. Figma Make — его ИИ-режим: вместо рисования вы пишете запрос, а ИИ собирает живой прототип. Не картинку, а настоящую страницу с кнопками, меню и анимациями. Правки тоже даются словами: «сделай заголовок крупнее», «добавь тёмную полосу внизу».

Главное, ради чего это нужно: у прототипа есть исходный код. Его потом можно отдать ИИ-помощнику для кода, и он перенесёт дизайн в настоящий сайт один в один.

Схема: ТЗ и примеры сайтов превращаются в прототип в Figma Make, прототип — в исходный код для сборки
Прототип связывает ТЗ и сборку: из него берутся и внешний вид, и код

Подготовка: примеры, которые нравятся

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

Первый вариант

  1. Откройте Figma, создайте новый файл в режиме Make.

  2. Отправьте промпт ниже, подставив своё ТЗ и описание примеров.

  3. Подождите, пока ИИ соберёт прототип, и откройте его на весь экран.

  4. Полистайте: всё ли из ТЗ на месте, понятно ли, что делать посетителю.

Промпт · Для Figma Make
Сделай прототип сайта по этому ТЗ:
[вставьте ТЗ из шага 1]

Настроение и стиль:
- [например: спокойный, журнальный, много воздуха]
- шрифт для заголовков: [с засечками / без засечек]
- один акцентный цвет: [например: салатовый]

Сайты, которые мне нравятся, и чем:
- [адрес] — [чем нравится]
- [адрес] — [чем нравится]

Требования:
- главная и ключевые страницы из ТЗ (например: услуга и запись, личный кабинет или статья);
- сайт хорошо выглядит на телефоне;
- тексты — на русском, похожие на настоящие, без «Lorem ipsum»;
- главное действие посетителя заметно сразу.

Доводка: одна правка — одно сообщение

Первый вариант почти никогда не бывает финальным. Это нормально. Дальше — короткие правки. Самое важное правило: одна правка — одно сообщение. Если попросить сразу десять изменений, ИИ сделает семь, а три испортит.

Хорошие правки выглядят так:

  • «Заголовок на главной слишком мелкий — сделай его вдвое крупнее.»
  • «Карточки услуг на телефоне стоят по две в ряд и не читаются — сделай по одной.»
  • «Кнопка „Записаться“ теряется — выдели её акцентным цветом.»

Плохие — так: «сделай красивее», «что-то не то», «переделай всё».

Заберите исходный код

Когда прототип нравится, скачайте его исходный код. Это архив с файлами — открывать его не нужно, просто сохраните. На следующем шаге вы положите его в папку проекта, и ИИ-помощник сделает из него настоящий сайт.

Другой вариант — подключить помощника к Figma через MCP: он сам прочитает макет.

Крайний вариант — передать скриншоты интерфейса. Он самый слабый: по картинке помощник угадывает размеры и цвета, и при дальнейшей работе дизайн начинает «плыть».

Что дальше

У вас есть ТЗ и прототип. Пора собирать сайт: выбрать ИИ-помощника для кода и сделать первый проект.