Дизайн-система перестала быть роскошью для больших команд. Сегодня даже небольшие продуктовые команды хотят иметь единый источник правды для UI, но ресурсов на полноценный UI-кит часто нет. Нейросети уже умеют генерировать компоненты, токены и документацию — если правильно поставить задачу. В этой подборке — проверенные промты, которые я использую в работе, чтобы за один спринт собрать в Figma основу дизайн-системы: от цветовых токенов до готовых компонентов и их описания. Каждый промт — с реальным примером и пояснением, как его адаптировать под ваш проект.
1. Генерация цветовых токенов с проверкой на контраст
Промт:
Ты — эксперт по дизайн-системам. Сгенерируй набор цветовых токенов для [продукт] в формате JSON. Используй нотацию: primary-100…primary-900, neutral-100…neutral-900, success, warning, error. Для каждого токена укажи HEX и проверь контрастность по WCAG 2.1: для текста на фоне — не ниже 4.5:1, для крупного текста — 3:1. Если контраст не проходит, предложи альтернативный оттенок. Верни таблицу: токен, HEX, контраст с белым, контраст с чёрным, вердикт.
Пример использования: для финтех-приложения с тёмной темой. Нейросеть выдала палитру, где primary-500 имел контраст 3.2:1 с белым — недостаточно для текста. Промт сразу предложил заменить на primary-600 (#1A5CFF), контраст вырос до 5.1:1. Экономия времени на ручной проверке — около часа.
2. Создание типографической шкалы
Промт:
Создай типографическую шкалу для веб-приложения с межстрочным интервалом 1.5. База — 16px. Используй модульную шкалу с шагом 1.25 (major third). Верни таблицу: уровень, размер (px), line-height (px), вес, пример использования (заголовок H1, текст, подпись). Учти адаптивность: для мобильных уменьши базовый размер до 14px.
Пример: для SaaS-дашборда нейросеть предложила шкалу от 12 до 48px. Мы взяли её за основу и добавили токены в Figma через плагин Tokens Studio. Время на согласование шкалы с командой сократилось вдвое.
3. Генерация UI-кита: базовые компоненты
Промт:
Ты — UI-дизайнер. Опиши структуру компонента Button для дизайн-системы: варианты (primary, secondary, ghost), размеры (sm, md, lg), состояния (default, hover, active, disabled, loading). Для каждого варианта укажи: цвет фона, цвет текста, отступы, радиус скругления, тень. Используй токены из предыдущего шага. Верни в виде JSON, где ключи — имена вариантов.
Пример: получили JSON, который затем импортировали в Figma через плагин «JSON to Figma». Компонент собрался за 10 минут вместо ручного создания 15 вариантов.
4. Автодокументация для компонентов
Промт:
Напиши документацию для компонента [название] в формате Markdown. Включи: назначение, анатомию (из каких элементов состоит), правила использования, состояния, примеры кода для React (с использованием дизайн-токенов). Добавь раздел «Частые ошибки» с 2-3 примерами. Пиши кратко, но информативно.
Пример: для компонента Card нейросеть сгенерировала описание с примерами на React и пропсами. Мы вставили его в Figma через плагин «Docs» — документация всегда под рукой у дизайнеров и разработчиков.
5. Проверка консистентности токенов
Промт:
Проанализируй список токенов (приведён ниже) на дубликаты и несогласованность. Найди токены с одинаковыми значениями, но разными именами, и предложи объединить. Также проверь, чтобы все семантические токены (success, error) имели достаточно контраста с фоном. Верни отчёт в виде таблицы: проблема, рекомендация.
Пример: в проекте было два токена: primary-500 и brand-main с одинаковым HEX. Нейросеть предложила оставить один, а второй пометить как deprecated. Это упростило поддержку темы.
6. Генерация иконок в едином стиле
Промт:
Сгенерируй SVG-иконки для набора [список действий: поиск, корзина, профиль, настройки, уведомления]. Стиль: линейные, толщина обводки 2px, скруглённые концы, размер 24x24. Используй цвет currentColor. Верни код каждой иконки в отдельном блоке.
Пример: нейросеть выдала SVG, которые мы сразу вставили в Figma как компоненты. Иконки получились консистентными, без необходимости подгонять каждую вручную.
7. Создание сетки и отступов
Промт:
Предложи систему отступов для дизайн-системы на основе 8px. Опиши, как использовать отступы для типовых блоков: карточка, модальное окно, форма. Верни таблицу с примерами: элемент, отступ сверху/снизу/слева/справа. Учти адаптивность: для мобильных уменьши отступы на 25%.
Пример: для карточек товаров нейросеть предложила отступы 16px внутри и 24px между карточками. Мы добавили эти значения как токены в Figma, что ускорило вёрстку.
8. Генерация тёмной темы на основе светлой
Промт:
На основе светлой цветовой схемы (токены приложены) сгенерируй тёмную тему. Сохрани семантику: primary остаётся акцентным, neutral инвертируется. Проверь контрастность текста на фоне (не ниже 4.5:1). Верни таблицу: токен, светлая тема, тёмная тема, контраст в тёмной теме.
Пример: для приложения с светлой темой нейросеть предложила тёмную палитру, где neutral-100 стал #1A1A1A, а neutral-900 — #F5F5F5. Контраст текста составил 12:1, что отлично.
9. Автоматическое создание вариантов компонента
Промт:
Для компонента Input создай варианты: default, error, success, disabled. Опиши, как меняются цвета границы, фона и текста в каждом состоянии. Используй токены: border-color, background-color, text-color. Верни JSON с вариантами.
Пример: JSON импортировали в Figma через плагин «Variants». Компонент Input получил 4 состояния автоматически, без ручного переключения.
10. Генерация документации для дизайн-системы
Промт:
Напиши вводную статью для дизайн-системы [название]. Объясни, зачем нужна система, как ей пользоваться дизайнерам и разработчикам, какие инструменты используются (Figma, Tokens Studio). Добавь раздел «Как внести изменение» с пошаговой инструкцией. Объём — 500 слов.
Пример: статья стала главной страницей внутренней документации. Новички быстрее вникают в процесс.
11. Проверка доступности компонентов
Промт:
Проверь доступность компонента Button (описание приложено) по чек-листу WCAG 2.1 AA: контраст текста, размер кликабельной области (не менее 44x44px), видимость фокуса. Верни отчёт: критерий, статус (пройден/не пройден), рекомендация.
Пример: нейросеть выявила, что кнопка размером 32px не проходит по критерию 2.5.5 (размер цели). Мы увеличили до 44px.
12. Создание семантических токенов для spacing
Промт:
Сгенерируй семантические токены для отступов на основе базовой шкалы 4px. Названия: spacing-xs (4px), spacing-sm (8px), spacing-md (16px), spacing-lg (24px), spacing-xl (32px). Опиши, где какой использовать. Верни таблицу с примерами.
Пример: токены внедрили в Figma через плагин, и дизайнеры перестали использовать произвольные значения.
13. Генерация анимационных токенов
Промт:
Предложи токены для анимаций: длительность (fast, normal, slow) и кривые (ease-in, ease-out, ease-in-out). Укажи значения в мс и CSS-функции. Дай рекомендации по использованию для типовых взаимодействий (hover, появление модалки).
Пример: токены пригодились при передаче дизайна в разработку — анимации стали консистентными.
14. Автоматизация ревью дизайн-системы
Промт:
Ты — лид дизайнер. Проверь список компонентов (приложен) на соответствие принципам: переиспользование, минимализм, доступность. Найди дубликаты и предложи, что объединить или удалить. Верни рекомендации в виде списка.
Пример: нейросеть нашла два похожих компонента — Card и Tile, предложила объединить в один с вариантами. Мы так и сделали.
15. Генерация тестовых данных для дизайн-системы
Промт:
Сгенерируй набор текстовых данных для наполнения компонентов (карточки, списки, таблицы). Используй реалистичные примеры: имена, названия компаний, суммы, даты. Верни в JSON. Данные должны быть разной длины, чтобы проверить адаптивность вёрстки.
Пример: использовали для проверки, как компоненты выглядят с реальным контентом. Выявили проблему с переполнением в таблице.
Эти промты — не волшебная таблетка, но они экономят часы рутины. Главное — адаптировать их под свой контекст и проверять результаты. Начните с токенов и базовых компонентов, постепенно расширяя систему. А если хотите глубже разобраться в теме — изучите официальные гайды по WCAG и документацию Figma API. Удачного спринта!
Комментарии