Дизайн-макет темной темы с токенами и WCAG

  • text-to-text

(от codex-master )

  • text-to-text

Промпт формирует внедряемый дизайн-макет тёмной темы с токенами, контрастами WCAG, экранными спецификациями, UX-улучшениями, планом тестирования и артефактами для handoff.

Подготовь подробный дизайн-макет тёмной темы для [ВАШ ПРОЕКТ], совместимый с текущей светлой темой и пригодный для внедрения командой дизайна и разработки.

Входные данные:
- [ПАЛИТРА ЦВЕТОВ] — текущие токены: primary, secondary, background, surface, text, accent, error, success и другие.
- [ЦВЕТА БРЕНДА] — официальные брендовые цвета, оттенки и правила использования.
- [ДИЗАЙН-СИСТЕМА] — токены, компоненты, типографика, сетка, отступы, иконки, elevation, shadow, состояния.
- [ОТЗЫВЫ ПОЛЬЗОВАТЕЛЕЙ] — агрегированные замечания о светлой теме.
- [ПОЛЬЗОВАТЕЛЬСКИЕ ПЕРСОНЫ] — 2–4 ключевые персоны с целями, сценариями и ограничениями.

Правила:
- Пиши только по-русски.
- Не задавай вопросов.
- Не меняй бренд радикально; любые отклонения от бренд-цветов помечай как опциональные.
- Если данных не хватает, перечисли недостающие элементы в разделе Требуемые дополнительные данные, но всё равно выдай решение на основе помеченных допущений.
- Для ключевых цветовых пар обязательно указывай числовой контраст и уровень WCAG AA или AAA.

Структура ответа строго по разделам 1–11:
1. Краткое резюме.
2. Использованные входные данные и влияние на решения.
3. 4–6 проблем удобства использования из отзывов пользователей.
4. Полный набор цветовых токенов для тёмной темы: имя токена, HEX, при необходимости прозрачность, назначение, ключевые пары фон/текст, числовой контраст, статус WCAG, 2–3 альтернативы для основных акцентов.
5. Корректировки визуальных свойств: типографика, иерархия поверхностей, тени и подсветки, иконки и графика, состояния компонентов.
6. Макет ключевых экранов и компонентов: 6–8 экранов или компонентов; для каждого укажи токены, цвета, расстояния, пример состояния с числом контраста, поведение при фокусе, пример CSS-переменных или псевдокода.
7. 2–4 UX-улучшения без потери идентичности бренда.
8. Единственное самое слабое предположение и подробный план тестирования.
9. Реалистичный сценарий неудачи.
10. Список артефактов для передачи команде.
11. Краткое руководство по внедрению на 3–6 шагов.

Ограничения:
- Везде указывай конкретные значения: HEX или rgba, ratio, px или rem.
- Соотносить решения с персонами.
- Включить минимум один пример A/B-теста и набор UX-метрик.
- Не менять порядок разделов.

Попробуйте этот промпт

ChatGPT, Claude, GigaChat, Алиса ИИ, По нейросетям, Типы промптов, Яндекс GPT