Создание сайтов через нейросети09.02.2024 11:45

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

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

Разработка сайтов через нейросети: плюсы и минусы

ИИ неплохо генерирует контент, программирует, создает визуал и даже полноценные сайты на основе промптов (требований) пользователя.

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

Еще одно неоспоримое преимущество — экономия финансов. Зачем платить копирайтерам или дизайнерам, если можно получить приемлемый контент бесплатно или за небольшую стоимость?

Большинство нейросетей предлагает пользователям широкий функционал. В том же ChatGPT можно выбрать тональность повествования, задать параметры под определенный формат текста — лонгрид, письмо, содержание, заголовки и т.д. Midjourney способен сгенерировать изображение в любом стиле, начиная с аниме, заканчивая футуризмом или реализмом. В общем, есть, где разгуляться.

Давайте посмотрим, как ИИ может быть полезен в создании сайтов:

• генерация основных элементов — логотипов, заголовков, контента, корпоративного стиля и т.д.;

• разработка полноценных сайтов — преимущественно лендингов, но можно попробовать сделать и многостраничный ресурс или интернет-магазин;

• наполнение сайта доп. контентом — статьями, карточками товаров, акциями, баннерами;

• улучшение пользовательского опыта (UX) — ИИ предлагает индивидуальные рекомендации, учитывая запросы пользователей;

• написание кода для сайта — очень сложно, но реализуемо.

Список внушительный, согласитесь. Но так ли все радужно на самом деле?

Как любой продукт/услуга, нейросеть имеет свои преимущества и недостатки. Начнем с преимуществ.

• Скорость. Алгоритмы AI выполняют задачи быстрее, чем специалисты. Сравните сами: генерация текста или картинки занимает около 40–60 секунд, в то время как у копирайтера или дизайнера на эту же работу уйдет не один час.

• Цена. Мы уже говорили, что нейронки для создания сайта — это дешево. Оплатил подписку на год, потратил пару тысяч рублей и генерируешь контент хоть до потери пульса (обычно подписка не грешит лимитами).

• Точность. Задали запрос, настроили параметры и наслаждаемся результатом. Обратите внимание: от структуры запроса будет зависеть сгенерированная работа. Тут тот же принцип, что и с ТЗ. Чем детальнее вы опишите свои потребности, адаптируете их под свою сферу деятельности, тем качественнее получится текст, картинка или логотип.

Перед генерацией необходимо определить цели и тематику контента. Можно попросить ИИ создать какую-то картинку или какой-то текст, а после — разместить их на сайт. Правда никакого выхлопа вы не получите. Поэтому помним о пользе контента, он должен решать те или иные маркетинговые задачи (все зависит от тематики вашего бизнеса).

Перейдем к недостаткам.

• Зависимость от человеческих ресурсов. Да, нейросеть напишет текст, сделает картинку или сайт. Но в любом случае ее работу обязательно нужно редактировать. Искусственный интеллект — это машина. Он не сможет создать вам крутой лендинг или завлекающий контент. Нейронка — это не Лебедев и не Ильяхов. Поэтому придется поработать ручками.

• Отсутствие творческого подхода. Все дизайны, которые выдает AI, основаны на шаблонах. Поэтому покреативить не получится. С текстами та же беда. Если информационные статьи ИИ делает хорошо, то творческие посты с изюминкой и юмором можете не ждать.

• Негибкость. Главная проблема нейронки заключается в ее алгоритмах. Иными словами, возможности ограничены. Поэтому адаптировать контент к актуальным требованиям не выйдет.

Вывод: нейросеть — отличный помощник для специалистов или пользователей, которые не имеют опыта в маркетинге или разработке. С простыми картинками и текстами ИИ справится, но что-то более серьезное требует человеческого вмешательства. Возможности нейронки ограничены, она создает лишь скелет. А вот за идеей или реализацией стоит обратиться к опытным ребятам.

Этапы создания сайта с помощью инструментов AI

Схематично создание сайтов с помощью нейросетей состоит из 4 этапов:

1. Выбор типа сайта и разработка макета

Определиться с форматом ресурса стоит заранее, опираясь на тематику бизнеса и задачи, которые должен решать сайт. Далее следует проработать его структуру. Здесь на помощь как раз приходит ИИ. Можно использовать официальные сервисы или чат-боты в соцсетях. С последними нужно быть аккуратнее, так как ни у одной нейросети нет официального канала в том же Телеграме. Работу свою они выполнят, но уникальность результата придется проверять.

1. Генерация контента

Пустой сайт — плохой сайт. Поэтому нужно поработать над его наполнением. Через ChatGPT генерируем тексты: статьи в блог, на главную и услуговые страницы, в блок «О компании». Полученный результат проверяем на ошибки (орфографические, пунктуационные, логические и т.д.), актуальность и достоверность. Фактчекинг — основной инструмент при работе с нейронкой. База данных у ИИ объемная, но она не успевает обновляться и подстраиваться под современные требования. Поэтому любую информацию мы вычитываем, гуглим и редактируем.

Несколько советов по фактчекингу:

• Опирайтесь только на достоверные источники. Например, если генерируете статью про валюты и их экономическую ценность, сверяйте информацию на официальных банковских сайтах. Публиковать в тексте данные про курс доллара к рублю от 2018 года как минимум непрофессионально.

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

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

• Убирайте субъективные или оценочные суждения. Подобные статьи лучше вообще не генерировать, так как проверить правдивость информации невозможно. Например, ИИ напишет вам текст про «Лучшие сериалы 2023 года». Вот только лучшие они по мнению кого? Спорно. Помним, что вкусы и предпочтения у каждого потребителя разные.

• Не используйте противоречия. Это когда в первом абзаце нейросеть написала, что лофт — самое популярное направление в дизайне. А в следующем рассказывает, что лучше минимализма нет ничего. Ответ ИИ не должен противоречить сам себе или источникам, на которые он ссылается.

Также следует заранее определиться с ToV и подачей текста. Лучше, если весь контент будет сгенерирован в едином стиле. Поэтому задаем одинаковую тональность при работе с ChatGPT.

1. Визуальное наполнение сайта

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

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

1. Собираем все элементы воедино

Вот у нас на руках контент, визуальные составляющие и структура. Все это нужно объединить в общую картину. Делаем через AI: просто вставляем нужные элементы в блоки в режиме редактирования.

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

Какие нейросети можно использовать?

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

Для текстов

1. Notion AI

Главное преимущество нейронки — наличие бесплатной версии. Тот же ChatGPT, если не оплатить подписку, генерирует медленно. Да и качество контента хромает. А еще Notion AI работает в России без VPN, что очень удобно.

С помощью Notion AI можно создавать тексты на любых языках, придерживаясь заданного стиля и правил. ИИ нейтрален по отношению к полу, расе и иным социальным факторам (для нейронки это важно).

Интерфейс и инструменты Notion AI интуитивно понятны. AI может распознавать сленг, жаргонизмы и генерировать различный по формату контент: лонгриды, небольшие тексты, переводы и т.д.

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

В особенности Notion AI будет полезен программистам,
так как ИИ неплохо генерирует и анализирует коды по заданным параметрам.

1. ChatGPT и BingAI

О нем не слышал разве что самый ленивый. Нейронка от Open AI быстро завоевала сердца пользователей. С ее помощью можно спроектировать сайт, написать код или HTML, Title и Description. Но вишенка на торте — создание текстового контента.

Как раз из-за ChatGPT в 2022 году все разом начали хоронить копирайтеров. Многие зарубежные компании и вовсе провели массовые увольнения. Правда потом пришлось нанимать специалистов обратно. ИИ создает неплохой контент, но его все равно нужно редактировать.

Можно использовать как классический ChatGPT, так и
версию BingAI, работа которой базируется на собственной версии GPT 4 OpenAI
(компании тесно взаимодействуют друг с другом). Тем не менее у нейросетей есть
и различия. Рассмотрим в таблице:

ChatGPT и BingAI будут полезны для написания контента, повышения уникальности, увеличения объема текста и т.д. Можно менять стиль повествования на творческий, точный или сбалансированный. Но в любом случае придется редактировать контент ручками, так как ИИ допускает массу ошибок.

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

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

Текст по запросу «Напиши текст про беспроводные наушники»:

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

Как правильно сформулировать запрос: «Напиши текст про беспроводные наушники. Опиши их преимущества для пользователей, каждую техническую характеристику поясни, чем она будет полезна для покупателя?»

Да, этот текст тоже не идеален. Однако он более информативен и полезен. Многие аспекты поясняются и раскрываются (например, про тот же Bluetooth). Здесь ИИ создал реальный спрос на товар, показал, почему беспроводные наушники нужны пользователю.

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

ChatGPT и BingAI будут полезны в генерации:

• контент-плана,

• заголовков,

• лозунгов и CTA,

• плана статьи,

• письма для рассылки,

• скелета текста.

Для визуала

1. Midjourney

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

Важно! С 31 марта создатели отменили пробную бесплатную версию, поэтому единственный вариант — оформить подписку. Если вы хотите использовать ИИ для создания сайта на регулярной основе, проще ее оплатить.

Алгоритм генерации картинок в Midjourney схож с ChatGPT. Заходите в чат, задаете команду (в нашем случае — /imagine), вводите запрос. Единственный момент: формулировать запрос лучше на английском, русский язык AI распознает плохо.

После того как запрос сформирован, нажимаете «Отправить» и ждете результат. Нейросеть выдаст 4 варианта на выбор. Выбираете наиболее понравившееся изображение (кнопки U1, U2, U3 и U4), и ИИ повысит его качество, проработает детали и т.д.

Если качество и наполнение картинки вас не устроило, можно попросить ИИ сгенерировать еще 4 варианта иллюстраций на основе одной из предыдущих картинок (какую выберите).

Следующий шаг — сохранить работу. Не надо качать картинку прямо из чата программы. Откройте оригинал, тогда изображение сохранится в более высоком разрешении. Можно скачать все 4 варианта, если есть необходимость.

Если авторизованы через Дискорд, то все выданные ИИ варианты сохранятся прямо на сайте.

Третий вариант — попросить бота отправить вам изображение в личку. Для этого отреагируйте на пост с результатом от бота эмодзи в виде письма. Его можно легко найти в поиске по запросу: envelope:.

Полезные команды Midjourney

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

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

Это про соотношение сторон. По умолчанию в программе стоит 1:1. При желании значение можно изменить на другое.

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

Параметр качества иллюстрации. Стандартное значение — 1. Но если вы хотите больше деталей в самой картинке, то можно установить значение 2, 3 и т.д.

• --wallpaper

С его помощью мы задаем ИИ требование к качеству и проработке картинки. Можно задать запрос формулировкой 4К, «максимальная детализация» и т.д., но это не так надежно, а результат получится непредсказуемым.

При создании запроса придерживайтесь следующей последовательности:

Формат изображения — описание объекта — детали объекта — общая стилистика — дополнительные параметры — короткие команды.

Например: photo of a pilot cat in the cockpit, soviet mosaic --ar 4:3 --q 2 --v 5.

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

Например, можно задать запрос вот так: Фото мужчины, молодого, в белом костюме, в руках стакан с кофе.

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

Photo of a young man in a white suit with a cup of coffee in his hands:

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

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

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

Вот несколько из них:

• Promptomania,

• Phraser,

• Noonshot.

Грамотно составленный промпт — это залог успешной генерации. Если результат не устроит, можно попросить Midjourney перегенерировать контент или скорректировать запрос, пояснив некоторые слова для ИИ.

1. ClipDrop и StableDiffusion

Это полноценный сервис AI с широким набором функций. Можно как редактировать существующие изображения, так и создавать контент с нуля.

Пробный период бесплатный, ежемесячная подписка стоит около 7 евро. Давайте подробнее пройдемся по функциям сервиса с наглядными примерами.

Фото ДО

Фото ПОСЛЕ

Появились шумы на картинке, качество стало хуже. Поэтому проще удалить лишние объекты через Photoshop. Но если вам нужно быстренько получить изображение для тех же соцсетей или статей — поэкспериментировать можно.

Фото ДО

Фото ПОСЛЕ

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

Фото ДО

Фото ПОСЛЕ

Бесплатно функция работает хуже. Оформлять ради этого платную подписку или нет — решать вам. Опять же, Photoshop делает работу качественнее.

Stable Doodle — превращает ваши каракули (то есть эскиз) в изображение. Можно выбрать стиль картинки: фото, 3D изображение или Pixel Art. Пример:

Эскиз совушки

Результат генерации

Stable Diffusion XL — инструмент, который на основе ваших промптов генерирует изображения. На сайте ClipDrop он платный (хотя заявляется обратное). Но можно бесплатно использовать функцию на официальной облегченной версии — Dream Studio. Задаем запрос: picture of a tree in a field in sunny weather with clouds. Получаем результат:

Генерируются изображения быстро. Но на этом преимущества Stable Diffusion XL заканчиваются.

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

Примеры генерации: от логотипа до полноценного сайта

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

• Придумает название компании;

• Сгенерирует логотип;

• Напишет текст;

• Создаст полноценный лендинг.

Теперь о каждом пункте по порядку.

1. Название

Используемые инструменты: RenderForest, ChatGPT

Задаем запрос: «придумай название для турагентства, которое занимается продажей элитных туров по всему миру.».

Что сгенерировал RenderForest:

• High Class Holidays

• Opulent Journeys

• VIP Voyages

• Five Star Holidays

• Royal Escapes

Что сгенерировал ChatGPT:

• Travel Haven

• Adventure Seekers

• Voyage Ventures

• VistaVoyage Tours

• Oasis Odyssey

Идеи неплохие, остановимся на варианте High Class Holidays.

1. Логотип

Инструменты для генерации: Looka, LogoAI

Но есть и альтернативы: TurboLogo, RenderForest, Genlogo, Wix, Canva, Logomaster.AI

Что нам выдал LogoAI:

Что нам выдал Looka:

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

В LogoAI и Looka можно задавать параметры: название компании, род деятельности, цветовую палитру, иконки и т.д. Единственный минус: чтобы скачать результат или отредактировать логотип, придется оформить подписку.

1. Создание сайта через нейросеть

Инструменты: Durable, Midjourney, ChatGPT

Durable — нейросеть для создания сайта (прототипа лендинга). Генерация бесплатная. Если первый вариант вам не понравился, можно сгенерировать еще несколько вариантов.

На сайт туристического агентства мы решили сделать следующие блоки:

• вводная страница,

• о нас,

• услуги,

• отзывы,

• направления,

• форма обратной связи.

Для фоновой картинки мы использовали Midjourney, для текста — ChatGPT.

Важно! Можно пользоваться нейросетью для создания сайта онлайн, для этого необходимо зарегистрироваться.

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

Вот что у нас получилось:

Далее мы оформили блок «О нас», прибегнув также к ChatGPT:

Следующий раздел — описание услуг. Список того, какие услуги оказывает туристическое агентство, нам написал ChatGPT. Вот что получилось:

Для каждого раздела нужно придумать дополнительное описание. Обращаемся к нашему помощнику ChatGPT. Возьмем в качестве примера услугу «Бронирование отелей» (2 иконка) и переделаем ее на русский язык:

Также мы оформили блок с отзывами, чтобы сайт казался более живым:

Затем внедрили блок «Направления», которыми преимущественно занимается турагентство:

Последний штрих — форма обратной связи:

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

Теперь кратко пройдемся по плюсам и минусам сервиса.

Плюсы:

• нейросеть для создания сайта — бесплатная, нет лимитов и пробных периодов;

• максимально понятный интерфейс с настройками;

• 11 базовых шаблонов под определенные форматы задач — можно создать карту с местоположением, блок для обратной связи или обратиться к фотогалерее;

• генерация качественного и релевантного контента.

Минусы:

• нельзя кастомизировать шрифты и цвет текста — он либо черный, либо белый;

• невозможно поменять размер блоков— даже на нашем примере видно, что это довольно критично и выглядит «топорно»;

• можно создать только один тип сайта — лендинг (многостраничник или интернет-магазин сделать не получится).

Может ли нейросеть заменить специалистов?

Без сомнений, возможности искусственного интеллекта растут с каждым днем. Можно создавать тексты, визуал и даже сайты. Однако любой контент нуждается в корректировке, так как алгоритмы нейросетей работают неидеально.

Использовать AI в роли помощника, который облегчит и систематизирует рабочие процессы — да. Заменять нейронкой специалистов и терять в качестве контента — нет.

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

© Habrahabr.ru