Компоненты и состояния
Компонент должен помогать выполнить действие или понять результат. Ниже — образцы в том же CSS, которым оформляется документация.
Действия
В одном контексте — одно основное действие. Синяя pill-кнопка обозначает его; вторичное действие выглядит спокойнее. Текст называет результат: «Подключить сайт», «Проверить доступ», «Сохранить план».
| Состояние | Поведение |
|---|---|
| Обычное | Действие и его назначение понятны без наведения |
| Наведение | Акцент темнеет; размеры не меняются |
| Фокус | Внешняя рамка 3 px; она не обрезается контейнером |
| Выполнение | Подпись объясняет операцию; повторная отправка исключена |
| Недоступно | Причина видна рядом; важную информацию не прячем в tooltip |
Основные кнопки имеют область нажатия не меньше 44 × 44 px. Кнопке с одной иконкой нужна доступная подпись, например «Отправить сообщение». Навигацию делаем ссылкой, действие на странице — кнопкой.
Одно поле для начала
Поле принимает адрес сайта или обычный вопрос. Примеры запросов помогают, но не требуют выбора сценария. Enter отправляет сообщение; пустое сообщение не отправляется. Для будущего многострочного ввода Shift+Enter добавляет строку.
Образец поля, только для просмотра. Действующая демонстрация — на главной.
Placeholder — подсказка, а не замена label. Ошибка появляется рядом с полем, сохраняет введённый текст и объясняет способ исправления. На телефоне поле остаётся доступным при открытии клавиатуры; страницу можно прокручивать.
Диалог
Сообщение пользователя находится на мягком фоне. Ответ агента — на фоне страницы, без лишней рамки. Автор подписан текстом. Длинные адреса и сообщения переносятся, а история остаётся доступной с клавиатуры и для screen reader.
Агент задаёт один необходимый вопрос за раз. До настройки доступа объясняет, зачем он нужен. Секреты вводятся через отдельную защищённую форму, не в историю диалога. Регистрация появляется при сохранении работы или подключении сайта.
В текущей демонстрации сообщения живут только в памяти страницы. Нет запроса к агенту, сканирования, записи на сервер или сохранения после перезагрузки. Нельзя добавлять анимацию «проверяем сайт», если проверка не выполняется.
Статусы
Доступ проверенНужен ваш ответНе удалось подключиться
Это визуальные образцы, а не состояние подключённого сайта. В продукте статус подкрепляется результатом операции. Ошибка не очищает введённые данные; повторный запуск доступен там, где операция безопасно повторяется.
Документация
Слева — разделы, в центре — статья, справа на широком экране — её оглавление. Выбранный раздел выделен мягким фоном и текстом. Поиск остаётся доступным. На телефоне навигация сворачивается в штатное меню VitePress.
Таблицы сравнивают данные, блоки замечаний объясняют ограничения. Используем их по необходимости: основной материал остаётся обычным связным текстом. Декоративные линии с главной не повторяем за статьёй.