Проектирование UI/UX через текстовые Wireframes
8.1. Иерархия элементов на экране
Перед тем как просить ИИ сделать интерфейс, нужно описать его структуру. Для этого не требуется Figma — достаточно текстовых схем (Wireframes).
Описывайте экран сверху вниз, от главного к второстепенному.
┌─────────────────────────────────────────────────────────┐ │ HEADER (Шапка) │ │ [Логотип] [Профиль / Выход]│ ├─────────────────────────────────────────────────────────┤ │ MAIN CONTENT │ │ [Заголовок страницы] │ │ [+ Добавить новую задачу] (Кнопка) │ │ │ │ ┌─────────────────────────────────────────────────────┐ │ │ │ Список задач: │ │ │ │ [x] Купить молоко [Удалить] │ │ │ │ [ ] Позвонить клиенту [Удалить] │ │ │ └─────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────┤ │ FOOTER (Подвал) │ │ (c) 2026 Мой Сервис. Все права защищены. │ └─────────────────────────────────────────────────────────┘
8.2. Текстовое описание состояний экрана (States)
Ошибка новичка (НЕПРАВИЛЬНО): Описать только финальный вид экрана, когда все данные загружены и отображаются идеально. Почему так делать нельзя: ИИ создаст статический интерфейс. Если база данных будет пуста или произойдет сбой сети, пользователь увидит пустой белый экран без каких-либо объяснений или вечный значок загрузки.
Как нужно делать правильно:
Явно прописывать в ТЗ 4 обязательных состояния любого экрана: 1. Загрузка (Loading State): Что видит пользователь, пока данные скачиваются (отображать анимацию плашек-скелетонов). 2. Пустое состояние (Empty State): Что отображается, если данных еще нет («У вас пока нет созданных задач. Нажмите +, чтобы создать первую»). 3. Заполненное состояние (Success State): Стандартное отображение списка данных. 4. Состояние ошибки (Error State): Что видит пользователь при сбое связи («Не удалось загрузить данные. Нажмите Обновить страницу»).