Нейросети для дизайна сайта

Нейросети для дизайна сайта

19873
1
Время чтения: 9 минут

Искусственный интеллект помогает быстрее придумывать дизайн сайта, рисовать иконки, писать текст для страниц. Чтобы вы знали, какими сервисами пользоваться, мы протестировали 6 нейросетей для дизайна и 8 вспомогательных сервисов — в них можно генерировать элементы сайта, текст, лица людей.

Если вы дизайнер — советуйте своим клиентам OkoCRM. Предприниматели получат мощный инструмент для управления продажами и управления лидами, а вы — 20% комиссии с их оплаты по тарифу.

Рекомендуйте клиентам OkoCRM за вознаграждение 20%
Ваши клиенты перестанут терять заявки с рекламы, а вы получите хорошее вознаграждение.
Узнать больше

Зачем использовать нейросети в дизайне

С помощью искусственного интеллекта можно решить сразу 3 задачи.

1. Разработать дизайн. Есть нейросети для создания дизайна сайта, которые по текстовому описанию сгенерируют прототип. Сервисы на основе ИИ делают это быстро, за 10 минут можно набросать десяток вариантов и показать заказчику — пусть выбирает, какой вариант больше нравится.

2. Создать элементы сайта. Можно нарисовать иконку, кнопку или форму от руки → ИИ превратит это в готовый элемент.

3. Написать текст. ИИ поможет сгенерировать разные тексты: блок о компании, заголовок для лендинга, призыв к действию.

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

Чтобы получить хороших результат, надо правильно писать запрос. Иначе дизайн будет так себе. Или вообще не дизайн. Как написать правильный запрос:

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

2. Описывайте подробно, что хотите получить. Неправильно: дизайн сайта для ветклиники. Правильно: баннер для лендинга 9:16, синий фон, на нём изображен лабрадор и сиамская кошка.

3. Выставляйте настройки, если такие есть. Например, в Midjourney можно указать формат, качество и уровень стилизации картинки вот такими настройками: —ar 16:9, —4К, —stylize 1000.

Некоторые сервисы наоборот путаются в подробных описаниях заданий. Если написать: нарисуй дизайн сайта для ветклиники, получится неплохой сайт. А вот детали собьют ИИ с толку. Короче: надо тестировать.

Нейросети создающие дизайн страницы сайта

Ни одна нейросеть не заменит дизайнера, но они помогут выполнить работу быстрее. Стоит использовать сразу несколько сервисов, например, сгенерировать картинку для шапки сайта в Midjourney, обработать её в Photoshop или Figma, затем добавить в Webflow или TeleportHQ, собрать прототип.

Appypie website

Что умеет: генерирует веб-страницы

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: от 15 £ в месяц

Для использования сервиса нужно пройти регистрацию, ввести email и код. Регистрация с помощью гугл аккаунта не доступна. Дальше придётся привязать карту, чтобы активировать 7-дневную бесплатную пробную версию. Без подключения оплаты протестировать сервис не получится. В этом его минус.

Из плюсов: есть много настроек. Можно выбрать разные цвета и шрифты, варианты прототипов сайтов и даже мобильных приложений.

Так можно настроить дизайн сайта с помощью нейросети.
Так можно настроить дизайн сайта с помощью нейросети.
Такие сайты делает ИИ. Источник.
Такие сайты делает ИИ. Источник.

DreamStudio

Что умеет: генерирует картинки

Сложность использования: ❌

Результат: ⭐⭐

Стоимость: от 10 $

Здесь лучше писать запросы на английском языке, но это не гарантирует хороший результат. Протестировать Dream Studio можно бесплатно. После регистрации пользователю дают 25 токенов — внутреннюю валюту, которую можно тратить на запросы. Когда закончатся, нужно докупать, минимально — 1000 токенов за 10 $.

В настройках можно выбрать количество изображений: от 1 до 10. За каждую картинку отнимают 2,6 токена. Если нарисуете 4 иллюстрации, снимут 10,4 токена. Если 10, снимут 26 токенов.

Я зарегистрировалась и протестировала Dream Studio по нескольким запросам, пытаясь подобрать слова так, чтобы ИИ меня понял. Это оказалось сложнее, чем со многими другими нейросетями. Идём от простого запроса к сложному.

Вот что Dream Studio рисует по запросу «прототип сайта для ветклиники».
Вот что Dream Studio рисует по запросу «прототип сайта для ветклиники».

За эти 4 неудачные картинки у меня забрали 10 токенов. Дальше попробую генерировать по 2.

Запрос: сайт ветеринарной клиники. Собака-ветеринар — это сильно.
Запрос: сайт ветеринарной клиники. Собака-ветеринар — это сильно.
Но даже если убрать упоминание ветклиники из запроса, всё равно получится обычная картинка.
Но даже если убрать упоминание ветклиники из запроса, всё равно получится обычная картинка.

Могу сделать вывод: создать дизайн сайта с помощью нейросети сложно, но с её помощью можно делать иллюстрации.

Midjourney

Что умеет: генерирует любые картинки, дизайн сайта тоже

Сложность использования: ❌❌❌❌

Результат: ⭐⭐⭐⭐⭐

Стоимость: от 8 $

Midjourney — нейросеть, рисует дизайн сайта и любые картинки по запросу: логотипы, баннеры, визитки. Это один из лучших сервисов для генерации иллюстраций, но испытать его бесплатно нельзя. Минимальный тариф стоит 8 $, оплатить с российской карты не получится, надо заводить виртуальную зарубежную.

Midjourney понимает сложные запросы, главное писать их на английском, понятно, без воды и витиеватых фраз. А ещё здесь много дополнительных настроек, например:

  • «—no dogs» — означает что чего-то не должно быть на картинке, например, никаких собак на иллюстрации
  • «—ar 9:16» — для настройки формата картинки
  • «— chaos 50» — устанавливает, насколько неожиданным станет результат, от 0 до 100, 0 — что-то обыденное, 100 — очень креативное
  • «—stylize 20» — для установления уровня стилизации — насколько художественным будет изображение от 0 до 1000
  • «—nigi» — рисуем картинку в стиле аниме

Все настройки описаны на сайте сервиса. Можно поиграться и добавить параметры от себя, например, «4К» — картинка будет в качестве 4К. Вот что умеет генерировать Midjourney.

Запрос: high-resolution website, website UI design, ocean protection website, figma awards, flat color, cinema ticketing website. Не хватает только формата, Midjourney по умолчанию рисует квадратные картинки.
Запрос: high-resolution website, website UI design, ocean protection website, figma awards, flat color, cinema ticketing website. Не хватает только формата, Midjourney по умолчанию рисует квадратные картинки.
Запрос: high resolution website, graphic design studio website, website UI design, Orange, green, blue, pink, beautiful website, FIGMA AWARD, CSS design, Modern Website.
Запрос: high resolution website, graphic design studio website, website UI design, Orange, green, blue, pink, beautiful website, FIGMA AWARD, CSS design, Modern Website.
Запрос: beautiful modern website landing page design for a plumbing company, website design, UI UX website, website template, website about High pressure vacuum servie, menu with service, website about plumbing.
Запрос: beautiful modern website landing page design for a plumbing company, website design, UI UX website, website template, website about High pressure vacuum servie, menu with service, website about plumbing.
Midjourney и дизайн для приложения сгенерирует.
Midjourney и дизайн для приложения сгенерирует.

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

Нарисуй сложный лазурно-голубой интерфейс приложения для iOS под названием «Souvenir Scout». Главный экран разделен на две основные части. В верхней части преобладает яркая карта высокого разрешения с маленькими маркерами, указывающими места расположения сувениров.

В нижней части представлена карусель сувениров, доступных для покупки, с высококачественными изображениями и краткими описаниями. В нижней части экрана находится панель навигации с четырьмя опциями: кнопка «Домой», корзина покупок для сувениров, компас для навигации и кнопка профиля пользователя.

Midjourney разделил экран на 2 части только на втором и четвёртом рисунках, но все 4 варианта получились хорошие — каждый по своему. Эта нейросеть — топовый инструмент для генерации референсов. Конечно, дизайн придётся дорабатывать вручную — ни один сервис не справится полностью самостоятельно.

TeleportHQ

Что умеет: конструировать интерфейс

Сложность использования: ❌❌

Результат: ⭐⭐⭐⭐

Стоимость: от 15 € в месяц

В TeleportHQ можно бесплатно создать один проект, для этого нужно зарегистрироваться. А дальше собираем и настраиваем сайт по шаблонам из галереи. Процесс напоминает создание картинок в сервисах типа Canva.

Сначала выбираем понравившийся шаблон → проходим обучение → настраиваем шаблон. Ещё здесь можно добавить прототип из Figma. Так выглядит процесс настройки в TeleportHQ.

Здесь нужно собирать сайт самостоятельно.
Здесь нужно собирать сайт самостоятельно.

Webflow

Что умеет: конструировать интерфейс

Сложность использования: ❌❌

Результат: ⭐⭐⭐⭐

Стоимость: от 14 $

У Webflow такие же функции, как и у TeleportHQ. По сути это конструктор, в котором можно собрать сайт: выбрать шрифты, цвета, кнопки, настроить структурные элементы. Здесь более подробное обучение: пользователя шаг за шагом учат создавать веб-страницу и её мобильную версию.

Так выглядит обучение.
Так выглядит обучение.
Вот такие сайты можно создавать в Webflow. Источник.
Вот такие сайты можно создавать в Webflow. Источник.

Galileo AI

Что умеет: генерирует лендинги

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: бесплатно

Сервис генерирует UI-макеты, их можно загрузить в Figma и работать с ними дальше. Работает просто: создаёт макет по текстовому описанию. Как Midjourney, только вместо картинки сразу макет. Сейчас Galileo AI работает в тестовом режиме, можно подать заявку на его использование и протестировать.

Пишем задание → получаем готовый экран. Источник.
Пишем задание → получаем готовый экран. Источник.
Подпишитесь на OkoCRM в Telegram
Узнавайте первым про обновления и полезные инструменты продаж. Учим, как надо работать в системе. Собираем фидбек и делимся новостями.
Канал OkoCRM

В помощь дизайнеру

ChatGPT

Что умеет: пишет текст

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: бесплатно

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

Чат-бот работает бесплатно, но на версии GPT-3.5. Чтобы получить доступ к продвинутой версии GPT-4, нужно покупать подписку — 20 $ в месяц.

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

Такой дизайн можно получить, используя ChatGPT и Midjourney.
Такой дизайн можно получить, используя ChatGPT и Midjourney.

Ещё пробуем, как ChatGPT напишет текст для лендинга. Для этого даю подробное задание.

Напиши текст для лендинга ветеринарной клиники. Текст состоит из 3-х блоков. Блок 1: «Ветеринарная клиника — лечим с любовью». Напиши 2 предложения о 10-летнем опыте лечения и заботливых врачах. Блок 2: «О клинике». Напиши 4 предложения: у нас есть квалифицированные врачи, мы проводим лабораторные исследования, мы лечим всех животных, мы заботимся, как о своих. Блок 3: «Груминг». Напиши 5 преимуществ груминга в нашей клинике.

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

ChatGPT не работает в РФ, даже если включать VPN. Чтобы пользоваться чат-ботом, нужно завести виртуальный номер и пройти регистрацию с его помощью.

Инструкция: как подключить ChatGPT в России →

AutoDraw

Что умеет: преобразует рисунки

Сложность использования: ❌❌

Результат: ⭐⭐⭐

Стоимость: бесплатно

AutoDraw как Paint, только с искусственным интеллектом. Здесь можно нарисовать что-то от руки, а сервис обработает рисунок. Подойдёт не для всех картинок, так как AutoDraw распознаёт только часть предметов. Например, иконку с изображением телефонной трубки он не узнал, а вот нарисованного кота опознал и смог преобразовать.

Такой рисунок получился.
Такой рисунок получился.

Если не умеешь рисовать, а очень надо, AutoDraw выручит. Только изображение не получится уникальным: здесь просто много разнообразных шаблонов рисунков. Иллюстрацию можно отредактировать, сделать непохожей на шаблон и уже в изменённом виде добавить на сайт. Так интереснее.

Например, вот так выглядит картинка на сайте.
Например, вот так выглядит картинка на сайте.

RemoveBg

Что умеет: удаляет фон

Сложность использования: ❌

Результат: ⭐⭐⭐⭐⭐

Стоимость: от 9 $

С помощью RemoveBg можно за минуту удалить фон, не придётся стирать его вручную ластиком. А ещё здесь есть инструмент замены фона. Сервис хорошо удаляет фон, не оставляет недочищенных мест, но на всякий случай есть редактор, чтобы подправить недочёты.

Вот так быстро можно убрать фон и оставить только наушники, потом добавить их на сайт.
Вот так быстро можно убрать фон и оставить только наушники, потом добавить их на сайт.
Можно заменить фон. Только тень нужно добавить заново — её ИИ тоже стёр.
Можно заменить фон. Только тень нужно добавить заново — её ИИ тоже стёр.

Сервис бесплатный, но есть ограничения: скачиваем картинку маленького размера. Чтобы скачать полное изображение, нужно заплатить один кредит. После регистрации пользователь как раз получает один кредит. Если потратите, придётся покупать новые. 40 кредитов стоят 9$.

Справа условия скачивания, слева — прекрасно удалённый фон с изображения.
Справа условия скачивания, слева — прекрасно удалённый фон с изображения.
Подпишитесь на Telegram OkoCRM
Новости команды OkoCRM, обновления в системе, полезные инструменты для продаж.
Перейти в канал OkoCRM

Looka

Что умеет: генерирует логотипы

Сложность использования: ❌❌

Результат: ⭐⭐⭐⭐

Стоимость: от 20 $

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

Looka — один из немногих инструментов, в котором можно получить логотип без водяных знаков. И сразу добавить его на плашки для веб-сайта.

В Looka просто работать.
В Looka просто работать.
Такой результат можно получить.
Такой результат можно получить.
И сразу добавить логотип на плашку.
И сразу добавить логотип на плашку.

Imglarger

Что умеет: улучшает качество фото

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: от 9 $

Imglarger или AI Image Enlarger делает фотографии и иллюстрации чётче, поможет увеличить картинку и не потерять качество. Бесплатно можно обработать до 8 изображений в месяц. Если нужно больше, надо покупать подписку.

Если увеличить маленькую картинку, она станет размытой. В AI Image Enlarger качество станет лучше.
Если увеличить маленькую картинку, она станет размытой. В AI Image Enlarger качество станет лучше.

Альтернатива — Neural Love. Сервис тоже хорошо вытягивает качество картинок, иногда справляется лучше Imglarger, например, со старыми снимками.

This Cat Does Not Exist

Что умеет: создаёт картинки кошек

Сложность использования: ❌

Результат: ⭐⭐⭐

Стоимость: бесплатно

Если вдруг срочно нужна картинка кота, не защищённая авторским правом, сервис This Cat Does Not Exist её сгенерирует. И не одну, а сразу штук 40. Правда, половина из них будут с ошибками: много лап или хвостов, нет головы, но что-нибудь выбрать можно. Генерация запускается нажатием единственной кнопки на странице.

У первого же кота проблема — многолапие.
У первого же кота проблема — многолапие.

This Person Does Not Exist

Что умеет: генерирует лица людей

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: бесплатно

This Person Does Not Exist справляется лучше, чем нейросеть с котиками. Тут лица людей получаются правдоподобными. Настройки простые: нужно выбрать пол, возраст и национальность. Дальше можно бесплатно сгенерировать хоть 100 картинок, пока не получите подходящий вариант. Обычно неплохо получается с первых же попыток.

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

Rytr

Что умеет: пишет тексты

Сложность использования: ❌

Результат: ⭐⭐⭐⭐

Стоимость: от 9 $ в месяц

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

Я протестировала, как Rytr напишет текст о компании для главной страницы. Выбрала шаблон «Landing page» → указала, для чего нужен текст: блок «О компании»→ расшифровала, о каких услугах написать.

В Rytr нужно заполнить шаблон слева, справа появится результат.
В Rytr нужно заполнить шаблон слева, справа появится результат.

Текст закинула в переводчик и вот, что получилось.

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

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

Подытожим

  1. С помощью искусственного интеллекта можно решить сразу 3 задачи: разработать дизайн, создать элементы сайта, написать текст
  2. Результат работы с ИИ зависит от запроса. Пишите на языке, который понимает сервис, чаще всего это английский. Описывайте подробно, какой результат хотите
  3. Appypie website, Webflow, TeleportHQ — конструкторы на основе ИИ, в которых можно создать сайт. В Midjourney и Dream Studio можно сгенерировать картинки, в том числе дизайн веб-страницы. Midjourney справляется с задачей намного лучше. Galileo AI создаёт макеты по текстовому описанию
  4. Чтобы написать текст для сайта, попробуйте Rytr или ChatGPT. Убрать фон поможет RemoveBG, а Imglarger увеличит картинку и улучшит её качество. В AutoDraw можно нарисовать что-то от руки, он обработает рисунок и сделает его красивым. This Cat Does Not Exist генерирует картинки кошек, This Person Does Not Exist — фотографии людей
Подпишитесь на OkoCRM в Telegram
Узнавайте первым про обновления и полезные инструменты продаж. Учим, как надо работать в системе. Собираем фидбек и делимся новостями.
Канал OkoCRM
Получайте статьи почтой. Самое важное и дважды в месяц. Иногда смешно, но не сильно
Наверх
Мы используем cookie для вашего удобства. Используя сайт, вы соглашаетесь с этим. Подробнее - в политике конфиденциальности.
Я согласен