Nano Banana Pro + Gemini 3 = UI Дизайн уровень Бог

Вот что получается, если просто попросить Неросеть сделать вам сайт. Но если использовать нанобана и специальные пронты, то можно сделать действительно потрясающий фронтенд на уровне профессионального дизайнера. Я думаю, вам знакома эта боль. Клод, сделай мне классный уникальный веб-сайт, но получается какой-то фронт слоб. Давайте я покажу, как мы с Игоряном превратили вот это в вот это. Люди, роботы, привет. Это Продсовет. Меня зовут дядя Д. Сегодня у нас такая тема на стыке. дизайна и кодинга свавейбкодинга. Покажу, как при помощи нанобана и специальных промптов, которые мы для вас подсобрали, сделать классный, профессиональный, динамичный и дорогой сайт. Так что UI и UX дизайнеру даже и не понадобятся. Лайк, подписка, колокол- это помогает продвижению нашего проекта. Спасибо вам за поддержку. И давайте начинать. Для начала необходимо

определиться, что за сайт вы хотите создавать. Я предлагаю вам использовать такой промт и при помощи него разработать asки арт наполнение этого сайта. То есть первым шагом мы заполняем layаут. Это такой удобный, наглядный способ создать схему будущего сайта. И текстовые неронки неплохо справляются с ASK артом. Вот сюда, в раздел описания сайта, веб-сайта, вы можете добавить тот контент, то наполнение, которое вы хотите видеть на вашем сайте. Ещё пром предполагает, что можно скинуть ряд каких-то референсов и идей в виде картинок, если вы хотите. Но мы вообще ничего не скидывали. Мы просто вот скинули наполнение сайта и получили результат. Использовали Gный. Можете использовать, в принципе, любую модель. Он нам выдал финальный лейаут, он нас устроил, и мы дальше отправились работать в Nнобана. Мы с Греном

использовали нанобана фрипике, но на самом деле это просто удобный интерфейс, который помогает вам работать с большими объёмами. контента и быстро итерировать над вашими идеями. Но, в принципе, вы можете использовать нанобона где угодно. Если вы ни разу про нанобона не слышали, посмотрите наши предыдущие ролики. Итак, инпут в эту нейронку состоит из четырёх частей. Первое - это лейаут, в котором уже прописано всё, что должно быть на нашем сайте, от текста до картинок. Второе - это скрин главной страницы нашего сайта, потому что у нас уже есть и был сайт в том или ином виде. И мы решили добавить этот скрин, но просто, чтобы не растить слишком далеко, не уходило от текущей стилистики и хоть как-то её сохранило и не приходилось переделывать там все предыдущие страницы. Если у вас сайта нет ещё совсем, то просто опустите этот пункт, сходить в Pinterest или Freфontнend или Dribble и просто повдохновляться различными примерами, которые вы там найдёте. Ну и вот первый результат, который мы получили. Картинка соответствует тому лейауту, который мы требовали от наны бананы. И дальше просто последовательно и достаточно долго мы начали с Игоряном итерировать над разными идеями и выбирать то, что нам понравилось. Сложных промтов там дальше и не было, но скорее что-то вроде сделай более необычную вариацию креативность на 100. Сделай более необычную вариант вариацию, добавь интерактивные элементы, которые будут двигаться от прокрутки. Ну и когда наполнение нас устроило, просто допилили цветовой профиль запрашивая изменить цвет, не меняя лейаут и наполнение. Супер. Вот финальный результат, который мы от бананы получили. Такие у нас секции hero секция, в которой находится какой-то вот фон плюс картинка мозга, текст и кнопки. Затем секция как мы это сделаем, что находится внутри курса, потом что-то вроде там целевой аудитории и разбивка по тарифам. Текст здесь не идеальный, но самое главное, что мы хотим здесь от бананы получить - это именно вот этот лейаут и те визуальные асеты или элементы, которые мы потом отсюда вытащим и будем дальше использовать уже конкретно на нашем сайте. Я думаю, вы уже догадались, мы не дальше. Теперь встаёт вопрос, как всё это перевести в код. И если вы чуть-чуть и кодили, то, наверное, понимаете, что вот такую картинку Клод не нарисует. Какие-то карточки он вполне может сделать. Но наша задача теперь выделить те асеты, визуальные элементы, которые мы будем картинками добавлять на сайт, и определить, что из этого всего мы будем писать кодом. Вот промт, который мы использовали для выделения сетов. Я здесь прошу прислать все асеты одной секции в одной картинке, а не по отдельности, потому что так больше шансов, что банана не зафакапит и сделает всё в одной стилистике. Из этого макапа нужно убрать весь веб-дизайн, создать картинку, подходящую постелюю. На ней должны быть изо изображения для там переработанного раздела, для кого на чёрном фоне и так далее, и так далее. После того, как вы асеты получили, вы просто их берёте, вырезаете вам нужные, удаляете фон в любом фоторедакторе, уменьшаете там до размеров сотен килобайтов в идеале. И теперь отправляемся в наших кодинговых агентов. Как вы могли догадаться, сайт у меня уже был создан. Если у вас ещё ничего сделано не было, то просто стартуйте э новый проект в курсоре, например, я вот работаю в курсоре. И просите модель сделать вам по этому макапу сайт. И вот такой промт я использовал. У меня была уже страница, поэтому я здесь прошу нейронку поменять мой мою предыдущую страницу на новую. И начинаю её промтить с плана. какие элементы мы можем сделать в коде, что необходимо отрисовать, изучить другие страницы моего сайта

которые мы сделали в похожем стиле, но упрощённом дизайне, чтобы она перетащила какие-то компоненты, если они могут ей пригодиться. Далее я получил от нейронки план. Она тут решила использовать только header э шапку сайта. Все остальные компоненты она решила создавать, ну, что, в общем-то, достаточно логично. После того, как этот план был создан, я предложил ей сделать структуру будущего сайта, создать только те файлы тех компонентов, которые у нас будут, и пока код сразу весь не писать. И на самом деле дальше всё достаточно банально. Я просто прошу последовательно делать те иные секции. И если мне в какие-то моменты не очевидно, что вообще это будет за секции, какое-нибудь наполнение, я у неё прямо спрашиваю, как добиться такого результата, чтобы надпись "Как мы это сделаем", карточки частично заползали на космический фон? Отметь, что будешь делать при помощи кода, где необходимо оставить лейсхолдеры для визуальных элементов и видео, которые мы добавим позже. Вот такие результаты у меня получались сначала, но потом я просто все визуальные элементы, которые вытащил из бананы, добавил на место вот этих плейсхолдеров. Ну и попросил неронку их переместить и добавить анимации. Вот ещё один промежуточный результат, который у меня был. Как вы можете заметить, когда я добавил фон картинки, сразу всё заиграло новыми красками. Получилось повеселее. Вот этот вот элемент с терминалом мне Gemin предложил самостоятельно. И что стоит отметить, я использовал по большей части Gemin 3 Pro. Редко Clot OPUS 4,5. И мне больше нравилось, как Gemin справляется с фронт. Он работал быстрее, не усложнял, не менял стиль, а просто действительно делал то, что я ему и говорил. Давайте ещё раз посмотрим на финальный результат. Что у нас получилось? По-моему, получилось достаточно классно. Мы, как вы можете заметить, вот этот вот мозг усильно упростили, потому что не очень понятно было, как добавить вот эту вот сложную картинку, которую Бана предложила. Просто вытащили мозг. После этого со всякими анимашками прикольными и вот этими визуальными элементами, которые мы вставили картинками, сделали секцию, как мы это сделаем. После этого добавили очень простую секцию, что находится внутри библиотеки. Ну и затем сделали чуть-чуть переработали секцию с целевой аудиторией. Тоже, видите, все анимашки эти сюда добавлены. Дальше тарифы со своими анимашками. Это всё сделано исключительно при помощи кода. Здесь ничего, как бы, никаких визуальных элементов из банана я не вытаскивал, а просто скидывал референс и говорил: "Добавь, увеличь радиус свечениние, добавь вот эти вот более яркие, э, яркое свечение по центру, сделай обрубленные углы кнопок и так далее, и так далее". Ну и раздел call to action вообще целиком и полностью придуман. Джемина я сказал: "Сделай в таком же стиле мне call to action секцию". Тут даже от банана мы ничего не просили. Надеюсь, ролик оказался полезным и вам стал чуть больше понятен тот workflow, который можно использовать для того, чтобы создавать более уникальные дизайны и фронт ваших и приложений, и сайтов, и чего бы то ни было. Ещё не забывайте, что стартует программа и Разраб, где можно вот в такой поддерживающей атмосфере на практике попробовать и конкретно то, что мы здесь с вами разбирали, и поразрабатывать свои продукты, и поучиться работе с и инструментами. Все промты, которые мы здесь вам показывали в этом ролике, будут либо в нашем боте, либо в нашем

Telegram-канале. Поэтому переходите по ссылкам в описании и забирайте. На этом всё. С вами был дядя Д, канал Продуктивный совет. Спасибо за просмотр. В будущих выпусках увидимся. Пока. M.