Figma на автопилоте: 12 промтов, которые заменяют рутину от вайрфрейма до дизайн-системы

Figma на автопилоте: 12 промтов, которые заменяют рутину от вайрфрейма до дизайн-системы

Дизайн-марафон — это когда до дедлайна три дня, а у тебя 40 экранов, макет дизайн-системы в Figma, и заказчик просит «ну добавь ещё пару сценариев». В 2026 году рутину можно снять с себя: AI-агенты (в том числе вроде ASI Biont) генерируют структуру, тексты, компоненты и документацию — а ты остаёшься человеком, который принимает решения.

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

1. Раскадровка пользовательских сценариев без брифа

Проблема: клиент присылает одну строку «сделайте личный кабинет». Требования не собраны.

Промт:

Ты — продуктовый дизайнер. Составь user flow для [продукт].
Формат: экран → действие → следующий экран.
Учти: онбординг, ошибки, пустые состояния, возврат.
Верни таблицу: Шаг

| Экран | Действие пользователя | Крайние случаи.

Пример: для сервиса доставки получили 14 шагов, 6 экранов с пустыми состояниями — этого хватило, чтобы заказчик согласовал объём до начала отрисовки.

2. Вайрфрейм из текстового описания

Промт:

Опиши вайрфрейм экрана [название] в терминах Figma:
фрейм 375x812, auto layout, вертикальный стек, gap 16,
блоки: header, hero, список карточек, sticky CTA.
Для каждого блока укажи: назначение, содержимое, поведение при скролле.

Это не генерация пикселей, а готовое ТЗ на сборку. Auto layout в Figma (свойство layoutMode, отступы itemSpacing) появился в 2019-м и с тех пор стал стандартом — AI отлично оперирует его терминами.

3. Тексты интерфейса вместо рыбы

Забудьте lorem ipsum — он ломает макет, потому что реальные строки короче или длиннее.

Промт:

Напиши микрокопию для экрана [название].
Тон: дружелюбный, без канцелярита.
Дай 3 варианта: заголовок, подзаголовок, кнопка, ошибка, пустое состояние.
Лимиты: заголовок ≤ 40 символов, кнопка ≤ 20.

Результат: три варианта текстов на каждый элемент — можно проверить на юзабилити-тесте, а не спорить о вкусах.

4. Генерация компонентов и их вариантов

Промт:

Спроектируй компонент Button.
Варианты: primary, secondary, ghost, danger.
Состояния: default, hover, focus, disabled, loading.
Опиши свойства компонента (component properties) в Figma:
boolean: hasIcon, isFullWidth; variant: type, size; text: label.

Важно: Figma поддерживает варианты (variants) и свойства компонентов с 2022 года. AI-описание свойств экономит часы на ручной настройке.

5. Проверка макета на доступность (WCAG)

Промт:

Проверь текстовое описание макета на соответствие WCAG 2.2 AA:
контраст текста ≥ 4.5:1, целевые размеры кликов ≥ 24x24 CSS px,
фокус-стили, альтернативный текст.
Верни таблицу: элемент

| критерий | статус | рекомендация.

WCAG 2.2 — рекомендация W3C от 2023 года, добавлены критерии вроде 2.5.8 (Target Size). Проверка через промт не заменяет axe DevTools, но ловит явные промахи до ревью.

6. Автолейаут и адаптивность

Промт:

Перепиши структуру фрейма [имя] под auto layout:
- направление и wrap для каждого контейнера;
- где нужен fill container, где hug contents;
- ограничения min/max width.
Дай список изменений по слоям.

Кейс: на дашборде с 60 слоями промт выявил 9 мест, где ручной размер ломался при смене языка, — правки заняли 15 минут вместо часа.

7. Иконки: единый набор

Промт:

Опиши стиль набора иконок: сетка 24x24, обводка 1.5px,
скруглённые концы, оптический баланс.
Для иконок [список] укажи: метафору, ключевые формы, что не рисовать.

Это бриф для рисования — AI не отрисует SVG идеально, но снимет вопрос «какой стиль у иконки настроек».

8. Дизайн-токены и их связь с кодом

Промт:

Сгенерируй JSON-токены в формате W3C Design Tokens:
{"color": {"primary": {"$type": "color", "$value": "#0A84FF"}}}
Учти: семантические имена, темы light/dark, шкала отступов 4/8/12/16/24.

Спецификация Design Tokens Community Group (W3C) — реальный стандарт, Figma экспортирует токены через плагины (Tokens Studio и др.).

9. Документация дизайн-системы

Промт:

Напиши документацию для компонента [имя].
Разделы: назначение, когда использовать, когда нет,
анатомия, состояния, доступность, примеры кода (React).
Тон: технический, без маркетинга.

Результат: черновик страницы, который остаётся отредактировать, а не писать с нуля.

10. Ревью макета по чек-листу

Промт:

Проведи ревью макета [описание] по чек-листу:
сетка 8pt, выравнивание, консистентность отступов,
переиспользование компонентов, вложенность фреймов.
Верни: замечание

| критичность (high/med/low) | как исправить.

11. Хендофф: спецификация для разработчика

Промт:

Составь handoff-спеку для экрана [имя]:
размеры, отступы, типографика, цвета (токены),
интерактивные состояния, анимации (duration, easing).
Формат — таблица, готовая к вставке в задачу.

12. A/B-варианты одного экрана

Промт:

Предложи 3 варианта экрана [имя] для A/B-теста.
Меняй только один элемент: CTA, порядок блоков или заголовок.
Для каждого укажи гипотезу и метрику успеха.

Где AI ошибается чаще всего

Что остаётся за дизайнером

AI не заменит вкус, эмпатию к пользователю и умение сказать «нет» заказчику. Но он снимает 60–70% рутины: черновики, тексты, спецификации. Правило простое: промт пишется как бриф джуну — чем точнее ограничения (размеры, лимиты, форматы), тем меньше правок.

Начните с одного промта — например, №3 про микрокопию. Скорее всего, вы больше не вернётесь к lorem ipsum.