Untitled Video

[0:00]За последние 6 недель случилось несколько вещей, которые навсегда перевернули то, как мы видели дизайн. Помните, какие уродливые были AI сайты буквально год назад? На тот момент нейронки буквально не умели правильно работать с типографикой, определять цвета. И вообще до сих пор у многих проектов дизайн выглядит уродливо и не имеет никакого смысла. Но сегодня ЛОТ умеет создавать дизайн, который будет лучше, чем 90% дизайнеров. Просто посмотрите для примера, вот стандартный неросетевой проект. Вот проект с Behinds, который написан дизайнером. А вот мой проект от Clлоodда. Я создал свой онлайн-продукт ещё несколько месяцев назад. Заработал с него несколько миллионов рублей. Но самое главное, мой онлайн-продукт не выглядит как дизайнере сети. И в этом видео я поговорю про основные приёмы, как сделать дизайн, как у топ-студии, при этом сделать его без дополнительных подписок. Меня зовут Ромарай, ты на канале Нейропросвещение. Поехали. Давайте коротко разберёмся, что я подразумеваю под нерелопом, под неред дизайном, который обычно выглядит ужасно. Взял просто рандомные примеры из нашего чатика в Telegram-канале. Вот эта вот ошибка начинающего дизайнера, когда у тебя элементы текста выглядят, как будто бы они не вместе. Здесь у нас абсолютно всё выглядит таким намешанным друг на друга. Никакой композиции, конечно же, здесь не было. То есть эта исключительная история всегда на скорую руку лишь бы работала. И когда ты делаешь это для себя, ок. Но когда ты подразумеваешь, что это будет твой полноценный проект, это будет проект, который будут покупать, такой подход не работает, потому что пользователь просто не будет тебе доверять. У нас сам лендинг создан именно дизайнером, потому что делали мы его до того, как появился клод дизайн. И это классный лендинг, который очень с хорошей конверсией. Но если мы зайдём внутрь продукта, абсолютно всё здесь было сделано клодом. Посмотрите на дизайн. Это уже не история, да, про то, что что-то тут сбивается, выбивается с места и так далее. По факту здесь уж дизайн вы не отличите от действительно хорошего продукта и вы не отличите его, например, от конкурента, потому что конкурент вообще вот так вот выглядит, чтобы вы понимали, хотя там нет никакого вайб-кодинга. И на самом деле то, почему он так рисует, объяснимы буквально двумя инструментами, которые появились за недавнее время, потому что до этого момента мне приходилось буквально делать танцы с бубном. Во-первых, у нас появился клод дизайн. Например, дизайн, который вы сейчас видите, эта самая презентация тоже была сделана в клоддизайне за один промт, потому что сюда подгружена стилистика моего канала и всё делалось настолько просто. Во-вторых, появился Mobin MCP. Мы научились использовать большое количество дизайнпроектов для насмотренности. И сегодня абсолютно в каждом моём проекте есть вот такой UI Kit. И этот UI kit как раз-таки нужен для того, чтобы агент, когда создаёт дизайн, не ложал, знал, какие отступы, какие шрифты, какие кнопки и так далее. Е, если с клоддизайном, я думаю, всё понятно, у меня про него было отдельное видео. Вот здесь вот по подсказке на экране ты можешь его посмотреть, то Mobin MCP знает не такое большое количество людей. Во-первых, про то, как его подключить и всё остальное, я оставлю инструкцию и расскажу, как это сделать в конце видео. Но пока что давайте перейдём на главные их сайта и посмотрим. Это библиотека, в которую добавлены 600.000 экранов реальных интерфейсов реальных компаний. И когда вы используете их MCP и даёте задачу, например, Клоду продумать дизайн следующего приложения, когда у нас будет бронироваться отель, он волей неволей сориентируется на действительно крупные примеры и смотрит на их приложение. Здесь есть абсолютно всё. Здесь есть долинго, букин и все возможные дизайны. Вам больше не придётся ничего скачивать или устанавливать самостоятельно. Хотите создать прототип действительно хорошего кинотеатра, пожалуйста, вот у вас есть Дисней. Но понятное дело, что руками вы не будете 600.000 вкладок листать, хотя для вашей насмотренности я бы тоже советовал. Поэтому для агента, для того, чтобы у него была насмотренность, и существует встроенная MCP. Но Mobн - это только часть интерфейсов, которые будут позволять вам создавать действительно крутой дизайн. Давайте разберёмся в их всех. Во-первых, Cloud дизайн идеален для прототипов. Если сегодня вы подгружаете в cloudдизайн примеры своего дизайна, референс и Китай и так далее, он создаёт потрясающий дизайн. Например, вот такой вот референс, буквально скриншотом из ФигM, я подгружал для того, чтобы создать мой персональный сайт. Из брендинга получился вот такой лендинг, который выглядит, ну, просто впечатляюще в том плане, что он может выглядеть специфично с точки зрения вкуса, но он выглядит впечатляюще в плане качества и соответствует тому дизайн-киту, который я создавал. Это заслуга клоддизайн. лучше, чем clддизаign. На текущий момент никто не создаёт дизайн по референсу, по, допустим, каким-то примерам и UI, которые вы можете в него отправить. Далее, конечно же, идёт Mobн MCP, как главный референс того, что вы можете создавать. Здесь логика будет максимально простая. После того, как вы подключаете агента, вы можете буквально попросить агента найти там пятьбоing flows, то есть пять онбординг планов, как именно в приложении создать карту обучения пользователя, и он будет это находить. На всякий случай уточню. Это можно использовать полностью бесплатно, либо платить за там минимальную подписку для того, чтобы подключить свой MCP. В своём закрытом Telegram-канале я выкладываю каждую среду один пошаговый урок по тому, как мне удаётся расти с помощью неростей, как я веду свои социальные сети, расту на этом YouTube-канале, в моём Telegram-канале больше 10.000 подписчиков за последние несколько месяцев. Как я создаю мои VIP продукты? Например, у меня есть вот такое приложение AI, которое создано без руки программиста. При этом на сегодняшний день его МРRР более полумиллиона рублей в месяц. ну и десяток других юзеркейсов, как я прямо сегодня применяю нейросети в своих бизнес-проектах и в своих медиапроектах. Про всё это мои пошаговые уроки о том, как создавать код с помощью вайб-кодинга, как я веду свой YouTube канал, как сделать skills, как писать промтинг и многое другое. Вот только часть уроков, которые уже вышли в моём закрытом Telegram-канале. И самое главное, он абсолютно бесплатен. Всё, что вам нужно для того, чтобы смотреть это видео, перейти по ссылке в описании и нажать кнопку просмотр. Уроки, которые я точно вам рекомендую посмотреть- это урок про то, как выбрать нишу для своегод продукта и как искать клиентов на свои услуги, если вы хотите продавать знания по нерестям. Ссылка в описании. Переходите, регистрируйтесь, давайте продолжать. Клод-код всё ещё остаётся для разработки, но лично я предпочитаю в clд-код добавлять её и киты для того, чтобы было проще вести эту разработку. Давайте покажу дизайн-систему. мы её создавали на курсе вместе с приложением для одного из моих проектов. И здесь мы можем видеть, что у нас как раз-таки вот эта вот типографика, все кнопки, все стили. Это уже создаётся после того, как вы набросали в клод дизайне. Это создаётся под конкретный проект внутри вашего приложения. И как итог уже далее, когда я создаю новую функции вместе с клод-кодом, я не иду в clД дизайн продумывать каждую из них. это не имеет никакого смысла, потому что когда у тебя есть UIT, у тебя зафиксированы правила в клодмD либо агентом D, если ты делаешь это не с клодом, он соответствует этим правилам и использует те элементы интерфейса, которые были изначально добавлены в UI Kit. Поэтому UI Kit - это одна из самых важных вещей ещё на этапе до того, как ты создал первую страницу кода, чтобы потом просто не пришлось переделывать и страдать из-за этого. Далее, например, в P для того, чтобы не переписывать всё с нуля, это выбирал агент, а не я, у нас используется библиотека SHCN. Во-первых, как это установить, опять же, будет в конце видео вместе со всеми материалами. А вот что это такое, давайте разберёмся. По сути, 7 представляет собой готовую библиотеку различных интерфейсов для того, чтобы вам не нужно было с нуля, например, создавать какую-то форму, меню, актуальный баланс или что-то ещё. Например, если вы создаёте приложение на заказ или для себя лично, вы можете вообще не делать UI kit, не делать никаких цветов, а сделать вот такое чёрно-белое приложение зато будет выглядеть идеально, потому что в их библиотеке десятки различных компонентов и блоков, 115.000 скачиваний на GitHub. И это вообще мастх на сегодняшний день для того, чтобы ускорять свою разработку. Также как дополнительный инструмент, способный помочь тебе создавать впечатляющий дизайн, будет Twix в первую очередь, да, для того, чтобы создавать различные цветовые расцветки. Magic UI, 150 компонентов будет у тебя абсолютно бесплатно, но уже за дополнительные придётся платить. Быстро разберём, как это будет выглядеть. Вот здесь есть прямо готовые примеры сайтов, которые созданы с помощью этой библиотеки. Вы можете на них перейти, но основное. Нажимаем брауз компонент. И вот они десяток компонентов анимированных, которые мы могли бы использовать для нашего сайта. Например, вот такой вот анимированные там патраб с логотипами и так далее. Вам не нужно всё это знать и уметь, потому что за вас это всё будет уметь агент. Ну вот, например, можно мне анимацию создать подобного рода? Качественно её будет создать с помощью готовой библиотеки. А также существуют даже отдельные библиотеки специально для ярких элементов и эффектов. На примере, если вы создаёте сегодня лендинги, именно эта библиотека, на мой взгляд, является мастхм. Давайте объясню, почему. Мы до этого смотрели как раз-таки ужасные лендинги того, как часто делают нейросети. Вот с этими компонентами у вас такого не будет. Здесь есть и блоки стандартные, которые используются с анимациями со всем. Здесь есть паралакс блоки, да, для того, чтобы вы могли спокойно двигать мышкой. Возможности создавать дизайн даже подобного рода, когда вы нажимаете и так далее. То есть это буквально must have и даже лучше, чем Mobin MCP, потому что те референсы, которые здесь создаются, и те сайты, которые вы в дальнейшем можете создавать с помощью подобных библиотек, они не просто наравне крутых САС. По сути, крутые САС и используют, в том числе эти готовые библиотеки. Перед тем, как пойдём дальше, есть важный анонс. Я запускаю свою первую версию курса по созданию продуктов с помощью Неросети. Это не будет очередным курсом, на котором вас учат, как нажимать кнопки. Для того, чтобы научиться нажимать кнопки, достаточно посмотреть этот YouTube канал и подписаться на мою закрытую систему бесплатное сообщество, в котором я каждую среду публикую уроки. Поэтому первый модуль курса про основывание растей и вовсе будет взяться из моего YouTube и доступен на этом канале абсолютно бесплатно. Ну вот что действительно будет в курсе, так это те знания и опыт, которые я получал за последние полгода с создания своего продукта в виде ULIPI, онлайн-сервис, который принёс мне более 1 млн руб. Чистой прибыли в первый же месяц. создание этого YouTube-канала, создание Telegram-канала, которые просто летят в космос с помощью E-системы, которую мне удалось выстроить с минимальным количеством команды, управление продуктами и в том числе оффлайн физическим бизнесом, так как у меня есть Fullfillment, агентский бизнес с помощью агентов, которые работают и автоматизируют вашу работу, с помощью вайп-кодинга, для того, чтобы создавать инструменты, которые раньше были недоступны небольшим командам. Всё это будет на курсе, начиная от поиска ваших суперспособностей, заканчивая тем, что мы создадим ваш первый MVP стартап. Если вы сегодня не собираетесь создавать свой солопродукт, ничего страшного, это и не обязательный этап, потому что на курсе будет в целом невероятно важная информация по тому, как выбирать нишу, как оценивать идею для вашего продукта или для фриланслуг, как правильно автоматизировать работу для себя и создавать продукты для себя, как создавать продукты на заказ. Потому что не у каждого программиста есть свой солопродукт, но при этом программист продаёт знания, создавая код. Точно также свои знания, создавая продукты для бизнеса и экспертов, блогеров, сможете продавать и вы, создавая действительно крутые инструменты на заказ. И про это также будет отдельный модуль. Ну и в финале мы, конечно же, с вами создадим MVP продукт, а также научимся его продвигать с помощью YouTube системы, которую вы полностью скопируете у меня. И всё это с проверкой домашних заданий лично от меня. Подробная информация о курсе по ссылке ниже. Давайте продолжать. Ну и из последнего существует большое количество альтернатив клоддизайну. На самом деле, я бы советовал тебе сегодня использовать Openдизай. Про него было отдельное видео по подсказке на экране, можешь посмотреть. Openдизаign будет работать и с клодом, и с кодексом. Плюсом к этому Openдизаign по сути является клодом а cloud дизайна. Кажется, он чуть-чуть упрощённее. Ну и дополнительный инструмент, который вы можете использовать, введите на экране. С инструментами разобрались. Теперь давайте перейдём к ошибкам новичков. Да и не только на самом деле, потому что может быть хорошим программистом, но дизайн и чувства стиля у тебя нет чудово вкуса. Поэтому сайт у тебя ужасный, но приложение работает классно. А если сайт у тебя изначально ужасный и лендинг вообще непонятный, то о том, что у тебя классное приложение, кроме тебя так никто и не узнает. Ну, во-первых, никаких пустых экранов. Если вы создаёте приложение, у него всегда должно быть объяснение. Если человек в первый раз заходит в ваше приложение, покажите ему онбординг, тот самый, который мы только что видели. Если человек заходит на какую-то страничку, у него там нету заполненных данных, например, у него есть таблица аналитики товаров, но пока что товаров нет. который анализирует. Покажите ему какую-либо заглушку. Не дайте ему чувства того, что что-то сломано. Я вам минимальные промты здесь тоже буду давать. Воспринимайте их как идею для того, чтобы закидывать их в клод, который у вас продумают пронты для клодко, либо как-то у вас реализовано, и чтобы вы прямо сегодня смогли применить это в своих проектах. Вот здесь уже можно сказать, что ссылка на все материалы из этого видео и на все промты, и на все команды и на все сервисы будет в описании. Просто переходите по ссылке либо по QR-коду, там найдёте материалы к этому видео и ко всем предыдущим. Это абсолютно бесплатно. Переходите, забирайте. Дальше кнопки, с которыми многие ложают, потому что стандарт идёт с тем, что у вас всегда должны быть два формата кнопок. Как минимум у вас есть основные кнопки, у вас есть кнопки дополнительные, которые идут вместе. Это не должен быть один цвет, это не должно быть плоско выглядеть, то есть это всегда на элементе контраста. Точно так же, как и ваша цветовая схема, тоже должна быть на элементе контраста. Не то, что у вас тут чёрный фон, а вы белый попап поверх него кидаете. Это всё-таки должна быть какая-то история про тёмный фон. На нём сероватый попап, на нём оранжевая кнопка. Вот это действительно выглядит хорошо. Дальше идёт типографика. Отличает нересайт обычно то, что у тебя типовая типографика. То есть те есть просто заголовок и текст. Хотя на самом деле у тебя заголовки должны быть всегда разделены по форматам. У тебя должен быть основной заголовок, который используется на стартовом экране, да? Например, у тебя должны быть подзаголовки и так далее. я хотя бы три-четыре уровня заголовков, которые ты будешь использовать. И даже сравните на этом экране, как по-разному иногда может выглядеть простейший дизайн. Хотя и то, и то сделано в клодкоде. Не то, чтобы я на это много времени тратил, просто дал один промт для того, чтобы он показал эту разницу. Элементы загрузки. В вашем интерфейсе не должно быть никаких загрузок по 10 минут. Даже если у вас суперкрасивый ландинг, но загружается он больше 2 секунд, его никто не увидит. Поэтому в идеале у вас должна быть загрузка прямо по блокам. Ну и, во-вторых, никаких загрузочных анимаций. Вместо этого уже давно все используют скелетом, когда у вас просто SВ элементы, как вот здесь вы можете увидеть, похожие на ваш реальный интерфейс, который показывает, что сейчас всё загружается. И если говорить о том, как это на сегодняшний день работает Vulip AI, у нас там подключено более 3.000 пользователей, более 1.000 магазинов, более 150 платных пользователей, то по факту у нас собирался по стекуn как компонентная база, Twixen для брендовой палитры у нас был использован и Mobin плюс dribble. Я больше задрибл. Использовался для того, чтобы смотреть референсы интерфейсов. При том, что смотрить их я отправлял обычного агента в браузере. Сейчас уже мы используем просто clдизаign. Никаких дополнительных именно дизайн приключений у нас нету, ну, кроме по-прежнему просмотра референс. И это позволяет до сих пор создавать действительно впечатляющий дизайн, при том, что он создаётся полностью агентом. Напиши в комментариях, что изменишь в своём дизайне после этого видео. Последнее видео по подсказке материалок видео тоже по ссылке ниже. Увидимся.