AI Website Creation: Full Guide & Transcript

[00:02] открывается по ссылке и любой человек может на него зайти. Анимация колонки с подсветкой, линейка моделей, характеристика звука, кнопка заказа. Ни одной строчки кода, ни фотошопа, ни тильды. Мои затраты на создание этого

[00:16] сайта составили около 500 руб. Картинки колонок я сгенерировал в Nanabanна Pro, анимацию сделал в CLН 3.0, а сам сайт собрал в ClОД 500 руб. 10 минут. А на рынке за такие сайты платят шестизначные суммы. Обычный лендинг на Тильda стоит

[00:30] от 30.000 руб. Лендинг с анимациями, как этот, от 100 до 180.000. Ещё я решил спросить у чата GPT, сколько бы это стоило на западном рынке. Ответ: от 5 до 10.000 долларов. Прямо сейчас я покажу весь процесс с нуля, каждый шаг от

[00:44] генерации первой картинки до создания сайта. И, ребят, я не программист, я писать код. Я просто сказал на эросети: JBL". И она собрала. Также в конце покажу, как выложить этот сайт в

[00:57] интернет за пару кликов, и расскажу, где находить заказчиков на такие проекты. И, начнём, среди всех, кто оставит любой комментарий под этим роликом, я разыграю сертификат на ОзоOne на 5.000 руб. и одно место на свой пятидневный марафон

[01:10] по дизайну, на котором вы научитесь создавать рекламные креативы и обложки нейросетей. Создадите портфолио и поймёте, как искать клиентов, даже если будут в моём Telegram-канале, поэтому подписывайтесь, чтобы не пропустить.

[01:24] Всё, погнали собирать сайт. Так, ребят, сейчас начнём с генерации изображений. Потратим на это сейчас максимум 3-4 минуты и уже потом будем создавать с нужен визуальный контент для сайта. Итак, у меня есть вот такая колонка.

[01:37] Фотографии я скачал просто в интернете. Давайте воспользуемся чатом GPT и Pro. Привет, чат. Напиши мне промт для наросети Nan Banana Pro. Я хочу, чтобы моя колонка, изображение её я прикреплю. Хочу, чтобы она лежала на камне. Камень

[01:51] такой похожий на скалу, камень влажный. На нём лежит колонка, тёмное освещение, тёмный камень и красный контурный свет падает и на камень, и на колонку. Никаких дымов, никаких шумов. На фоне простой тёмно-серый градиент, то есть

[02:06] чистый фон. Чистый тёмно-тёмно-серый фон. Так, ждём, пока нам чат GPT выдаст промты писать через чат GPT либо через похожие нейронки. Пишет всегда быстро и пронт вы сами писать, ну, просто потратите лишнее время. Переходим с вами

[02:21] сразу в Crea AI. Здесь заходим на вкладочку imag, создаём. У нас новая Вставляем наш промт. Выбираем модель генерации Nanobanна Pro. Здесь в image проomт добавляем наши фотографии нашей колонки, чтобы nбоanна Pro добавила

[02:36] именно нашу колонку на картинку. Выставляем здесь формат 16x9. Это как раз-таки из формат для нашего для нашего главного экрана. И выбираем здесь разрешение 2К. Генерируем картинку. Кстати, ребят, в конце ещё ролика я

[02:49] генерации, и мы узнаем, сколько вообще рублей на это, на создание этого сайта копейки. Сколько у нас на картинке идёт, сколько на анимацию. В общем, в конце справилась. Личное изображение, всё классно. Вот даже ремешок нарисовала. Я

[03:04] возьму вот эту картинку. Очень мне нравится. Давайте её сразу скачаем. И сразу, ребят, быстренько бежим в нейросеть chatчат GPT, создаём новый чат обязательно под генерацию других промтов и говорим ему: чат GPT. Напиши промт

[03:16] дляросети клинк 3.0, чтобы я мог оживить своё изображение, свою картинку. Хочу, чтобы у моей колонки играл вибрировал динамик не слишком сильно, чтобы казалось, что играет музыка. Хочу, чтобы вокруг колонки как бы двигалась камера,

[03:29] да? То есть колонка как будто бы, ну, колонка лежит на камне и вокруг двигается камера слегка, то есть не слишком быстро, просто чтобы ощущалось так, что камера двигается вокруг колонки. И хочу, чтобы менялся контурный

[03:42] красный цвет, чтобы он просто периодически тоже двигался, слегка изображение. Ну, какой-то вот промт придумал, наверное, немножко усложнил сейчас разберёт всё, что я от него прошу. Лёгкая вибрация динамика, всё

[03:56] классно. Копируем промт. Видите, он даже от себя добавил, что сохрани сохранил композицию и уточнил, что изображение не должно деформироваться. Возвращаемся, должно деформироваться. Возвращаемся, ребят, в Cre AI. Нажимаем видео. А здесь

[04:10] сразу создаём новую сессию. Вставляем наш промт. Здесь выставляем модель 3.0. которое мы с вами скачали. Вот именно в статфрейм обязательно загружайте. Это которого уже нейронка будет ориентироваться. Давайте проверим. Это

[04:24] же это изображение, да? Это это изображение. Endфame загружать не нужно. Мод ставим Pro. 4К. Слишком дорогая генерация, она нам не нужна. И давайте длительность поставим 10 секунд. Этого будет тоже достаточно. Больше вот ничего

[04:36] настраивать здесь не нужно. Всё, нажимаем генерировать и ждём, пока клинк нам создаст анимацию. Итак, ребят, пока Клинк нам создаёт анимацию для нашего главного экрана, скажу важную вещь. Уверен, что сейчас многие смотрят такие

[04:48] смогу. Я не знаю, какие картинки генерировать, как их компоновать, почему у меня выглядит дёшево, а у кого-то красиво. Это абсолютно нормально, потому инструмент. В этом ролике я вам это докажу. То есть всё равно, чтобы

[05:01] инструмент давал вам результат, нужно понимать базу. марафон по дизайну. На марафоне вы научитесь создавать обложки для YouTube каналов и рекламные креативы с помощью топовых бесплатных энерсетей, с которыми

[05:14] я работаю каждый день. Освоите Фигма - это бесплатная программа, в которой запускается прямо в браузере. Ничего скачивать не нужно. Соберёте портфолио набис, я покажу, каким оно должно быть, чтобы заказчики сами вам писали. Дам

[05:27] портфолио. Не придётся ничего придумывать с нуля. И самое важное, я расскажу, как искать клиентов, даже если у вас пока нет опыта. Там готовые скрипты сообщений, конкретные площадки и пошаговый план. Каждый день видеоурок и

[05:40] домашнее задание плюс чат в Telegram, где можно задать любой вопрос либо мне, либо кураторам. Ссылка на марафон в описании. QR-код на экране. Переходите, человек, потому что все домашние задания проверяю я лично. Всё, ребят,

[05:52] возвращаемся к анимации. Так, отличная анимация у нас получилась. Очень чистый видос. Все кнопки прорисованы, никаких артефактов. Динамик вибрирует. Вообще шикардос. Давайте, давайте, ребят, скачаем нашу анимацию. Просто скачиваем

[06:05] её. Всё, браузер можно пока свернуть. Давайте создадим сразу папку на рабочем экране. Давайте напишем website. JBL. Отлично. Открываем clд. Он у меня установлен на компьютере. Я, кстати, использую модель генерации Sunet 4. Мне

[06:17] не очень нравится clД Opus именно в создании сайтов. Выделяю сразу нашу папку. Давайте копируем путь. Здесь ставим сш. Нажимаем вот этот первый пункт создать новую директорию и вставляем нашу ссылку на папку. Нажимаем

[06:29] клавишу Enter. Сразу здесь выбираем разрешение. Разрешение всегда выбираете выбираете разрешение, где напише написано больше текста. Всё отлично. Перед тем, как начать создавать сайт, нам необходимо скопировать с Гитхаба

[06:43] скилы для клод-кода. Здесь есть разные репозитории, то есть это такие базы знаний для клода с насмотренностью, с рекомендациями по тому, как делать шаблонную, да, не какой-то шаблонный нероночный мусор, а сделал хороший,

[06:56] смотрибельный, классный сайт с хорошей анимацией, с хорошей графикой. Я буду деле, здесь достаточно большое количество. Можете выбрать себе любой под вашу задачу. Я использую вот этот. Он такой достаточно популярный. И мне

[07:08] нравится, какие сайты Клод делает на основе этих скилов. Ссылку на GitHub со роликом. Копируем вот здесь, ребят, где зелёная кнопочка. Копируем, открываем такую вкладку, копируем здесь скилы. Браузер свернули. Сюда вставляем наш

[07:21] клод-код и пишем изучи эти скилы и создай. И создай сайт для магазина по продаже GBL колонок. Давайте сразу ему укажем, из каких блоков мы хотим

[07:34] получить сайт и какие они должны быть. Сайт должен состоять из пяти экранов. обязательные экраны. Это у нас выбор моделей, характеристики

[07:46] звука. И давайте ещё добавим блок покупки. Здесь он, скорее всего, сделает можно было заказать. А что ещё мы укажем? Ему стилистика. Современная цифровая игровая. Давайте какую-нибудь такую. Да, цифровая технологичная. Вот

[08:02] такую. Да, цифровая технологичная. Вот сайт должен быть экран без пустых полей. краям. Хочу, чтобы он М сайт полностью на весь экран растянул. И давайте что-нибудь ещё укажем ему стилистику. Стилистика красноватая. Красновато

[08:17] красновато-чёрная. Что мы ещё можем его попросить на на главный на главный экран? Добавь видео. Добавь это видео папку. Мы, кстати, этого не сделали. Просто из нашего браузера загружаем наше

[08:31] этого создали. Всё, браузер можно свернуть. Копируем ссылку на наше видео. Также копировать как путь. Вставляем сюда. Здесь можно кавычки просто, ребят, удалить. Всё, отлично. На главный экран добавь это видео. Видео зацикли таким

[08:45] добавь это видео. Видео зацикли таким образом, чтобы, когда оно кончается, оно проигрывалось в обратном направлении, то есть назад, в обратном направлении, то есть назад, чтобы не было видно склеек видео. Ну

[09:00] Я думаю, он должен что-то уже понять, что-то сделать. Всё, скилы мы ему дали референсы, вообще понимание, как делать сайт. ТЗшку мы ему поставили и всё, Ребят, сразу скажу, далеко от клода отходить не надо, от компьютера. То есть

[09:15] пойти сейчас у нас есть сейчас, скорее всего, с вами около 10-15 минут. Клод будет делать этот сайт небыстро. Для вас это время пролетит по щелчку пальцев, делаю. Видите, вот мои руки свободные. Сейчас вообще возьму телефон, буду

[09:28] компьютера. Почему не нужно отходить? Сейчас код будет просить различные разрешения на различные действия. То есть нужно будет ему эти разрешения уйдёте, придёте, у вас клод просто не сделает прогресс никакой, потому что у

[09:41] вашем компьютере. Периодически будут плавать уведомления, мы здесь какое-нибудь покажем. Но глобально можно просто сидеть, просто отдыхать. Глот всё сделает за вас. Вот, ребят, кстати, пример того, что вот нужно давать ему

[09:53] понадобилось разрешение. Если бы сейчас я его не дал, он бы просто дальше случае с кодом, пока восстание машин нам не страшно. Без вашего разрешения он всё не страшно. Без вашего разрешения он всё равно ни одного шага не сделает.

[10:11] папочку. Пока что у нас сайтик лежит здесь файликом, но позже мы его интернете. Блин, вообще как он выглядит классно. Мне нравится вот этот курсор. Зацените просто посмотрите на этот курсор. Я вообще кайфую от сайта.

[10:26] ним взаимодействовать, хочется взаимодействовать с анимацией. Вообще это выглядит просто обалденно. Нашёл, он нашёл информацию по другим колонкам. Видите, подтянул их сразу сюда. Да, здесь без иконок можно в целом добавить

[10:40] какие-то сюда картинки наших колонок, но мы этого делать не будем. Пока что у него единственный косяк. Он А у нас анимация плохо проигрывается. Мы сейчас с вами поправим этот момент. В целом можно даже оставить звук вот здесь на

[10:53] ещё влево, чтобы колонка не перекрывалась. Очень нравится. Ещё экранами. То есть я просто колёсиком слегка двигаю, и он сразу перебрасывает меня между экраном. Обалденная анимация. Блин, я не знаю, у вас такой же эффект,

[11:07] как у меня, но я просто кайфую от того, что сделал сейчас клод. Это вообще просто обалдеть, что за сайт. Когда же добавил такой аля калькулятор стоимости. Здесь, видите, у нас меняется здесь можно поменять расцветку, где выбрать

[11:20] количество колонок, которое мы хотим купить сейчас. Добавить в избранное даже. Можно можно купить сейчас. Добавлено в корзину. Кстати, я не вижу здесь корзину. в корзину добавил. Но я корзину здесь не

[11:32] сейчас это всё поправить. Но выглядит забавно вообще. Я честно, я просто дальше записывать этот ролик, но я не могу насладиться. Вот мне не хватает вот анимации, я хочу ей наслаждаться. Очень классная, очень хорошая база, да, есть

[11:46] недоработки. Давайте посмотрим, кстати, на адаптивке, что у нас, как с ребят, не завезли. Ну, на некоторых есть. Второй, он решил проигнорировать экран. Здесь он адаптивку сделал. Здесь

[11:59] вроде тоже что-то адаптируется у нас. Ну давайте Клод попросим внести его правки. впечатлением нахожусь. Блин, может мы сюда фотку закинули? Нет, вроде всё хорошо. Давайте ещё раз скопируем как путь. Вернёмся в клод, попросим его

[12:13] путь. Вернёмся в клод, попросим его внеси правки. На первом экране, добавь вот это видео, чтобы оно постоянно воспроизводилось. воспроизводилось. Дальше сделай сайт адаптивным к

[12:27] мобильным устройствам. Что ещё мы хотели с вами поправить? Давайте ещё посмотрим. Так, вернёмся к нашему сайту. Здесь он находится. А можно было просто в браузере переоткрыть его и всё. Так, анимация. Здесь мне всё нравится. Я не

[12:40] могу. Я просто я так кайфую, ребят. Ну и корзину, да, добавь корзину, чтобы разделка с корзиной, либо экран с корзиной, чтобы я мог посмотреть её корзиной, чтобы я мог посмотреть её содержимое. Добавь раздел с корзиной,

[12:52] содержимое. Добавь раздел с корзиной, который будет открываться в новом окне, который будет открываться в новом окне, чтобы я мог посмотреть содержимое чтобы я мог посмотреть содержимое моей корзины на сайте. Всё, в целом

[13:04] нажимаем Enter и всё. И ждём, пока он несёт правки. Ой, вообще, как мне нравится этот сайт. Чуть позже мы его ещё обязательно публикуем в интернете, чтобы его можно было там дать на него ссылочку. Мне очень нравится. Я просто я

[13:16] сейчас я закончу запись этого урока и вместо фильма сегодня буду смотреть на вместо фильма сегодня буду смотреть на анимацию на этом сайте.

[13:29] последние блоки, вносит правки. Я думаю, у многих наверняка есть вопросы: "О'кей, сгенерировать картинки, но где мне найти человека, который за это заплатит? Кто новичку?" Это абсолютно нормальный

[13:42] описании под этим видео есть ссылка на мой закрытый бесплатный урок. Там я пошагово показываю, как стартовать в дизайне с нуля, где найти первых клиентов и как получить первые деньги, даже без портфолио и опыта. Ссылка в

[13:54] описании. Забирайте сразу после просмотра этого видео. Вообще, что за просмотра этого видео. Вообще, что за сайт лютый? Что за лютая людь вообще? Это что за имба просто? Я извиняюсь за экспрессию, но мне очень нравится этот

[14:08] сайт. Он вообще просто имбище. Пока Клод занимается взрослыми делами, поиграю в Так, ребят, всё у нас готово. Что он пишет? Видео. Мобильную адаптацию он сделал. Блин, ну что-то мне кажется, что он не сделал. Слишком много пикселей для

[14:21] корзину. Давайте смотреть, что он вообще сделал. Возвращаемся в нашу папку. Открываем. Ага, вот это походу корзина. Он сейчас будет сюда нас перебрасывать, да? Видите, он перебрасывает нас на корзину. Отлично. У нас теперь на первом

[14:35] экране полноценно проигрывается видео. Он как-то даже немножко зациклил анимацию. Так, давайте посмотрим, как оно здесь у нас. А нет, просто у нас, можно ещё с этим, на самом деле, поработать. Можно сделать так, чтобы

[14:48] обратный ход анимации. Просто сейчас не можете со своими со своими видео, со своими анимациями так попробовать. Я не кайфу от этого сайта. Давайте попробуем в корзину что-нибудь положить, да?

[15:02] корзину. Две, точнее. Давайте вот такую белую, к примеру. Да. Так, открыть корзину. Да, смотрите, у нас открывается теперь корзина. Мы в корзине можем посмотреть наш заказ. Всё, видите, мы

[15:15] можем оформить его. Будет смешно, если мне реально привезут колонки JBL. Так, сайт, чтобы его можно было уже в интернете найти. Кстати, небольшой вот здесь баг у нас. Корзина, мы оформили, а всё равно горело, что у нас в корзине

[15:28] указать, чтобы текст он перенёс, но это уже, если что, сделайте сами. Выглядит теперь опубликуем наш сайт в интернете. Я обещал, покажу. Здесь всё достаточно просто. Я публикую через вёрсл. Вы можете публиковать на Гитхабе. Просто

[15:42] можете публиковать на Гитхабе. Просто пишем опубликуй этот сайт в интернете на Ну давайте, по-моему, так пишется, если я правильно помню. Давайте даже проверим. Здесь у меня есть этот сайт Vsal. Да, всё чётко просим его. Versal -

[15:54] это такой плагин, он подустанавливается в clклод. Клод, причём, вам подскажет, устанавливаем, то есть про, точнее, всё даём разрешение. Он у меня уже плагин предустановлен. Здесь ничего сложного нет. Ждём, пока клод опубликует либо

[16:08] попросит у нас ещё какие-то сделать действия. Проверять авторизацию в разрешим. О'кей, всё, авторизация выполнена. Видите, он сам открывает браузер, сам вот всё делает. То есть вам ничего делать не нужно. Просто дали ему

[16:21] просит. Видите, он здесь уже пишет, что он авторизован на. Так, нажимаем окей. Вот можем по ссылочке просто перейти. Скопируем. Просто вот сюда вставим. Открываем наш сайт. В интернетах всё, ребят, работает. Корзина не работает.

[16:38] Ладно. Ну, видите, клод всё-таки не идеально ещё. Не, не идеально создаёт. вёсл его откроем. Так, где у нас проекты? Вот они наши проекты. Нажимаем сюда, нажимаем вот нашу ссылочку. Вот доменс наш. Да, корзина не работает, к

[16:51] сожалению. Я не указал, скорее всего, чтобы он сайт задеплоил вместе с сделал. Ну, не страшно. Видите, всё равно хорошо, что увидели, хорошо, что показывает. Всё равно на видео с вами выяснили, что ну всё равно не идеальный,

[17:05] косяки. Всё-таки нужен ещё человек, чтобы им управлять, чтобы ему давать референсы. Обратите внимание, что у нас и мобильной адаптивки нету. То есть, видите, мобильной адаптивки у нас по-прежнему нет, к сожалению. Вот этот

[17:19] нужно ещё с клодом посидеть, ещё нужно с ним поработать, чтобы он доделал сайт, да, то есть время какое-то потратить. Но уже, я считаю, вот за сколько, я не если просто именно всю работу посчитать, не ожидание от клода, а если всю работу

[17:33] посчитать, то около 20 минут мы с вами получили вот такой сайт, опубликованный напоминаю, вы можете где угодно, хоть на Versal, хоть на Гитхабе, хоть на других вообще доменах, где вам удобно. Давайте с вами теперь подобём результаты, как я

[17:46] и обещал, и уже ролик будет у нас завершаться. Итак, чат GPT, посчитай, пожалуйста, сколько денег я потратил на создание сайта. У меня на в начале создание сайта. У меня на в начале создания сайта было 11.44

[17:59] кредита. Сейчас у меня 9.629 кредитов. Всего я купил 20.000 кредитов. Стоило это 4.000 руб. Посчитай, сколько конкретно на этот проект я потратил выясним, ребят, чтобы у вас было понимание, сколько вообще стоит делать

[18:14] подобный проект. Потратили, ребят, мы с вами 363 руб. В целом, ну, не так уж и много, я считаю. Использовали мы с вами сегодня инструменты, топовую модель для генерации изображений Нанобана Pro, клинк для создания классной, обалденной

[18:29] эффектной анимации и клод для сборки сайта. Ну и CHGT. Мы, кстати, сегодня ещё через него писали промты. То есть бюджет у нас вышел до 400 руб. Время около 20 минут. Справками будет больше, но опять же вы сами руками ничего не

[18:42] делаете, просто дали клоду. Клод делает всё самостоятельно. Не буду делать вид, что каждый пром срабатывает с первого раза. Вы сами видите, что есть косяки. Где-то шрифт налезает на колонку, где-то адаптивка недоделана. Но каждая такая

[18:54] проблема просто решается одним дополнительным запросом в клод. Год назад для такого проекта нужны были минимум три человека. Это дизайнер, верстальщик и аниматор. 2-3 недели работы, бюджет, желательно с пятью

[19:06] нулями. Сегодня один человек делает это за вечер. Этот человек не программист с десятилетним стажем. Это дизайнер, который разобрался в нейросетях. Именно поэтому я уверен, что дизайн взки с нейросетями - одно из самых

[19:19] перспективных направлений для входа прямо сейчас. Стартовать можно с полного нуля. Инструменты стоят копейки, а задач на рынке больше, чем людей, которые умеют их решать. И чем мощнее становятся нейросети, тем больше нужны люди,

[19:31] нейросеть не понимает, какой макет заставит нажать человека купить. Она не чувствует, какой вариант вызовет доверие. Она не знает бизнес заказчика. Всё это делает дизайнер. Если хотите разобраться в этой связке, приходите на

[19:44] марафон. 5 дней практики, реальные задания. Обратная связь лично от меня. На марафоне вы освоите Фигма, научитесь использовать топовые бесплатные модели нейросетей для дизайна, соберёте первые работы в портфолио и разберётесь, как

[19:57] что через неделю вы начнёте продавать сайты за 150.000 руб., но через 5 дней вы точно будете понимать, как устроен этот процесс, и сможете решить, хотите вы в этом развиваться или нет. Ссылка на марафон в описании и QR-код на экране.

[20:11] всего 20 человек, потому что все домашние задания проверяю я лично. Также, ребят, напоминаю про розыгрыш. Сертификат на Ozоon на 5.000 руб. и бесплатное место на марафоне ждут вас. Оставьте любой комментарий под этим

[20:24] видео, и вы уже участвуете. Итоги будут в моём Telegram-канале. На этом у меня приятно. Подписывайтесь на YouTube канал, чтобы не пропустить новые видео. Подписывайтесь на мой Telegram-канал, на мой Max. И помните, ребят, сейчас самое

[20:37] my Max. And remember, guys, now is the best time to start.