Transcription
Этот инструмент способен заменить тебе целую команду дизайнеров и сэкономить сотни тысяч рублей. С его помощью ты можешь генерировать логотипы, брендинг, постеры. Но что меня интересует сегодня больше всего, с его помощью ты можешь сгенерировать дизайн целого сайта и выглядеть это будет круто.
Понятное дело, настоящие дизайнеры всё ещё очень сильно ценятся, и правильный подход позволяет создать действительно продающие сайты. Данный способ отлично подойдёт тем, кто хочет максимально быстро и, самое главное, бесплатно нарисовать себе логотип, оформить соцсети и разработать себе красивый сайт. И при этом не готов выложить 200-300.000 руб.
И с этими задачами прекрасно справляется сервис Love Art, первый в мире дизайгент. Он уже интегрирован с GPT Image, CLK, VO3 и другими инструментами для генерации. И при этом он абсолютно бесплатно каждый день выдаёт по 300 кредитов. И сейчас я покажу тебе, как с его помощью создать полноценный дизайн сайта и сверстать с помощью нейросетей.
Также я решил сравнить, как один и тот же сайт мне нарисует нейросеть и настоящий дизайнер. В конце покажу результат и сколько я на это потратил. Ну что, давай начинать. Переходим в Lowart. Ссылка будет в описании. Регистрируемся и попадаем на главную страницу. В этом поле нам необходимо ввести наш промпт. Как видишь, я его уже подготовил. А предлагаю сначала сверстать логотип, сгенерировать фотографии, которые впоследствии будем использовать на сайте. А я пишу, для какой компании нам необходимо разработать брендинг. Указываю стилистику, которая мне необходима, и также я указываю список блоков, для которых мне необходимо сгенерировать изображение. Вот, в принципе, промт ты видишь на экране, да? И не забываем прикрепить референсы. Давай посмотрим на рефы. Вот так выглядят у нас референсы. Впоследствии можешь сравнить, получилось ли у нейросети воссоздать этот дизайн.
Нас перекинуло на отдельную страницу с холстом, а, в котором будет вестись работа. И можешь заметить, что уже нейросеть пошла что-то генерировать. Давай подождём. Замечательно. У нас теперь есть все материалы, с которыми мы можем работать. Сначала нейросеть создала логотип, а затем попросила меня выбрать, какой из этих четырёх мне больше нравится. Мне зашёл больше всего вот этот. И на его основе она уже создала нам какой-то брендинг, а, какую-то палитру цветов и так далее. Вот. И в конце сгенерировала фотографии для сайта.
Хорошо, давай приступать непосредственно к дизайну сайта. Промпт у нас примерно такой же, только в нём я прошу нарисовать дизайн на основе созданного брендинга и расписываю, какие блоки хочу видеть на сайте. Ну что ж, нейросеть закончила работу, выдала нам дизайн. А, и смотри, я заметил, что обычно, обычно первая генерация достаточно простая, и поэтому, опять же, обычно я это всё дело дорабатываю, но в нашем случае получилось, по-моему, вполне достойно. Блин, это, ну, готовый работающий дизайн, так что, да, мы можем остаться этот макет дорабатывать, но меня, в принципе, всё устраивает, поэтому давай перенесём этот макет в реальную вёрстку.
Стоит отметить, что Loward также генерирует HTML данной страницы. Вот здесь в чате напротив HTML Generation можем нажать на preview HTML. И вот она, наша страничка. Как видишь, всё с анимациями, всё очень красиво. Да, мне всё нравится. А, смотри, отдельной кнопки, отдельной функции для экспорта HTML здесь нет. Поэтому мы, в принципе, для того, чтобы перенести этот дизайн в какую-нибудь среду для разработки типа курсора или его аналогов, можем пойти двумя путями. Либо нажать правой кнопкой мыши по любому месту страницы и выбрать просмотр кода страницы. И вот он наш весь HTML-файл. То есть, да, вся страница генерируется в одном HTML-файле. Здесь же стили, здесь же скрипты. И вот она наша вёрстка. Мы можем всё это дело скопировать, перейти в проект, создать файл index.html и просто закинуть всё это дело сюда. И, в принципе, нам остаётся только открыть наш проект. И вот, пожалуйста, готовый сайт.
Но на всякий случай я сейчас покажу ещё один вариант, как можно перенести этот дизайн из обычной картинки в настоящую вёрстку. Для этого выделяем наш макет и вот здесь справа наверху жмём на кнопку экспорт и экспортируем изображение. Переходим в курсор AI или любую другую удобную для тебя среду разработки. И убедись, что вот здесь на странице Rules and Memories у тебя указано глобальное правило, которое, а, заставляет нейросеть более ответственно относиться к разработке и писать код без ошибок. Это правило лежит в нашем Telegram-канале по ссылке в описании. Заходи, забирай абсолютно бесплатно, без левых подписок.
Итак, я уже создал проект, добавил в него папку медиа и в эту папку поместил все изображения, которые нам понадобятся при вёрстке. А также я подготовил промпт, и в нём я прошу сверстать сайт по прикреплённому дизайну. Я также здесь указываю блоки, которые мне интересны, и прошу использовать фотографии из папки медиа. Также не забываем прикрепить непосредственно вот этот дизайн-макет, который нам сгенерировал Lowart. Ну что ж, давай запустим генерацию и немного подождём.
Почему я прошу сгенерировать сайт на HTML, CSS и JavaScript? Почему не использую Framework? На самом деле всё очень просто. Чистая вёрстка очень легко и быстро правится в случае каких-либо визуальных багов. И затем при желании этот сайт можно очень легко перенести на фреймворк. Достаточно написать promptт соответствующий. Ну, попросить об этом нейросять. Как создавать обычные сайты и даже полноценные веб-приложения, я рассказываю на своём самом полном курсе по вайп-кодингу сайтов и веб-приложений. подойдёт даже новичку, потому что в нём я буквально даю и разжёвываю всю необходимую информацию, которая тебе может понадобиться. Тебя ждёт более 70 записанных видеоуроков, а также очень много практики. И эксклюзивно для зрителей этого YouTube-канала мы сгенерировали специальный промокод YouTube. Вводи его при оплате, и ты получишь огромную скидку.
Ну что ж, а тем временем курсор сверстал наш проект, о чём он нам прямо сообщает. А, готово. Создал Pixel Perfect версию сайта. Где-то в этом видео спрятан промокод на девяностопроцентную скидку на оплату курса. Откуда он узнал? Ладно, неважно. Давай посмотрим. А какой сайт у нас с тобой получился? Слушай, мне кажется, получилось очень хорошо. Мне очень нравится анимация вот этого паралакса. Мне очень нравится, как подсвечивается вот эта кнопка. Да, здесь у нас пошла немножко отсебятина. такой оранжевый call to action блок, но он выглядит даже достойнее, чем а-а нам сверстали вот здесь в оригинале. Согласись. Ну что ж, давай посмотрим на мобильные версии. И на мобилках можешь заметить, что тоже всё очень ровненько, буквально с одного промпта.
Ну что ж, а теперь давай сравним. Вот этот дизайн мне абсолютно с нуля создали нейросети. А вот этот дизайн мне нарисовал человек-дизайнер на фрилансе за 5.000 руб. Причём фрилансер умудрился ещё пропасть на несколько дней, прежде чем сдать мне дизайн. А нейросеть прямо на твоих глазах, буквально минут за 15-20 создала мне готовый работающий сайт с мобильными версиями, которые я уже могу выкладывать в интернет.
Ну что ж, напиши в комментариях, как тебе сервис Lowart, будешь ли ты им пользоваться. А также не забывай ставить лайки и подписываться на этот канал. Видео выходят дважды в неделю, и, поверь мне, есть ещё много о чём тебе рассказать. Причём абсолютно бесплатно. У меня на этом всё.