Создание сайтов через нейросети

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для текстов

1. Notion AI

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

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

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

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

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

2. ChatGPT и BingAI

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

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

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

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

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

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

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

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

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

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

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

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

Для визуала

1. Midjourney

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

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

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

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

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

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

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

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

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

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

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

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

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

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

С его помощью мы задаем ИИ требование к качеству и проработке картинки. Можно задать запрос формулировкой 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:

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

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

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

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

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

2. ClipDrop и StableDiffusion

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

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

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

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

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

Функция платная, но реализована хорошо. Но в том же Midjourney можно добиться идентичного по качеству результата (а то и лучше), сформулировав соответствующий запрос.

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:

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

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

2. Логотип

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плюсы:

Минусы:

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

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

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