3 Способа Создать РЕАЛЬНО Красивый Сайт и Приложение с Cursor AI (Cursor AI, ChatGPT, Shadcn)

Всем привет. Ну что, сегодня к концу

видео мы с вами станем дизайнерами, которые используют искусственный интеллект и показывают неплохие результаты. Ну потому что давайте на чистоту, когда мы пытаемся с помощью искусственного интеллекта создать какой-нибудь сайт или приложение, мы чаще всего получаем результаты, ну, вроде таких, да, что это минималистичное, с какими-то подложечками, да? А если мы более усердные, то мы получаем что-то такое с подложечками, но с какими-то шрифтами странными градиентиками. Но ведь когда мы начинаем работу над дизайном, нам же кажется, что мы получим что-то такое более симпатичное, более привлекательное, более плавное, ну или, если хотите, модное, правильно? Поэтому сегодня к концу видео мы с вами пройдём несколько техник, которые позволят нам получать результаты, которые мы сможем с вами назвать более эстетически приемлемыми. Чаще всего, когда мы начинаем работу над приложением или дизайном, мы пишем что-нибудь: "Сделай дизайн профессиональным, сделай дизайн красивым или минималистичным, создай то-то и то-то". Чаще всего такой промт мы используем. Иногда мы прикрепляем какие-нибудь скриншоты, сайты, в которые нам нравятся, но результаты нас далеко не всегда радуют. Верно? Как это исправить? Подход номер один. Мы должны

описывать дизайн системы до того, как мы начинаем создавать наши сайты. Что я имею в виду? Давайте найдём какие-то примеры дизайнов, которые мы считаем эстетическими, которые нам подходят и в стиле которых мы хотели бы создать наш сайт. Давайте тряхнём стариной, да, используем dribble. Dribble - это коллекция дизайнерских работ. Найдём, например, что-то такое, что цепляется за наш глаз. На удивление мало что цепляется. Так, ну вот я нашёл какой-нибудь какую-то картинку, которая выглядит как современный, а модный дизайн. Ну, допустим, почему бы и нет? Давайте сделаем скриншот этой картинки, да? Делайте любым инструментом скриншот этой картинки. Он у нас появился. После этого мы можем уже попробовать, а, попросить искусственный интеллект описать дизайн-систему этого скриншота. Поэтому выбирайте, а, нейронку, которой вы пользуетесь. С этим классически хорошо справляется клод, да, от Anтроopic. Ну, так как мы использовали несколько раз уже в наших предыдущих проектах чат GPT, давайте попробуем с помощь с помощью него описать дизайн-систему этой картинки. Друзья, но прежде чем мы продолжим, я вам напомню, что вам обязательно нужно подписаться на этот канал, поставить лайк, написать комментарий какой-то, потому что так видео продвигаются лучше, и поставить колокольчик. Все материалы, промты, например, пром из этого видео или автоматизации из прошлых видео всегда присутствуют в бесплатном Telegram-канале. Ссылка на него будет в описании. И обязательно посмотрите нашу платную прогруппу. Там уже более 50 человек энтузиастов ежедневно общаются про искусственный интеллект, внедряют его в свой бизнес, бустят свои карьеры, и там выходят видео в два раза чаще. То есть к каждому YouTube видео практически всегда выходит углублённое видео в прогруппе, где мы по косточкам разбираем применение искусственного интеллекта интеллекта. Например, к этому видео. Там выйдет дополнительное видео, где мы законнектим сегодня созданный сайт с NVC для того, чтобы они коммуницировали и автоматизация работала непосредственно с вашей лендинг-страницей. Там просто очень горячо, так что обязательно тоже туда подписывайтесь. Ну а мы погнали дальше. Так, у нас уже есть скриншот. Давайте его прямо вставим в окно чате внимание, я специально тут использую бесплатную версию. Да, вам не нужно платить за эту версию. И давайте добавим сюда специальный прот, да? То есть, смотрите, очень важно понять, что мы просим сделать. Мы хотим создать JSON профиil дизайнсистемы. То есть мы просим описать картинку, которую сейчас видит Неронка, и выдать нам ответ в формате JSON файла, где будут описаны нюансы, которые позволяют другим нейронкам воспроизводить этот дизайн. Это довольно сложная задача для нейронок. Давайте посмотрим, как а чат GPT с этим справится. Так, отлично, пошла генерация. И смотрите, как он описывает всё, что он видит, да, описывает различные элементы. Мы специально попросили не включать сюда контент самого сайта, да, а только описание для того, чтобы следующая нейронка, которая будет создавать нам сайты и на основе этой картинки знала, как себя вести. Отлично. Он сказал, что я описал. Ну, проверять мы не будем, да, но выглядит как-то, в принципе, нормально, да, описывает, что тёмный стиль, да, а радиальные линейные градиенты. Да, мягкие свечения и прочие нюансы, которые действительно присутствуют на этой картинке. Давайте заберём этот JON и пойдём в наш курсор. Итак, мы открыли курсор совершенно в а пустой папке. Каким образом работать с курсором, да, где его скачать, как открыть сайтбар с нейронками. Мы это в прошлых видео уже много-много раз обсуждали, поэтому здесь мы не будем с вами на это акцентировать внимание. Просто скачайте себе курсор. Да, там всё, в принципе, понятно. у вас будет довольно хороший бесплатный usage курсора, который вам хватит точно, чтобы создать ваш первый сайт, да? А после этого вы уже сами решите, нужна ли вам платная версия. Мы теперь открываем сайдбар с нейронками, да, в режиме агент, да, совершенно полностью пустой, а пустой проект. Мы вставляем весь тот JSON, который нам сгенерировал чат GPT. Отлично. И добавляем промт. Создай лендинг на одной странице, отображающим метрики прогресса студентов, активные курсы со статусом выполнения, графики производительности, да, всё это в едином макете на основе карточек, включи кнопки быстрого действия и прочее, прочее. Например, вот я придумал, что я хочу LНOS, который отображает вот такую успеваемость студентов и их прогресс. Сейчас мы сильно не будем усложнять и попросим создать лендинг только на основе HTML, CSS и JavaScript. Да. И самое главное, мы говорим: "Строго следуй дизайну из JON ниже". Да. И, собственно, мы прикрепили уже наш JSON, который описывает все детали дизайна, которому нужно следовать. Ну что, погнали. Начинается генерация. Начинается создание файлов. Так, ну что, нам говорят, что готово. Мы создали индекс HTML, стили CSS, скрипты JS. Ну что, давайте смотреть, что же у нас получилось. Так, прогресс обучения. Смотрите, неделя, месяц. Обратите внимание на карточки с подсветкой. Я понимаю, что не все из нас сочетуют это идеальным, да, слишком уж болд, да, и в лоб, да, это далеко от минималистичного дизайна. Ну, такой мы скриншот выбрали. Если мы вспомним, какой мы скриншот подобрали себе, да, с подобными анимациями и с подобными градиентами, мы увидим, что, в принципе, а курсор довольно хорошо следовал гайдлайнам нашей дизайн-системы, да, и за следующей итерацией уже, конечно, можно поправить остальные элементы, которые работают не очень. И даже он нам создал здесь а попа для AI ассистента. Смотрите, по сравнению с тем, каких результатов мы добивались с самого начала, да, вот такой или вот такой, мы подходим к тому, что, в принципе, мы можем, мы теперь уже умеем описывать дизайн системы и за несколько итераций получать, ну, скажем так, прямо намного лучше результаты, да? Это только одна итерация. Если здесь потратить ещё немного времени, то можно прямо изрядно улучшить финальный результат. Обратите внимание, не только анимация готова, но наведение на графике курсора, всплывающей подсказки. И здесь тоже. Ну, то есть много чего уже сделано за нас на хорошем уровне. Итак, это был метод один, и он прекрасен, если у вас уже есть дизайн, который вы хотите скопировать его дизайн-систему и применять на ваших сайтах или на ваших приложениях. А что, если вы хотите создать свою дизайн-систему и следовать

ей? На самом деле, есть куча разных генераторов дизайн-систем. Вы, наверное, их знаете лучше меня. Я вам покажу одну, которая, ну, которая сейчас довольно популярна, много кто ей пользуется. Она создана для того, чтобы стилизовать крутую библиотеку компонентов SHCN, которая используется в массе продуктов. Соответственно, если мы перейдём на сайт txcn. com и здесь мы нажмём кнопочку Start Customizing, мы видим стандартные компоненты SHCN и как к ним применяются текущие стили. Здесь есть выбор, а, уже подготовленных компонентов. Ну, мы вы можете подобрать какие-то на свой вкус и цвет, да? Давайте, допустим, выберем графитовую тему. Мы сразу сможем посмотреть, как она будет выглядеть в тёмном и в светлом исполнении. И самое важное, что нас здесь интересует - это код сам Snippet. Соответственно, мы тут увидим некоторый некоторое описание индекс CSS, да, которое мы можем забрать и уже отдать наши нейронке. Давайте попробуем прямо этот стиль применить к нашему приложению, которое мы только что создали. Возвращаемся и продолжаем тему. И говорим: "А теперь примени эти стили к моему приложению". Наверное, в конечном результате он попытается смиксовать текущие стили и новые стили, но для изучения нам это подойдёт. Вы, скорее всего, будете использовать либо подход номер один, либо подход номер два с самого начала, пока он генерирует нам приложение, обратите внимание, что любую тему, которую вы выбрали, вы можете кастомизировать, да, например, поменять акцентный цвет. Вы сразу будете видеть, каким образом он применяется, да, в каких местах будет использоваться на компонентах. Также вы можете поменять типографику, да, фонты, которые используются, и всё-всё-всё вы можете совершенно свободно кастомизировать и в конце уже забрать готовый CSS скрипт для того, чтобы использовать в курсоре. Ну что, все основные стили, да, нашего приложения теперь переведены полностью на переменные из нашего набора. Ну, идём смотреть, что получилось. Вот как у нас выглядел до обновления наш сайт. Смотрите, так стало явно хуже, да, но теперь мы понимаем, что пронаследовался весь набор переменных, да, все стили, которые мы создали, да, нейтральные стили в Twixn, да, и если бы изначально мы применяли только его, то система бы следовала прямо этим принципам. Сейчас, конечно, у нас микс франкенштейн, но теперь вы увидели, каким образом это работает. Так, я только что откатил изменения для того, чтобы у нас была более или менее годная версия сайта. Соответственно, метод два хорош, когда вы сами хотите создать себе тему, да, и дать с помощью неё инструкции для вашей нейронки внутри курсора, для того, чтобы мы чётко следовали заданным стилем в приложении, да, и чтобы оно соответствовало вашим эстетическим выборам, которые вы сами сформировали. И, наконец, третья тема, которую мы поднимем. А что, если мы

хотим не просто задавать стили для приложения или сайта, которым нейронка должна следовать? А если мы хотим точечно внедрять нужные нам компоненты, которые нас устраивают, и мы хотим их иметь у себя в приложении, существует уже большое количество подборов компонентов, например, 21 de, где мы можем просто посмотреть компоненты, которые подготовлены, да, которые мы можем использовать. И более того, они нам подсказывают, что мы можем не просто использовать компонент, а скопировать промт для внедрения этого компонента в нашу наше приложение. Здесь открывается прямо огромный мир того, как это делается. И мы будем это делать в следующих видео. То есть тема создания дизайна с помощью искусственного интеллекта для меня, как в прошлом продуктового дизайнера, она мегаинтересна. Соответственно, обязательно подписывайтесь на канал, чтобы не пропускать следующие видео, где мы будем только развивать и тему дизайна, и конвертации его в реальные приложения, интеграции его с бэкэндом, интеграции с N8N, другими автоматизациями, то есть очень много всего. Но именно для сегодняшнего видео давайте вернёмся на сайт, который мы видели в самом начале, да, reactbits. def. У них есть компоненты, которые как раз ориентированы на анимацию, да, на WУфактор. Не каждому это нужно, да, не в каждом сайте это должно присутствовать, но так как у нас есть наш личный уже сайт, где много всего светящегося и гламурного и градиентного, наверное, будет неплохо смотреться и какой-нибудь градиент из этой библиотеки. Мы проскролим вниз. Выберем какой-нибудь бэкграунд, допустим, да, который нас устроит. Не знаю, такой вот вас устроит, а может быть такой. Давайте попробуем прямо такой бэкграунд вмплементировать в наше приложение, да? Здесь есть вкладочка код. Мы её нажмём. И здесь описан, в принципе, usage того, каким образом нужно в имплементировать этот бэкграунд в наше приложение. Мы заберём с вами весь код, который здесь представлен. Вернёмся в код. Вставим первый код. Так как у нас приложение на JS, мы его не усложняли, да, прямо забираем JS готовый, вставили сюда. И в конце ещё даже чуть-чуть CS вставили сюда. И сверху напишем такой промт. Теперь имплементирую этот бэкграунд градиент. В самый верх страницы ниже представлен код, как именно его следует внедрить. Ну, погнали. Ну что, адаптация завершена. Авроракграунд теперь работает в обычном HTML без React. Ну что, выглядит, вообще говоря, неплохо. Наш градиент, который вверху страницы, да, наш прогресс обучения и все оставшиеся анимации, которые мы изначально задавали. Ну что, теперь мы знаем три довольно простых техники, которые нам позволяют сразу строить приложения веб-сайты эстетически приемлемыми и за несколько итераций приводить их к результату, который, в принципе, всегда выше среднего. Ну что, увидимся в следующих видео. Пока. M.