Создаем одностраничный сайт с помощью ИИ

  1. Для создания одностраничного сайта будем использовать нейросеть QWEN. Для этого заходим в сервис QWEN и регистрируемся. Можно по гугл-аккаунту, что значительно упростит процесс регистрации (рис. 1).
Рис. 1 – Скриншот страницы регистрации в QWEN
Рис. 1 – Скриншот страницы регистрации в QWEN
  1. Создать карусель Добавьте описание После регистрации в строке ввода текста наживаем + и в выпавшем меню выбираем параметр БОЛЬШЕ (MORE) Артефакты (Artifats) (рис. 2).
Рис. 2 – Скриншот выбора нужного параметра для создания одностраничного сайта
Рис. 2 – Скриншот выбора нужного параметра для создания одностраничного сайта
  1. Далее пишем запрос на создание одностраничного сайта. Для этого кейса я решила сделать сайт-визитку и рассказать о себе. В запросе необходимо прописать следующие вещи:
  • укажите, что текст самого лонгрида изменять не нужно (например, «Текст не изменяй!»). Иначе есть вероятность, что QWEN отредактирует ваш текст, и вам это не понравится;
  • уточните, что все ссылки должны быть кликабельными;
  • дизайн. Если у вас в голове уже есть точная цветовая схема будущего лонгрида, то расскажите о ней нейросети. Например, «Дизайн: светло-серый фон и черные заголовки». Если вы знаете HEX-коды нужных вам оттенков, нейросеть порадуется и выдаст максимально точный результат дизайна, что, в свою очередь уже порадует вас. Название и размеры шрифта тоже можно прописать, если вам важно. С цветом есть вариант еще проще. Находите фотографию (например, свою) в приятных вам тонах, загружаете в QWEN и просите нейросеть «Дизайн: цветовую схему подбери по фотографии»;
  • если хотите, чтобы сайт-визитка содержал ваше фото, надо прописать место этого фото в тексте и дать на него отдельную ссылку. Например, «Мою фотографию размести рядом с началом текста» (рис. 3).
Рис. 3 – Скриншот в процессе генерации кода будущего одностраничного сайта
Рис. 3 – Скриншот в процессе генерации кода будущего одностраничного сайта

Мой промпт выглядел следующим образом: «Создай лонгрид-визитку по моему тексту. Текст не изменяй. Дизайн: цветовую схему подбери по фотографии. Все ссылки должны быть кликабельны. Фотографию размести рядом с началом текста. Вот ссылка на мое фото, которое нужно разместить рядом с текстом: [ссылка]. Вот текст для одностраничного сайта: [текст]».

  1. Отправляем наш промпт в QWEN и ждем результата. Пока идет генерация, справа будет показываться код. Когда одностраничный сайт будет готов, жмем на кнопку «Превью» и инспектируем результат. Обязательно вносим правки, если что-то не так. Лично я сделала 6 итераций, добавляла и убирала разные элементы дизайна, пока меня не устроил итоговый вариант. Чем длиннее и сложнее лонгрид, тем больше необходимо итераций (рис. 4).
Рис. 4 – Скриншот одностраничного сайта в режиме «Превью»
Рис. 4 – Скриншот одностраничного сайта в режиме «Превью»
  1. Когда результат устроил, жмем кнопку «Развернуть» (Deployed) в правом верхнем углу. Готово! Ваш одностраничный сайт опубликован в сети, копируйте ссылку и раздавайте ее всем, кому хотите! (рис. 5).
Рис. 5 – Скриншот меню «Развернуть» кнопка «Развернуть»
Рис. 5 – Скриншот меню «Развернуть» кнопка «Развернуть»
  1. Обратите внимание, что QWEN маркирует сгенерированный сайт, как контент, созданный ИИ. Это часть политики сервиса и международных требований (рис. 6).
Рис. 6 – Готовый лонгрид-визитка с пометкой ИИ-контента от QWEN
Рис. 6 – Готовый лонгрид-визитка с пометкой ИИ-контента от QWEN

Итоговый вариант моего сайтв-визитки можно посмотреть по ссылке: https://vk.cc/cW1PxI

ПРИМЕЧАНИЯ

  1. QWEN делает одностраничный сайт адаптивным, чтобы удобно было смотреть с мобильных устройств.
  2. Любые фотографии лучше вставлять ссылками. Я попыталась отправить ему фото напрямую, но получилось не очень качественно. Ссылкой вышло хорошо.
  3. Одностраничный сайт можно менять и дорабатывать, просто отсылая корректирующие запросы в тот же чат. Таким образом, вы сможете в любое время обновить информацию на вашей визитке, не создавая для этого миллион отдельных чатов.
  4. Те, кому вы дадите ссылку на сайт, увидят только сайт, ваши промпты и диалог с системой никто не увидит.

ДЛЯ ЧЕГО МОЖНО ПРИМЕНЯТЬ

  1. Сделать удобную одностраничную визитку с информацией о себе и контактами.
  2. Сделать рекламный сайи о вашем проекте с призывом прийти, поучаствовать, купить и т.п.
  3. Упаковать учебную информацию для ваших студентов в современный удобный им формат.
  4. Опубликовать вашу статью или гайд.

Автор кейса: Ольга Ребко

97 views·2 shares