MantisСтудия шаблонов
Шаблоны/Рекомендуемые

Шаблоны интерфейса

12 шаблонов

Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон
Просмотреть шаблон

Используйте взаимодействие, а не оформление.

Выберите шаблон по решению, которое он помогает принять. Сохраните необходимые состояния, затем адаптируйте его визуальный язык к вашему продукту.

Уточните ваш запрос для сборки
Начало работы

Композитор контекста

Ввод запроса, который собирает информацию о работе, исходным материале, ограничениях и формате вывода до того, как ассистент начнет.

РезультатМеньше циклов уточнения и меньше отточенных ответов на неправильный вопрос.

Использовать когда

Качество ответа зависит от контекста, который пользователь может забыть предоставить.

Избегайте, когда

Достаточно одного короткого вопроса, и дополнительная настройка замедлила бы пользователя.

Анатомия

  • Область работы
  • Вложения контекста
  • Контролы ограничений
  • Формат вывода
  • Действие отправки

Необходимые состояния

  • Пусто
  • Готово
  • Загрузка контекста
  • Блокировано отсутствием ввода
  • Отправлено

Создать подсказку

Build a Context Composer for [product and audience].

The component must help a user define:
- the job to be done
- the source material the assistant may use
- hard constraints
- the required output format

Keep one primary text field visible. Put optional controls in a compact expandable area. Show attached sources as removable items with file type and size. Disable the primary action only when a genuinely required input is missing, and explain what is missing beside the action.

Include empty, ready, uploading, validation-error, and submitted states. Support keyboard submission without making Enter submit multiline text accidentally. Use explicit labels, a visible focus state, and an aria-live status for uploads and submission.
Начало работы

Полезные стартовые идеи

Пустое состояние, которое предлагает небольшой набор исходных точек, ориентированных на результат, вместо общих примеров подсказок.

РезультатПустое рабочее пространство становится осознанным первым шагом.

Использовать когда

Пользователи знают общую задачу, но могут не знать, с чего начать или на что способен помощник.

Избегайте, когда

В рабочем процессе есть одно очевидное первое действие или пользователь уже предоставил запрос.

Анатомия

  • Заголовок результата
  • Три-пять стартовых вариантов
  • Подсказка контекста
  • Индивидуальный путь

Необходимые состояния

  • Первый визит
  • Возвращающийся пользователь
  • Выбран стартовый вариант
  • Нет подходящего стартового варианта

Создать подсказку

Build a Useful Starters empty state for [workflow].

Offer three to five starting actions based on outcomes, not features. Each option should be a complete verb phrase such as "Compare two supplier proposals" rather than a vague topic such as "Analysis".

Selecting an option should prefill the main composer with a structured draft while keeping it editable. Include a clear path for a custom request. If prior work exists, replace generic starters with recent or relevant actions.

Design first-visit, returning-user, selected, and no-relevant-suggestion states. Keep the choices keyboard accessible and make the selected result obvious without relying only on color.
Проверка работы

Стэк доказательств

Поверхность обзора, которая размещает каждое утверждение рядом с его источником, уверенностью и нерешенными оговорками.

РезультатРецензенты могут проверять утверждения один за другим, вместо того чтобы искать их по библиографии.

Использовать когда

Пользователи должны проверять исследования, политику, финансовую, медицинскую или другую работу, зависящую от источников.

Избегайте, когда

Контент является творческим, субъективным или не содержит фактических утверждений.

Анатомия

  • Требование
  • Отрывок источника
  • Ссылка на источник
  • Метка уверенности
  • Ограничение
  • Действие проверки

Необходимые состояния

  • Поддерживаемый
  • Частично подтверждено
  • Противоречивые источники
  • Нет источника
  • Проверено

Создать подсказку

Build an Evidence Stack for [research workflow].

Render the answer as a sequence of reviewable claims. Keep every claim physically connected to its supporting sources, publication dates, and a plain-language confidence label. Show unresolved caveats before the user approves the claim.

Do not hide weak evidence behind a single overall score. Let reviewers mark a claim as checked, request a better source, or exclude it from the final output. Preserve the original source link and enough quoted context to verify the interpretation.

Include supported, partly supported, conflicting, unsourced, loading, and reviewed states. Make the relationship between claims and sources understandable to screen-reader users.
Проверка работы

Одобрение решения

Сосредоточенный блок одобрения с предложенным результатом, последствиями и отдельными путями для одобрения, исправления и отклонения.

РезультатОдобрение становится информированным и проверяемым вместо неопределенного «да» или «нет».

Использовать когда

Человеку необходимо принимать ответственные решения перед продолжением работы.

Избегайте, когда

Действие легко отменяется и не требует формальной контрольной точки.

Анатомия

  • Резюме предложения
  • Удар
  • Ссылка на доказательство
  • Одобрить
  • Запросить изменения
  • Причина отклонения

Необходимые состояния

  • В ожидании проверки
  • Одобрено
  • Запрошенные изменения
  • Отклонено
  • Истекло

Создать подсказку

Build a Decision Approval component for [workflow].

Present one decision at a time. State what is being approved, what will happen next, which inputs informed it, and whether the action can be reversed. Keep Approve, Request changes, and Reject visually distinct without making the destructive choice dominant.

Require a short reason for rejection. Let a reviewer request changes with specific feedback. After any decision, replace the controls with a receipt containing the reviewer, time, decision, and next action.

Include awaiting-review, approved, changes-requested, rejected, expired, and permission-error states. Trap no focus, support keyboard use, and announce the saved decision.
Проверка работы

Сравнение черновиков

Вид сравнения, который объясняет значимые различия между двумя результатами и позволяет пользователям выбирать по разделам.

РезультатПользователь выбирает на основе отличий, которые имеют значение, а не просматривая два массива текста.

Использовать когда

Пользователям необходимо сравнивать исправления, результаты модели или конкурирующие подходы.

Избегайте, когда

Альтернативы отличаются так мало, что краткое резюме изменений будет яснее.

Анатомия

  • Общий краткий вариант
  • Резюме различий
  • Совпадающие разделы
  • Выбрать раздел
  • Окончательный выбор

Необходимые состояния

  • Загрузка обоих черновиков
  • Сопоставимый
  • Отсутствующий раздел
  • Смешанный выбор
  • Финализировано

Создать подсказку

Build a Draft Comparison for [content or decision workflow].

Align equivalent sections from two drafts and summarize the meaningful differences before showing full text. Let the user choose one complete draft or pick preferred sections from each. Clearly identify any section that exists on only one side.

Do not use a generic red and green diff for subjective writing. Describe tradeoffs in plain language, such as "shorter and more direct" or "includes two additional sources". Keep the original brief visible in a compact reference area.

Include loading, comparable, missing-section, mixed-selection, finalized, and comparison-error states. Preserve reading order on mobile by presenting one aligned section at a time.
Операции агента

План агента

Предварительный просмотр плана, который отделяет автономные шаги от контрольных точек, рисков и предполагаемых результатов.

РезультатПользователи понимают, что агент будет делать и где он должен остановиться для получения одобрения.

Использовать когда

Агент выполнит несколько действий или обратится к внешним системам перед тем, как вернуть результат.

Избегайте, когда

Задача представляет собой одно низкорисковое чтение или преобразование.

Анатомия

  • Цель
  • Упорядоченные действия
  • Область действия инструмента
  • Контрольные точки
  • Риски
  • Результаты

Необходимые состояния

  • Черновой план
  • Требуется одобрение
  • Запущено
  • План изменен
  • Завершено
  • Остановлено

Создать подсказку

Build an Agent Plan component for [agent workflow].

Start with the goal and expected deliverables. Show ordered actions with the tool or system each action will touch. Visually separate actions the agent may perform automatically from actions that require human approval.

Surface material risks beside the relevant action, not in a detached warning box. If the plan changes while running, show what changed and why before continuing. Provide Start, Edit plan, and Stop controls with one clear primary action.

Include draft, needs-approval, running, changed-plan, completed, stopped, and failed states. Use an ordered semantic list and expose progress changes through an aria-live region.
Операции агента

Квитанция о получении инструмента

Краткая запись того, что агент отправил инструменту, что изменилось и где можно проверить результат.

РезультатАктивность инструмента понятна без вывода сырых логов в диалог.

Использовать когда

Агент считывает или изменяет внешний сервис, и пользователю нужна прослеживаемость.

Избегайте, когда

Вызов инструмента является внутренней деталью реализации и не имеет последствий для пользователя.

Анатомия

  • Название инструмента
  • Назначение
  • Область ввода
  • Сводка результатов
  • Измененные элементы
  • Исходные данные

Необходимые состояния

  • В очереди
  • Запущено
  • Успешно
  • Частично
  • Неудачно
  • Не выполнено

Создать подсказку

Build a Tool Receipt for [agent and tool].

Summarize why the tool was called, what data or records were in scope, what changed, and where the result can be inspected. Keep raw request and response data available in a collapsed technical detail area.

For write actions, list created, updated, and removed items separately. For read actions, report the query scope and result count. Provide an undo action only when reversal is genuinely supported.

Include queued, running, succeeded, partial, failed, and undone states. Never expose secrets or personal data in the collapsed details. Use status text and icons or shape, not color alone.
Операции агента

Устойчивый прогресс

Длительный обзор прогресса, организованный вокруг завершенных результатов, текущей работы и прерываний, которые можно восстановить.

РезультатПрогресс остается надежным при обновлениях, повторных попытках и передаче задач.

Использовать когда

Задача может выполняться минуты или часы, и пользователи могут покинуть её и вернуться.

Избегайте, когда

Операция обычно завершается в течение нескольких секунд.

Анатомия

  • Общий статус
  • Завершенные результаты
  • Текущее действие
  • Ожидаемая работа
  • Точка возобновления
  • Отменить

Необходимые состояния

  • Запуск
  • Запущено
  • В ожидании
  • Прервано
  • Возобновление
  • Завершено
  • Отменено

Создать подсказку

Build a Durable Progress view for [long-running workflow].

Organize progress around real deliverables rather than an invented percentage. Show what is complete, what is happening now, what is waiting, and whether the user may safely leave. Persist enough state that a returning user sees the same task and its latest update.

If work is interrupted, explain whether it can resume from the last completed action or must restart. Keep Cancel available but separate from the main progress narrative. Show time only when it is measured, not guessed.

Include starting, running, waiting-for-input, interrupted, resuming, completed, cancelled, and stale-state variants. Announce meaningful stage changes without announcing every minor log line.
Операции агента

Контрольная точка человека

Контрольная точка перед действием для необратимых, дорогих, общедоступных или операций, изменяющих разрешения.

РезультатПользователь видит точную цель и последствия перед подтверждением.

Использовать когда

Следующее действие отправляет, публикует, удаляет, покупает, разворачивает или изменяет доступ.

Избегайте, когда

Данное действие является обычным обратимым редактированием, уже охваченным запросом пользователя.

Анатомия

  • Заявление о действии
  • Точная цель
  • Последствие
  • Стоимость или охват
  • Подтвердить
  • Вернуться назад

Необходимые состояния

  • Готово к подтверждению
  • Цель изменена
  • Подтверждение
  • Завершено
  • Неудачно

Создать подсказку

Build a Human Checkpoint for [high-consequence action].

Use a direct sentence that names the action and exact target. Show the immediate consequence, whether it is reversible, and any real cost, audience reach, or permission change. Do not use a generic "Are you sure?" dialog.

The confirm label must name the action, such as "Publish article" or "Delete 12 records". Keep the safe return action visible. If the target changes after the checkpoint opens, invalidate confirmation and require review again.

Include ready, changed-target, confirming, completed, permission-error, and failed states. Move initial focus to the heading, return focus on close, and do not confirm from a single Enter keypress on a destructive action.
Поддержка принятия решений

Матрица соответствия модели

Сравнение моделей на основе задачи, которое превращает стоимость, скорость, надежность и возможности в четкую рекомендацию.

РезультатРекомендация привязана к работе, а не к универсальному утверждению о лучшей модели.

Использовать когда

Пользователь должен выбрать модель или инструмент для конкретной повторяющейся задачи.

Избегайте, когда

Страница является общей таблицей лидеров без определенной рабочей нагрузки.

Анатомия

  • Определение работы
  • Критерии решения
  • Кандидатные строки
  • Компромиссы
  • Рекомендация
  • Дата источника

Необходимые состояния

  • Требуется работа
  • Сравнение
  • Рекомендовано
  • Недостаточно доказательств
  • Данные устарели

Создать подсказку

Build a Model Fit Matrix for [defined job].

Ask for the job, budget boundary, latency tolerance, required context, and quality threshold before ranking candidates. Show only criteria that affect this job. Provide a recommendation with explicit tradeoffs and a lower-cost or faster fallback.

Keep benchmark sources and dates visible. Mark missing or incomparable data rather than converting it into a zero. Avoid one overall score unless the weighting formula is visible and editable.

Include needs-job, comparing, recommendation-ready, insufficient-evidence, outdated-data, and source-error states. Tables must have proper headers and remain readable as stacked candidate summaries on small screens.
Поддержка принятия решений

Исследовательское краткое описание

Компактный исследовательский результат, который разделяет ответ, поддерживающие выводы, неизвестные факты и следующие шаги.

РезультатЧитатели получают ответ, важный для принятия решения, не теряя доказательств или степени неопределенности.

Использовать когда

Исследование должно привести к решению или ясному следующему шагу.

Избегайте, когда

Пользователь запросил исходную коллекцию данных или исчерпывающий обзор литературы.

Анатомия

  • Вопрос
  • Краткий ответ
  • Ключевые выводы
  • Доказательства
  • Неизвестные
  • Рекомендуемое следующее действие

Необходимые состояния

  • Определение объема
  • Исследование
  • Черновик
  • Требуются доказательства
  • Проверено

Создать подсказку

Build a Research Brief component for [audience and decision].

Lead with the research question and a short answer. Follow with the few findings that materially affect the decision, each connected to evidence. Keep unknowns and conflicting evidence in their own visible section.

End with a recommended next action and who should own it. Do not turn the brief into a generic article or hide uncertainty in footnotes. Allow reviewers to request evidence for a specific finding.

Include scoping, researching, draft, needs-evidence, reviewed, and blocked states. Use semantic headings, descriptive source links, and a print layout that preserves source references.
Поддержка принятия решений

Панель восстановления

Состояние ошибки, которое объясняет, что завершилось, что не удалось и какой путь вперед является наименее рискованным.

РезультатПользователи восстанавливаются без повторения завершенной работы или догадок о том, что изменило систему.

Использовать когда

Многозадачная операция может завершиться с ошибкой после выполнения части работы или изменения внешнего состояния.

Избегайте, когда

Сообщение проверки на уровне поля может решить проблему на месте.

Анатомия

  • Ошибка понятным языком
  • Выполненная работа
  • Незавершенная работа
  • Безопасная повторная попытка
  • Запасной вариант
  • Технические детали

Необходимые состояния

  • Повторная попытка доступна
  • Резервный вариант доступен
  • Требуется разрешение
  • Требуется ввод
  • Невозможно продолжить

Создать подсказку

Build a Recovery Panel for [workflow].

Explain the failure in plain language. Separate completed work from unfinished work and state whether retrying will duplicate any action. Offer the safest next step as the primary action and a realistic fallback when one exists.

Keep technical diagnostics in an expandable area with a copy button. If permission or user input is required, say exactly what is needed. Never erase partial results when the user retries.

Include safe-retry, fallback, needs-permission, needs-input, cannot-continue, and recovered states. Move focus to the error heading, use an assertive live announcement only for blocking failures, and preserve entered data.