Искусственный интеллект уже стал частью повседневных рабочих процессов. Он помогает создавать тексты, искать идеи, готовить презентации, генерировать изображения и постепенно занимает свое место в дизайне цифровых продуктов.
Еще недавно первый этап создания страницы – поиск референсов, сбор идей и подготовка черновых концепций – мог занимать у дизайнера несколько часов. Сегодня часть этой работы можно передать нейросетям: за считанные минуты они предлагают варианты структуры, визуальные решения и первые прототипы.
Чтобы кардинально сократить этот этап, мы протестировали в реальной работе пять ИИ-инструментов:
- ХостAI
- Google Stitch
- Figma Make
- WordPress AI
- CodeDesign
Постановка задачи
Перед ИИ стояла конкретная задача – разработать концепцию целевой страницы для журналистов и представителей редакций.
Страница должна была помочь пользователям:
- Оставить заявку на сотрудничество с платформой.
- Узнать о возможностях GdeRabota.ru для медиа: доступе к аналитике зарплат, прогнозам рынка труда, производственному календарю, калькулятору отпускных и конструктору резюме.
- Быстро перейти к одному из ключевых материалов – прогнозу зарплат на будущий год.
- Ознакомиться с правилами использования контента платформы.
- Убедиться в экспертности сервиса благодаря упоминаниям GdeRabota.ru в других СМИ.
В обычном процессе дизайнер сначала собирает визуальные примеры, продумывает структуру страницы, создает первые варианты и проходит несколько этапов согласования.
Мы решили проверить альтернативный сценарий: можно ли с помощью ИИ быстрее получить рабочую основу для будущего дизайна и насколько близким к реальному продукту окажется результат.
ХостAI
Конструктор сайтов на базе ИИ, который позволяет быстро собрать каркас страницы по текстовому описанию. Достаточно описать задачу живым языком – нейросеть генерирует структуру, которую затем можно дорабатывать вручную.
ИИ-конструктор сайтов, который позволяет создавать первые версии страниц с помощью текстового описания. Пользователь формулирует задачу обычным языком, а сервис самостоятельно предлагает структуру, блоки и наполнение.
Плюсы:
- быстро создает базовый каркас страницы по описанию
- предлагает подходящие тексты для основных блоков
- позволяет быстро проверить разные варианты структуры
Минусы:
- итоговые макеты часто выглядят шаблонно и напоминают сайты, созданные в типовых конструкторах
- подходит скорее для быстрого прототипирования, чем для создания уникального дизайна
- глубокая кастомизация отдельных элементов может потребовать дополнительных платных ресурсов
Лимиты:
На бесплатном тарифе удалось создать один проект и протестировать базовые возможности генерации. Для дальнейших изменений и расширенной настройки потребовались дополнительные платные функции.
Google Stitch
ИИ-инструмент от Google Labs для создания интерфейсов сайтов и мобильных приложений на основе моделей Gemini. Сервис позволяет превращать текстовые описания, изображения, наброски и голосовые команды в готовые UI-концепции.
Stitch можно рассматривать как цифровую рабочую область для дизайнерских экспериментов: от первой идеи до прототипа интерфейса.
Плюсы:
- бесплатный доступ при наличии Google-аккаунта
- высокая скорость генерации – можно быстро проверить множество концепций
- поддержка разных форматов входных данных: текст, изображения, эскизы и голос
- возможность экспортировать результат в Figma и код
Минусы:
-
сервис недоступен при использовании российских IP-адресов
Лимиты:
В стандартном режиме доступно около 350 генераций в месяц, в экспериментальном режиме – около 50 генераций.
Figma Make
Встроенный непосредственно в рабочую среду Figma искусственный интеллект, который превращает текстовые описания в рабочие прототипы – с логикой, взаимодействиями и интерфейсами.
ИИ-инструмент внутри экосистемы Figma, который позволяет превращать текстовые запросы в интерактивные прототипы. В отличие от генераторов статичных изображений, сервис пытается создавать интерфейсы с элементами логики и взаимодействия.
Плюсы:
- работает внутри привычной среды Figma – не нужно переносить проекты между сервисами
- создает не только визуальные макеты, но и интерактивные прототипы
- может учитывать существующие компоненты и дизайн-системы
Минусы:
- иногда неправильно интерпретирует структуру страницы или добавляет ненужные элементы
- для получения качественного результата требуются подробные промпты
- запросы на английском языке обычно дают более точные результаты
Лимиты:
Стоимость зависит от тарифа Figma:
- Professional – $16 за редактора в месяц при оплате за год или $20 при помесячной оплате
- Organization – $55 за редактора в месяц
WordPress AI
Встроенный ИИ-конструктор сайтов на платформе WordPress. Достаточно описать идею сайта – и ИИ генерирует дизайн, контент и структуру страницы за считанные секунды.
ИИ-конструктор внутри WordPress, который позволяет создавать сайты по текстовому описанию. Сервис автоматически формирует структуру страницы, дизайн и контент.
Плюсы:
- создает не только визуальный макет, но полноценный сайт с административной частью
- подходит для быстрого запуска страниц без длительной разработки
- удобен для проектов, где важнее скорость запуска, чем уникальность дизайна
Минусы:
- результат строится на основе существующих шаблонов
- уровень качества может сильно отличаться от проекта к проекту
- некоторые функции пока работают нестабильно
Лимиты:
Для публикации сайта потребуется платный тариф WordPress стоимостью от $4 до $45 в месяц.
CodeDesign
ИИ-генератор, который строит интерактивные макеты и позволяет сразу экспортировать их в чистый код (HTML/CSS) или использовать как продвинутый прототип.
ИИ-сервис, который создает интерактивные макеты с возможностью дальнейшего экспорта в HTML/CSS. Инструмент ориентирован на пользователей, которым важно получить результат, близкий к будущей реализации.
Плюсы:
- структура интерфейса хорошо соответствует принципам фронтенд-разработки
- предлагает современные решения для B2B-сервисов и цифровых продуктов
- позволяет быстрее перейти от идеи к рабочему прототипу
Минусы:
- тексты и визуальные элементы часто требуют дополнительной переработки
- для эффективного использования нужны базовые знания принципов веб-разработки
Лимиты:
Бесплатная версия позволяет создать до трех сайтов и разместить их на поддомене сервиса.
Какой результат дал искусственный интеллект в кейсе
В задаче со страницей «Для СМИ» искусственный интеллект быстро предложил визуальные идеи. Это удобно, когда нужно посмотреть разные подходы к одной задаче.
Такой вариант будет полезен как отправная точка. Он позволит увидеть общую композицию страницы и понять, какие блоки нужны для дальнейшей работы.
Но после этого дизайнеру всё равно потребуется внимательно доработать макет. Нужно проверить, правильно ли выстроена иерархия, не перегружена ли страница, достаточно ли заметна форма заявки, понятно ли сформулирована ценность для СМИ, корректно ли отображаются блоки на мобильных устройствах.
Кроме того, дизайнер должен оценить, насколько макет соответствует стилю GdeRabota.ru, удобно ли его будет реализовать разработчикам и не возникает ли визуального шума из-за лишних деталей.
Искусственный интеллект может предложить основу. Но превратить эту основу в качественный продукт – задача дизайнера.
ИИ может значительно ускорить подготовительный этап и помочь найти направление. Но финальное качество продукта по-прежнему зависит от человека, который умеет оценивать решения, дорабатывать детали и превращать идею в полноценный интерфейс.
Хотите сравнить результат работы ИИ с финальным вариантом? Итоговый дизайн страницы можно посмотреть в действующем разделе «Для СМИ».
Изображение на обложке: Magnific
Комментарии