Дизайн
Промты для дизайнерских задач — от мокапов до дизайн-систем.
Промты для дизайнерских задач — от мокапов до дизайн-систем.
- Начальный18 (23%)
- Средний34 (43%)
- Продвинутый28 (35%)
UI-компоненты
Генерация и варианты компонентов, ревью визуала, состояния.
UX-флоу
Карты экранов, user stories, проектирование пользовательских путей.
Дизайн-системы
Токены, типографика, цвета, гайдлайны, документация.
Брендинг
Айдентика, тон голоса, концепции и направления визуала.
Motion
Микроанимации, переходы, easing — движение, которое улучшает, а не мешает.
Адаптив
Брейкпойнты, mobile-first, touch vs hover, плотность контента.
Типографика
Выбор шрифтов, пары, шкалы, межстрочный ритм, кириллица.
Все промты в разделе Дизайн
Сгенерировать варианты UI-компонента
Создать 4-6 разных подходов к компоненту с разным визуальным языком и трейд-оффами.
UI-критика с глазом дизайнера
Жёсткая оценка визуала: типографика, сетка, иерархия, ритм, цвет, детали.
Дизайн пустого состояния
Не «пусто», а возможность объяснить ценность и направить к первому действию.
Карта пользовательского пути
От триггера до достижения цели: шаги, эмоции, барьеры, возможности.
Декомпозиция фичи в user stories
Разбить фичу на маленькие истории формата «As a … I want … so that …» с acceptance criteria.
Дизайн-токены из референса
Извлечь систему цветов, типографики, теней, радиусов и spacing из примера и оформить как токены.
Документация компонента
Документация по компоненту: API, варианты, состояния, доступность, использование.
Гайд по тону голоса бренда
Определить голос бренда через атрибуты, антипримеры и шаблоны типичных коммуникаций.
Исследование нейминга
Сгенерировать 20-30 кандидатов в разных категориях и оценить по критериям.
Дизайн loading-состояний
Скелетоны, спиннеры, прогресс-бары: что когда применять и как не раздражать.
Информационная архитектура
Группировка контента в навигационное дерево, тестирование через card-sort, выбор IA-паттерна.
Дизайн ошибок и edge-состояний
Все способы как может пойти не так: формы, сеть, авторизация, лимиты — и что показывать.
Иконочная система
Набор, вес, размеры, правила использования, accessibility — иконки как система, не разнобой.
План внедрения тёмной темы
Не «инвертируй цвета», а отдельная палитра: токены, контраст, тени, иллюстрации.
Позиционирование продукта
Одна формула: для [кого] · которые [боль] · продукт — это [категория] · который [ценность] · в отличие от [альтернатив].
Слоганы и тэглайны
20-30 кандидатов в трёх режимах: функциональный, эмоциональный, провокационный.
Микроанимации интерфейса
Hover, focus, активные состояния, toast'ы, переходы — мелкая моторика интерфейса.
Переходы между страницами
Когда нужны, какие выбрать, как не сделать сайт «торчащим».
Easing и тайминг анимаций
Кривые easing для разных случаев, длительности, ритм — почему «всё ease-in-out 300ms» это плохо.
Стратегия брейкпойнтов
Не «3 устройства», а содержательные точки. Где менять layout и зачем.
Mobile-first рефакторинг
Перевод desktop-first дизайна на mobile-first без полной переделки.
Touch vs hover паттерны
Что работает с пальцем, что с курсором — и как сделать чтобы работало везде.
Подбор пары шрифтов
Headline + body шрифт которые работают вместе. Принципы, примеры, проверка.
Вертикальный ритм типографики
Line-height, spacing, baseline grid — текст который дышит и читается.
Типографика для кириллицы
Чем кириллица отличается от латиницы, какие шрифты с ней работают, что не работает.
Пустые состояния: три режима и иерархия CTA
Разведи first-run, no-results и error в три разных дизайна с правильной иерархией действий.
Микро-взаимодействия в формах
Focus, валидация, успех, восстановление: тайминг и поведение полей шаг за шагом.
Построение цветовой системы
От raw-палитры к семантическим токенам, темам и контрасту — с проверкой на edge-кейсах.
Spacing scale и вертикальный ритм
Базис 4/8, шкала отступов, вертикальный ритм типографики и допустимые исключения.
Оркестрация loading-состояний
Skeleton vs spinner vs progressive: бюджет тайминга, выбор техники, переходы без скачков.
Онбординг за 3-5 шагов до первого value
Карта первого ценного момента, friction map, drop-off recovery — без длинных туров.
Mobile-first rethink: переосмыслить desktop-макет
Не просто 'сжать' desktop — пересмотреть IA, навигацию и прогрессивно усложнить от мобильного к большому экрану.
Аудит раскладки и группировки блоков
Прогон страницы через «старший дизайнер видит её впервые»: где раскладка проседает, что объединить, что разделить, что переставить — с конкретными ходами, а не «надо подумать».
Modal vs Drawer vs Bottom-Sheet — что выбрать
Decision matrix для выбора overlay-паттерна по контексту, частоте, фокусу и mobile-поведению. Без шаблонного «modal для всего».
Дизайн плотной таблицы данных
Спецификация для рабочей таблицы: sticky-заголовки, sort/filter, row actions, режимы плотности, поведение на mobile. Без «впихиваем спредшит».
Иерархия информации на дашборде
Что показать первым, что вторым, что вообще убрать. Hero-метрика, comparison, trends, actions — без «13 виджетов и пользователь сам разберётся».
Выбор навигации: sidebar / tabs / breadcrumbs / mega-menu
Какой паттерн навигации работает для какой структуры. Когда комбинировать, когда конфликт, что унесёт пользователя в тупик.
Cmd+K command bar — спецификация UX
Командная палитра, которая реально ускоряет работу: ranking, секции, shortcuts, recently used, empty state, fuzzy match. Без «поиск с симпатичной анимацией».
Система нотификаций и toast'ов
Таксономия по 6 типам, позиция, время жизни, dismiss, a11y, stacking. Без «спам зелёных тостов на каждый клик».
Дизайн поискового поля и подсказок
Что в placeholder, как показывать recents, как обрабатывать no-results и did-you-mean, scope-chips. Поиск, который реально находит.
Дизайн фильтров и сортировки
Chips vs facets vs sidebar — что выбрать. Multi-select UX, applied-state, reset, persist в URL. Без «гнусной collapsible-панели слева».
Карточки: плотность и ритм сетки
Compact / comfortable / cozy режимы карточек. Ритм grid'а, иерархия внутри карточки, что вынести наружу. Без «padding на глаз».
Деконструкция hero-секции: promise, proof, action
Что юзер видит в первые 5 секунд. Promise / proof / action — три части, без которых hero не работает. Жёсткий разбор и план переделки.
Выбор из N опций: дизайн UI решения
Спецификация интерфейса для выбора из 3+ вариантов: comparison table, recommendation, smart default. Без «вот тебе 7 кнопок, удачи».
Многошаговая форма: дизайн UX
Прогресс, save-state, back-поведение, validation timing, recovery после ошибки. Без «5 шагов и потерянные данные на refresh».
Autosave: спецификация UX
Когда сохранять (debounce / blur / interval), как индицировать (saved / saving / error), conflict resolution. Без «иногда теряется, мы исследуем».
Дизайн undo / redo: что отменяемо, как, до куда
Scope (per-action / per-session), timeline UI, keyboard, что НЕ должно быть undoable. Без «undo есть, но не для всего».
Подтверждение destructive-действий
Типы (delete / leave / cancel / destroy), inline vs modal, type-to-confirm, undo как альтернатива. Без «Are you sure?» на каждый клик.
UX страницы результатов поиска
Ranking signals на UI, snippets, no-results, did-you-mean, refinement. Что делать, когда поиск нашёл 47 000 результатов, и юзер хочет один правильный.
Infinite scroll vs pagination: что выбрать
Decision matrix по контексту контента, deep linking, accessibility, back-button, performance. Без «бесконечный скролл потому что современно».
Дизайн view для сравнения объектов
Таблица / cards / overlay — что выбрать. Sticky колонки, mobile collapse, highlight отличий. Без «открой 2 вкладки и переключайся».
Конвенция имён компонентов
Система имён: Button / IconButton / ButtonGroup, префиксы Base/With/As, namespacing, борьба с MyButton2 и дубликатами.
Процесс депрекации компонента
Пометить deprecated (badge, console warn, types), дать миграцию (codemod, before/after), удалить. Версии, support window, коммуникация.
Темизация дальше тёмной темы
Multi-theme: бренд-темы, density modes, accessibility modes. Стратегия токенов, переключение, что не масштабируется.
Чеклист ревью нового компонента
Что проверить перед мержем компонента в design system: API, a11y, RTL, тёмная тема, минимизация props, docs, story, тесты.
План миграции дизайн-токенов
Рефактор существующих токенов без поломок прод-компонентов: codemod, opt-in flag, deprecation window, коммуникация.
Стратегия prefers-reduced-motion
Что отключать полностью, что заменять на fade, как тестировать и какие элементы НИКОГДА не должны быть motion-зависимыми.
Stagger reveal списков: оркестровка
Тайминг 60-100ms между элементами, easing, max-batch 12, performance-бюджет и accessibility.
Scroll-triggered анимации без боли
Когда триггерить (% viewport), Intersection Observer pattern, INP impact, что НЕ делать — parallax длинных страниц, locked scroll.
Performance-бюджет для motion
60 FPS на mid-range mobile, INP < 200ms, optimization checklist: transform-only, will-change по уму, GPU layers, composite.
Container queries: где @container побеждает @media
Когда переходить с viewport-брейкпойнтов на контейнерные. Конвенции именования, fallback, реальные сценарии.
Fluid typography через clamp(): формула и edge cases
Шрифты и spacing, которые сами масштабируются без брейкпойнтов. Как считать preferred, что НЕ клампить, accessibility.
Density modes: переключатель comfortable / cozy / compact
Как у Linear и Notion: переключатель плотности интерфейса. Token strategy, что НЕ масштабировать, сохранение preference.
Tabular nums для таблиц и данных
Где обязательны tabular-nums, как включить через font-feature-settings и font-variant-numeric, fallback-стек и как проверить выравнивание колонок.
Настройка шкалы заголовков (clamp, tracking, leading)
Типографическая шкала h1-h6 на clamp(), правильные tracking и leading на каждом размере, тест на длинных русских словах без переноса в неудобном месте.
Multilingual font stack: Cyrillic / CJK / Arabic
Fallback chain для проекта с несколькими письменностями: что грузить, что брать из системы, как тестировать отсутствие tofu (□).
Аудит и проектирование brand book
Что должно быть в живом brand book, что выкинуть, как держать его актуальным и как использовать в ревью.
Прогон текстов через tone-of-voice критерии
Пропустить 20 реальных текстов через критерии формальности, ритма, словаря, эмоции и табу. Получить отчёт с оценками и правками.
Дизайн-система от нуля до Storybook
Orchestrator: дизайн-система за один проход. 7 фаз: audit → tokens → primitives → components → docs → Storybook → governance. Готовый стартер на TypeScript + Tailwind.
Оркестратор редизайна страницы (7 фаз)
Полный цикл редизайна одной страницы: от анализа текущей версии до плана измерения результата. 7 фаз с чёткими артефактами на каждой.
A11y-дизайн за пределами WCAG-чеклиста
Доступность как часть UX, а не как чеклист в конце. Когнитивная, моторная, низкое зрение, нейроразнообразие, инклюзивные дефолты.
Иллюстрационная система
Дизайн системы иллюстраций: палитра, геометрия, люди/без, соотношение к фото, правила масштабирования и консистентности.
Арт-дирекция фотосъёмки
Brief для фотосессии: subject, color grading, lighting, что НЕ снимать (клише), лицензирование, usage guidelines, brand consistency.
Empty state для dashboard в day-zero
Что показать в дашборде, когда у пользователя нет данных: sample data vs placeholder, onboarding integration, action vs explainer.
Премиум-позиционирование: какой именно «премиум»?
Stripe-премиум vs Apple vs Hermès vs Linear vs Aesop — пять разных архетипов. Выбрать один и оттолкнуться от него во всех визуальных решениях.
Editorial-раскладка: журнальная сетка для премиум-сайта
Асимметричная сетка, крупные серифные заголовки, осознанные пустоты, pull quotes и drop caps. Как Stripe Press, Aesop, NYT Mag.
Аудит на сдержанность: что убрать, чтобы стало премиально
Премиум — это не «добавить полировку», это «убрать 30%». Проход по странице с целью subtraction: иконки, тени, бордеры, бейджи, CTA-дубли.
Полировка поверхностей: бордеры, тени, радиусы как у премиум-сайтов
Конкретные значения, которые отличают «сделано в Figma за час» от премиума. Subtle borders 1px, тени с низким blur, шкала радиусов 4/8/12, никаких неоновых градиентов.
Скролл-хореография: кинематографичный ритм страницы
Раскрытие секций при скролле, осознанный ритм, parallax с умом. Что и когда анимировать, чтобы ощущалось как кино, а не как 2014.
Премиум-сайт end-to-end: от archetype до запуска
Orchestrator: премиум-сайт за один проход. 8 фаз: archetype → type stack → colour & surfaces → editorial layout → hero → motion → restraint → governance. Готовый план на неделю работы с конкретными артефактами на каждой фазе.