Дизайн-брифы и визуальная коммуникация

Бесплатный список передачи дизайна разработке.

Список ресурсов, состояний, спецификаций и ответственных.

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

Нужны расширение Chrome и аккаунт.
25 бесплатных задач автоматизации в месяц суммарно для всех инструментов. Действуют ограничения провайдера в браузере.

ЧТО НУЖНО ПОДГОТОВИТЬ

Объём дизайна и требования разработки.

ОТПРАВНАЯ ТОЧКА

Задача, которую можно настроить под себя.

Скопируйте здесь. Вставьте в WebAct, когда будете готовы.

Эта страница подготавливает промпт. Задача выполняется в WebAct.

01

Настройте задачу под себя.

Проверьте промпт выше. Добавьте свою цель и важные требования.

02

Перенесите задачу в WebAct.

Откройте WebAct, вставьте задачу и предоставьте исходные материалы. Начните с Chat для черновика или пояснения; используйте Task для одобренного действия в браузере или файла.

03

Проверьте полезную часть.

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

ПРАКТИЧЕСКОЕ РУКОВОДСТВО

Как передавать дизайн вместе с поведением и состояниями.

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

Адаптируйте процесс под свою задачу.

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

Что вы предоставляете
Объём дизайна и требования разработки.
Что вы получите
Список ресурсов, состояний, спецификаций и ответственных.

Посмотрите входные данные и результат.

Иллюстративные входные и выходные данные · учебный пример, а не реальный запуск WebAct

Полей ввода: Пример

Handoff review: search field and result cards supplied, but loading, empty and error states missing. Responsive rules and keyboard behavior also unspecified.

Готовый пример

Required handoff additions:
- Loading: indicator, pending-control behavior and announcement to confirm.
- No results: useful message and a way to revise the query.
- Error: recovery action and retained-query behavior.
- Keyboard: focus order, submission and result navigation.
- Responsive: card columns and long-content behavior.
- References: assets, tokens and content constraints.
Assign a reviewer to each unresolved behavior before implementation; the current screens do not define these decisions.
Скачать этот пример

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

Решения и устранение проблем.

Достаточно ли передать только экран удачных результатов поиска?

Включите загрузку, пустой результат, ошибку и клавиатуру: это реальные части пути пользователя.

Почему реализация расходится с макетом после первого совпадения?

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

Попробуйте на собственном источнике.

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

Настроить и скопировать задачу ↑
ПЕРЕД НАЧАЛОМ

Использование WebAct.

Промпт и пример доступны здесь. Выполните задачу в расширении WebAct для Chrome.

Этот инструмент бесплатный?

Здесь можно бесплатно копировать и редактировать промпт. Для использования с WebAct установите расширение Chrome, создайте и подтвердите аккаунт и подключите доступную сессию ChatGPT в браузере. План Free включает 25 задач автоматизации, запускаемых пользователем, за календарный месяц суммарно для всех инструментов. Обычный браузерный Chat учитывается отдельно; действуют ограничения провайдера.

Узнайте об общем контексте в нашем политике конфиденциальности и о выборе между Chat и Task.

ОТ ПРОМПТА К ВАШЕЙ РАБОТЕ

Перенесите задачу на свою страницу.

Установите WebAct, добавьте исходные материалы и адаптируйте результат.

Установить WebAct