Claude Code + Nano Banana: создаем продающий сайт за 20 минут

Раньше, чтобы сделать крутой сайт, подобный этому, нужно было очень долго искать подходящую студию, отдать кучу денег и ждать огромное количество правок. Но благодаря этой невероятной связке Nan Banana 2 и Clot Cд такие сайты можно делать за 20 минут. И сегодня мы максимально подробно разберём, как создавать такие профессиональные сайты. Перед тем, как перейти к делу, прошу подписаться на канал, поставить лайк этому видео и написать комментарий. Это невероятно продвигает канал и мотивирует снимать более интересные видео для вас. А мы приступаем.

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

поговорим позже. Мы разобрались, как пользоваться код. Теперь нам нужно подготовить материалы для нашего сайта. Для видео я буду делать сайт, посвящённый игровой клавиатуре Warmillo. Для этого нам нужно пойти в интернет и найти подходящее фото нашего продукта. Может быть ещё и фото клавиш, и свичей, чтобы сделать несколько анимаций на сайт. После того, как вы выбрали подходящие фотографии, мы идём в Hiixfield. Там мы будем делать основную работу. После того, как зашли, переходим в изображение, а именно в Nan Banana 2, и вписываем такой промт, который разберёт нашу клавиатуру на составляющие, чтобы потом мы могли это красиво анимировать. Вот такой результат у нас. Мы получили нашу разобранную клавиатуру. Давайте также сделаем с клавишей и свитчем, чтобы они тоже были разобраны, тоже получили отличный результат. Теперь нам нужно перейти к анимации наших изображений. Для этого переходим в клин 3. 0. Вставляем наше первое изображение и второе уже разобранное. Далее вводим вот такой промт, который нам это всё красиво анимирует. И получаем вот такой потрясающий результат. Я его даже переделывать не буду, но если у вас с первого раза получилось не совсем качественно, просто попробуйте что-то изменить в промте и повторить несколько раз. А мы повторяем это же самое действие ещё раз, только уже с клавишей. Получаем вот такой результат, который тоже меня вполне устраивает.

После того, как мы получили все наши анимации для сайта, нам нужно сделать для клода подробное ТЗ. Только я его буду делать не простым пронтом, а подготовлю текстовый документ, в котором всё будет подробно расписано. Его вы можете создать в самом же Clotд либо в другой LLM-модели. Тут на ваше усмотрение. На самом деле это самая простая часть, но при этом достаточно важная, потому что на сайте нужны какие-то осмысленные тексты. И для этого заходим в клод, вставляем наше видео и просим сделать документ, где будут все тексты для нашего сайта. Плюс, чтобы они отлично подходили под наши анимации и идеально становились на свои места. Готовый документ вы можете посмотреть на экране. А теперь переходим к самому основному. Но перед этим нам нужно создать папку на компьютере, куда мы сгрузим все наши материалы и сам документ с подробной инструкцией. Далее мы переходим уже в сам плод-код, выбираем путь, откуда он будет брать все материалы, и вставляем вот такой промт, чтобы полностью объяснить всю ситуацию и задачу. Ну и запускаем. Теперь мы должны немного подождать, так как задача непростая, поскольку там есть анимация, которую нужно подстроить под скролл по сайту. Мы видим размышление клод, и он даже выдаёт изображение того, как он это делает.

А вот и наш результат. Слушайте, по-моему, просто невероятно получилось, учитывая, что я на это потратил со всеми моментами 20 минут, а не делал это за большие деньги. целый месяц. А если потратить на это час или два, по мне, так можно добиться очень крутого результата и получить реально рабочий и продающий сайт. На этом примере мы видим, что все тексты расположены в отличных местах, все анимации выглядят супер, при скроле ничего не ломается. Самое главное, что теперь вы можете создать вот такой сайт за 20 минут, потом сразу посмотреть результат. Если нужно, внести необходимые правки, после чего вы можете выгрузить всё это на GitHub, в дальнейшем полноценно использовать сайт, либо использовать суперпростой метод. Взять код этого сайта, зайти на любой конструктор сайтов и вставить его туда и опубликовать. Я прямо удивляюсь каждый день, что могут творить нейросети. Потому что несколько лет назад подумать о том, что мы можем взять идею и за 20 минут создать вот такой сайт, это было что-то из ряда фантастики. Поэтому идите в ногу со временем, изучайте новые технологии и внедряйте нейросети в свою работу, поскольку это уже обязательная часть для любого дела. А для того, чтобы не отставать, подписывайтесь на мой канал, ставьте лайк и напишите комментарии, как бы вы ещё использовали эту потрясающую связку инструментов. Всем приятного прорыва. Пока. M.