interface-design

Простым языком

Перед тем как рисовать интерфейс, надо понять как им будут пользоваться. Этот скилл помогает продумать весь путь пользователя — от входа до результата — ещё до написания кода.

Claude задаёт правильные вопросы и рисует схему текстом: где что находится, как переходить между экранами. Ты видишь результат заранее и можешь поправить до того как написан хоть один файл.

Что делает

Скилл interface-design проектирует пользовательские интерфейсы на уровне концепции: информационную архитектуру, user flows, wireframes в ASCII, описание компонентов и взаимодействий. Это шаг ДО написания кода.

Claude выступает UX-дизайнером: задаёт правильные вопросы про аудиторию, цели, сценарии использования — и только потом предлагает решение.

Когда использовать

• Начинаешь новый экран или раздел — нужна концепция
• Есть задача "сделай удобно" без конкретного макета
• Нужно согласовать UI до начала вёрстки
• Хочешь проверить user flow — все ли сценарии покрыты
• Проектируешь форму, wizard или сложный интерактивный элемент

Как работает — пошагово

1. Claude задаёт вопросы: кто пользователь, какова цель, какой контекст использования
2. Строит user flow: шаги пользователя от входа до результата
3. Рисует ASCII-wireframe: расположение элементов, иерархия
4. Описывает компоненты: что показывает, какие состояния (empty, loading, error)
5. Указывает micro-interactions: что происходит при hover, click, validation
6. Предлагает альтернативные варианты (A/B) если есть неопределённость

Промпты для Claude

Спроектируй страницу /questions/ask.
Пользователь: разработчик с вопросом про код.
Цель: задать вопрос быстро, без лишних полей.
Обязательно: заголовок, тело (markdown), теги.
Опционально: ссылка на репо/коддсандбокс.

Нужен дизайн уведомлений в хедере.
Типы уведомлений: ответ на вопрос, принятый ответ, реакция.
Поведение: badge с количеством, dropdown при клике, отметить прочитанным.
Мобильная версия: отдельная страница /notifications.

Пример ASCII-wireframe

┌─────────────────────────────────────────────┐
│  [≡] StackOverVibe        [🔍] [Login]       │
├─────────────────────────────────────────────┤
│                                             │
│  Задай вопрос                               │
│  ─────────────────────────────────────────  │
│  Заголовок *                                │
│  ┌───────────────────────────────────────┐  │
│  │ Как сделать X с помощью Y?            │  │
│  └───────────────────────────────────────┘  │
│  Подсказка: Сформулируй кратко и конкретно  │
│                                             │
│  Описание проблемы *                        │
│  ┌───────────────────────────────────────┐  │
│  │ [markdown editor]                     │  │
│  │                                       │  │
│  └───────────────────────────────────────┘  │
│                                             │
│  Теги *  [react] [typescript] [+добавить]   │
│                                             │
│  [Предпросмотр]         [Опубликовать →]    │
└─────────────────────────────────────────────┘

Автоматизация

После согласования дизайна — переход к вёрстке:

# Шаг 1: Дизайн (этот скилл)
"Спроектируй страницу /questions/ask"

# Шаг 2: После одобрения wireframe — вёрстка
"Отлично, верстай по этому wireframe.
Стек: Next.js + Tailwind + ретро-хакер стиль."

Частые вопросы

Нужно ли согласовывать каждый экран?

Для простых экранов (список, детальная страница) — нет, сразу кодь. Для сложных взаимодействий (wizard, drag-and-drop, форма с условиями) — сначала wireframe.

Как описать дизайн мобильной версии?

Попроси Claude нарисовать второй wireframe с шириной 375px. Он покажет, как элементы перестроятся: стек вместо сетки, нижняя навигация вместо хедера.