ChatGPT вместо арт-директора: 12 промтов, которые собирают дизайн-систему без дизайнера

ChatGPT вместо арт-директора: 12 промтов, которые собирают дизайн-систему без дизайнера

Вы фронтендер, инди-разработчик или продакт, который остался без дизайнера? Знакомо: макеты в Figma делает кто-то «на полставки», а токены и компоненты живут в голове. По данным исследования Design Systems Report (2025), более 60% команд считают отсутствие выделенного дизайн-лида главным тормозом для масштабирования UI. Но есть хорошая новость: ChatGPT (или любой сильный LLM) уже сегодня закрывает рутину дизайнера — от генерации палитры и типографики до UX-ревью и аудита доступности. Нужны правильные промты.

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

1. Генерация дизайн-системы с нуля

Задача: быстро получить структурированную дизайн-систему (цвета, типографика, отступы, тени) для нового продукта.

Промт:

Ты — UI/UX-лид. Создай минимальную дизайн-систему для [тип продукта] с аудиторией [описание]. Включи:
- цветовую палитру (primary, secondary, accent, neutral, semantic) с HEX-кодами и уровнями контраста по WCAG 2.1
- типографическую шкалу (заголовки h1–h4, body, caption) с размерами, межстрочными интервалами и весами
- сетку отступов (4px или 8px), радиусы скруглений, тени
- примеры использования для каждого токена.
Формат вывода: таблица Markdown + краткое обоснование выбора.

Пример входа: «Тип продукта: SaaS для аналитики; аудитория: аналитики и продакты, 25–45 лет, много работы с таблицами».

Результат: ChatGPT выдаёт палитру с проверкой контраста (например, primary #2563EB на белом даёт 4.6:1), шкалу от 12px до 32px, сетку 8px. Это уже можно переносить в Figma как стили.

2. Генерация дизайн-токенов в формате JSON

Задача: получить токены для передачи в код (CSS-переменные, Tailwind config, Style Dictionary).

Промт:

На основе этой дизайн-системы [вставьте описание] сгенерируй дизайн-токены в JSON-формате, совместимом со Style Dictionary. Раздели на категории: color, typography, spacing, border-radius, shadow. Для цветов укажи значение и описание. Выведи только JSON без пояснений.

Пример входа: описание системы из промта №1.

Результат: готовый JSON, который можно скормить в сборку токенов. Экономит часы ручного переноса.

3. Аудит контраста и доступности (WCAG)

Задача: проверить цвета и компоненты на соответствие WCAG 2.1 AA.

Промт:

Проверь следующие цвета на соответствие WCAG 2.1 AA (контраст 4.5:1 для обычного текста, 3:1 для крупного). Для каждой пары «текст/фон» укажи коэффициент контраста и вердикт. Если не проходит — предложи альтернативный цвет, сохраняя оттенок.
Пары: [список HEX-пар].

Пример входа: «#767676 на #FFFFFF; #2563EB на #F3F4F6; #FFFFFF на #10B981».

Результат: ChatGPT рассчитывает контраст (например, #767676 на белом — 4.54:1, проходит) и даёт рекомендации. Это не заменяет инструменты вроде Stark, но ускоряет первичный скрининг.

4. UX-копирайтинг для интерфейса

Задача: написать тексты для кнопок, ошибок, пустых состояний и онбординга.

Промт:

Ты — UX-писатель. Напиши микротексты для [экран/компонент] в продукте [описание]. Тон: [дружелюбный/формальный/экспертный]. Учти:
- кнопки: глагол + объект, до 3 слов
- ошибки: что случилось + как исправить
- пустые состояния: объяснение + призыв к действию
- подсказки: одно предложение, без жаргона.
Выведи в таблице: элемент, текст, обоснование.

Пример входа: «Экран регистрации в финтех-приложении, тон дружелюбный, аудитория 20–30 лет».

Результат: готовые формулировки, которые можно сразу вставлять в макет.

5. Ревью макета по скриншоту (Figma-ассистент)

Задача: получить обратную связь по макету без дизайнера.

Промт:

Ты — старший продуктовый дизайнер. Проанализируй скриншот интерфейса [прикрепите изображение]. Оцени:
- визуальную иерархию (заголовки, акценты)
- читаемость и контраст
- выравнивание и отступы (сетка)
- согласованность компонентов
- соответствие эвристикам Нильсена (укажи, какие нарушены).
Дай 5 конкретных рекомендаций с приоритетом (high/medium/low).

Пример входа: скриншот дашборда с таблицей и фильтрами.

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

6. Генерация компонента с вариантами

Задача: спроектировать компонент (кнопка, инпут, карточка) со всеми состояниями.

Промт:

Создай спецификацию компонента [название] для дизайн-системы. Опиши:
- анатомию (части)
- состояния: default, hover, focus, active, disabled, error, loading
- размеры (sm, md, lg) с padding, шрифтом, иконками
- токены для каждого состояния
- правила использования и антипаттерны.
Формат: таблица + пример CSS для базового состояния.

Пример входа: «Компонент: кнопка primary в SaaS-интерфейсе».

Результат: полная спека, которую можно отдать в разработку или перенести в Figma как component set.

7. Чек-лист дизайн-ревью для пул-реквеста

Задача: проверять UI-изменения в коде без дизайнера.

Промт:

Составь чек-лист дизайн-ревью для пул-реквеста, затрагивающего UI. Включи пункты по:
- соответствию токенам (цвета, отступы, типографика)
- адаптивности (breakpoints)
- доступности (alt-тексты, фокус, контраст)
- консистентности с дизайн-системой
- производительности (изображения, шрифты).
Для каждого пункта — как проверить (инструмент или шаг).

Результат: готовый чек-лист, который можно вставить в шаблон PR.

8. Генерация палитры для тёмной темы

Задача: адаптировать светлую тему под тёмный режим без потери контраста.

Промт:

На основе светлой палитры [HEX-коды] сгенерируй тёмную тему. Сохрани смысловые роли (primary, surface, error и т.д.), но подбери цвета так, чтобы контраст текста на фоне был не ниже 4.5:1. Предложи значения для фона, поверхности, текста, границ и акцентов. Выведи таблицу с обоснованием.

Пример входа: палитра из промта №1.

Результат: согласованная тёмная тема, которую не стыдно показать пользователям.

9. UX-исследование: генерация вопросов для интервью

Задача: быстро подготовить сценарий пользовательского интервью.

Промт:

Ты — UX-исследователь. Составь 10 открытых вопросов для глубинного интервью с [сегмент] о [продукт/фича]. Избегай наводящих вопросов. Раздели на блоки: опыт, боли, ожидания. Добавь введение и правила проведения.

Пример входа: «Сегмент: фрилансеры, фича: инструмент для выставления счетов».

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

10. Аудит доступности по коду (a11y)

Задача: проверить HTML/CSS на типичные ошибки доступности.

Промт:

Проанализируй фрагмент HTML/CSS на предмет ошибок доступности (WCAG 2.1 AA). Найди проблемы с:
- семантикой (заголовки, лендмарки)
- фокусом и клавиатурной навигацией
- alt-текстами и ARIA-атрибутами
- контрастом (если указаны цвета).
Для каждой проблемы предложи исправление с кодом.

Пример входа: фрагмент с модальным окном без role="dialog".

Результат: конкретные правки, которые можно сразу применить.

11. Генерация иконок в SVG по описанию

Задача: получить простые иконки без дизайнера.

Промт:

Сгенерируй SVG-иконку [описание] в стиле [outline/filled], размер 24x24, с толщиной линии 2px, скруглёнными концами. Используй currentColor для заливки. Выведи только код SVG.

Пример входа: «Иконка: корзина покупок, outline, 24x24».

Результат: готовый SVG, который можно вставить в проект. Важно: проверяйте лицензионную чистоту — сгенерированные иконки могут быть похожи на существующие.

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

Задача: описать компоненты и токены для команды.

Промт:

Напиши документацию для дизайн-системы [название] на основе следующих токенов и компонентов [вставьте JSON/описание]. Для каждого компонента укажи: назначение, анатомию, состояния, правила использования, пример кода (React + CSS). Добавь раздел «Начало работы».

Результат: структурированная документация, которую можно положить в репозиторий или Notion.

Эти 12 промтов закрывают 80% рутины, с которой сталкивается команда без дизайнера. Они не заменяют насмотренность и вкус, но снимают страх «чистого листа» и ускоряют рутинные решения. Главное — не слепо копировать вывод, а адаптировать под контекст: проверяйте контраст инструментами, тестируйте на пользователях, итерируйте. Начните с одного промта — например, с генерации дизайн-системы — и постепенно встраивайте остальные в рабочий процесс. Дизайн-система перестанет быть роскошью и станет рабочим инструментом даже в одиночку.