2 Лучших Способа Делать UI Дизайн с ИИ (shadcn, Cursor, MCP)

Друзья, всем привет. Ну что, сегодня мы с вами продолжаем становиться профессиональными продуктовыми дизайнерами. И даже если вы мало занимаетесь дизайном, то наверняка вы слышали о том, что существуют библиотеки компонент, которые могут вам довольно сильно упрощать жизнь, когда вы строите какой-то фронт-endд или интерфейс или даже веб-сайт. Одна из самых популярных библиотек - это, конечно же, SHCN, то есть она используется в массе продуктов, включая даже интерфейс Open AI. И, в принципе, это решение, которое позволяет вам внедрить очень классные, лаконичные интерфейсы в ваш продукт и даже использовать различные динамические компоненты, которые чаще всего работают прямо из коробки. И сегодня мы с вами научимся строить полноценные интерфейсы для приложений, буквально за считанные минуты, инструктировать правильно нейронку для того, чтобы она вам отдавала крутейшие результаты буквально за пару промтов. Это не кликбейт, это реальность. Так что, если интересно, лайк, коммент, подписка, ну и смотрим до конца. Мы с вами уже какое-то время назад говорили про то, каким образом можно создавать крутые дизайны. Поэтому, если вы не видели то видео, то поищите его. Я думаю, оно вам тоже сильно понравится. А сегодня мы с вами поговорим не просто про SHSEN, а ещё и про MCP-сервер, который разработчики этих компонент довольно давно уже выкатили и регулярно обновляют. Вы можете сказать, что, ну, MCP сервер - это вещь понятная, мы давно ими пользуемся. Но недавнее обновление MCP сервера SHCN привнесло очень крутые штуки. Например, они привнесли такие штуки, как регистр. Регистры позволяют не только вам читать сами компоненты SHCN, но и различные сторонние библиотеки, которые основываются на SHCN, и таким образом разными командами получать к ним доступ, понимать, каким образом они имплементируются, просить их сразу имплементировать, смотреть на полученные результаты. На самом деле, это очень круто. Для того, чтобы у нас всё это работало, нам, конечно же, понадобится какая-то среда разработки. Мы с вами сегодня будем использовать курсор. Если у вас есть код или вы просто работаете на VS-код, то здесь есть инструкции. Все вот эти ссылочки и ресурсы, которые мы сегодня используем, я прикреплю в бесплатную Telegram-группу. Она будет внизу в описании. Ну а мы с вами должны перескочить в курсор. Курсор у нас выглядит простейшим образом. Мы с вами уже много раз с ним работали, и вам потребуется открыть курсор в каком-то пустом каталоге. После этого вам нужно будет засетапить новый проект. Вы откроете ваш чат с агентом и напишите что-нибудь типа такого. Засетапни мне новый NextJS проект с нуля. Добавь туда поддержку Tavли и SHAT CN. Это классика. После этого вы нажмёте Enter, обязательно проиндекстируете свою базу, и очень быстро вам агент создаст вот такую структуру вашего проекта. Мы с вами будем создавать NextJS приложение. В принципе, нам нужен React или NextJS. Давайте делать на NextJS. И в принципе, в зависимости от того, какая у вас есть среда разработки, устанавливаем наш MCP-сервер SHCN. Забираем эту команду и запускаем эту команду. У вас очень быстро установится ваш сервер а SHCN. Как это проверить? Вы должны будете пойти в настройки, открыть курсор Settings, перейти на вкладку Tools andmcp и видеть, что здесь у вас есть SHCN, он запущен и работает. И у него уже есть несколько инструментов. И обратите внимание, что они все про регистры, что, в принципе, очень круто, потому что эти инструменты позволяют нам читать регистры. Первый умолчательный регистр - это, естественно, сами компоненты CNN, но ещё можно добавить регистры и других компонентов. Я сделал вот небольшой resarch и нашёл сайт, который называется Registry Directory. И в принципе здесь совсем немного этих директорий, но есть на самом деле очень крутые. Наверное, самая популярная директория, которая строится на SHCN - это Asscernity UI. Здесь вы можете увидеть уже некоторые сборки компонентов, которые работают на основе SHCN. Здесь есть крутые анимации, крутые шаблоны. Нам такое понадобится. Ну и, в принципе, вы тут можете поискать какие-то регистры, которые вам понадобятся. Я вот, например, для этого примера поставлю сразу два. Каким образом они устанавливаются? Это, в принципе, какая-то оказалась нетривиальная задача, потому что в документации очень плохо это описано. Но если прямо захотеть, можно найти конкретные кусочки документации, которые нам нужны. Самое главное, что нам нужно знать - это само описание в документации SHCN, каким образом добавляются регистры. Мы видим, что они добавляются вот таким образом. Нам единственное, нужно найти сами прямые URL до этих регистров и уже вставить к себе в код. Куда именно они должны вставляться? Если вы перейдёте обратно в ваш курсор илидкод, где вы работаете, вы должны будете найти стандартный файл компоненты. jon, JSON, который создаётся по умолчанию, когда вы разворачиваете SHC CNN. И здесь нужно будет добавить поле регистры и прописать конкретные URL-регистров, которые вам понадобятся. Вот я нашёл для CERN, и мне ещё понравился C UI. У них тоже прикольные, симпатичные компоненты. И на самом деле на этом сетап завершён. Мы уже можем даже сделать такую вещь. Мы можем задать такой вопрос: "Какие у меня есть компоненты SHCN?" Вы можете увидеть, что у вас курсор или ваш клод-код будет запрашивать различные инструменты. Вот, например, здесь он запросил Get Project Registries. И обратите внимание, что тут он уже вернул сразу: "У тебя есть такие регистры SHSN ascernity Cult UI. Это на

самом деле очень круто, потому что это значит, что он может получить доступ к этим регистрам и начать их исследовать и, как следствие, получить компоненты и инструкции по их установке в ваш проект". Звучит как очень простая задача. На самом деле это очень просто и очень действенно, потому что теперь мы можем попросить очень простую штуку. Используй все компоненты и анимации из регистраsen и создай мне красивый лендинг. Помните, мы в прошлый раз это уже делали. Лендинги, ну, вообще говоря, так себе. Обратите внимание, как он сейчас создаёт этот лендинг. Он обращается к разным инструментам из MCP сервера SHCN и задействует разные регистры. И давайте посмотрим на результат. Так, вот у меня мой лендинг, который на локал хосте 3.000. Так, обратите внимание, он сразу ставил какой-то типовой хедер. Неплохо. Так, давайте попробуем проскролить. И обратите внимание, какие тут анимации. То есть это анимации явно не выдуманный самой нейронкой. Он явно использует уже какие-то подготовленные анимации. Так, обратите внимание, какая анимация. Тут тоже довольно часто встречается. Какая-то типовая анимация. Так, у нас даже есть тут карточки. Смотрите, как текст работает. Интерактивные карточки, интерактивные элементы. Граунд явно тоже не случайный. Даже вон прайсинг тоже с анимированными карточками. И футер, в принципе, тоже выглядит солидно. Но, естественно, с такими сайтами есть проблема. То есть этот результат намного лучше, чем если бы мы просто попросили нейронку создать нам сайт. И видно, что тут есть какая-то система, используются компоненты. И для такого простого промта, как мы его попросили сделать просто красивый анимированный лендинг, результат более чем хороший для первой итерации. Но при этом ощущается некоторая бессистемность. Какие-то компоненты были надёрганы, какие-то анимации применились, какой-то лей-аут был применён. И, в принципе, на этом всё. А можно ли инструктировать нейронку таким образом, чтобы она следовала какому-то плану и внедряла компоненты анимации системно? Да, можно. Давайте теперь подойдём серьёзнее к нашему вопросу и прямо посмотрим, какие компоненты и лей-ауты у нас будут. Да, отлично, тут есть директории, есть карточки и много-много разных приколюх. Обязательно будем использовать эту директорию. Итак, мы возвращаемся в компоненты, убеждаемся, что у нас есть все необходимые регистры. И сейчас мы с вами посмотрим, что такое команды для курсора, для клод-кода. Это очень похожие вещи. Нужно будет посмотреть вот на эту ссылку. Команды для курсора - это некоторая заданная последовательность действий, экшены, проверки, чекбоксы, которым будет следовать ваш агент, когда вы его попросите исполнить ту или иную команду. Это может быть цепочка команд. Они могут быть вызваны прямо в промте, и там могут содержаться как overview, да, то есть базовое описание команды, так и шаги, которые должен пройти агент, так и непосредственно ту-дулиist, которому будет следовать ваш агент, когда вы его попросите исполнить ту или иную команду. Поэтому вы идёте в вашу нейронку, в clклот или в чат GPT. Допустим, я хочу создать приложение для доступа к своим документам, где их можно создать и прочитать. Дальше я описываю, какие страницы мне нужны. страница логина, страница дашборда, страница документа. И дальше я начинаю описывать всевсе-все действия, которые должна исполнить нейронка, выполняя эту команду. Например, мы с вами знаем, что у нас с вами уже есть подключённый MCP серверша. То есть нейронка должна сходить в этот сервер, узнать, какие компоненты существуют, создать некоторый roadmap, каким образом она это будет делать. То есть там на самом деле довольно большой промпт. Вы поэкспериментируете и попросите вашу нейронку, именно максимально подробно создать некоторый план действия. И обязательно дайте как референс одну из команд из документации курсор. Я, например, сразу попросил создать две команды. Первая команда составляет конкретный план действий, то есть без какого-либо создания приложения, а вторая команда будет уже создавать непосредственно приложение на основе плана действий, который был создан в шаге номер один. И теперь я смогу сказать что-нибудь типа такого. Создай приложение, пока только UI. Backэнд мы не будем с вами создавать. Какие будут страницы? Страница логина, страница дашборда, там список всех документов, страница документа. Там его можно открыть и почитать. И дальше мы должны просто добавить команду. Каким образом добавляется команда? Вы нажимаете сш и выбираете эту команду. Если у вас нету ещё ни одной команды, вы здесь нажмёте Create Command, сделаете какое-то название команды, и у вас откроется пустой маркдаун, куда вы занесёте вашу команду из чата GPT. И, соответственно, промт будет учитывать и мои непосредственные слова, и саму команду. И как следствие, так как мы его попросили создать некоторый план действий, вы сможете увидеть, что здесь, в нашем плане действий, уже описано всё, что нам нужно, какими компонентами мы располагаем, какими компонентами нужно будет пользоваться. Даже сама структура приложения, всё это здесь описано, и у нас это в конкретном нашем плане, которые мы потом сможем использовать. Кстати, вот эти все команды, если вдруг вам нужен будет референс, я положу в свою прогруппу, и там даже будет исходный код этого приложения. Если вам нужно будет на него посмотреть подробнее, заскакивайте обязательно на Шук прогруппу, ссылка будет тоже в описании. А теперь мы знаем, что у нас уже есть прямо конкретный план действий, которым будет пользоваться наша

нейронка, чтобы создать наше приложение. Давайте посмотрим, каким образом это делается. Вы удивитесь, но это делается прямо таким образом. вы указываете слш вашу команду, и в этой команде прямо описано, что мы должны воспользоваться планом, который был подготовлен на шаге номер один, и идти строго по шагам этого плана для того, чтобы подготовить нам приложение. Как вы видите, тут огромный чек-лист. И вы тут можете увидеть, что этот шаг включает опять же использование MCP-сервера активно, потому что в нашем плане было прямо расписано, какие компоненты, какие лейауты нужно откуда брать для того, чтобы установить в наше приложение, а потом ещё имплементировать на конкретной странице. То есть это огромная работа, которая сделана нейронкой, но за один промт. И на самом деле это приводит к замечательным результатам. Давайте откроем наш терминал и сделаем npm run def откроем наш local host. Смотрите, у нас открывается приложение, где есть страница логина. И эта страница логина выглядит вообще не случайно. Более того, здесь применён совершенно не случайный бэкграунд и анимация. Давайте посмотрим, откуда он взял этот бэкграунд. Перейдём в компоненты и посмотрим на background l. Обратите внимание, что это прямо конкретный background l, очень точно применённый с первого раза к вашему приложению. И даже смотрите, он подготовил демодоступ. Введите имейлil и пароль такие-то, чтобы получить. То есть это совершенно рабочая форма, она не пропускается с любым паролем. Давайте пробовать сюда вводить password. Войдём в наш дашборд. Смотрите, нам выскочил SNK успешный вход, что очень круто. Посмотрите, как выглядит наш дашборд. Здесь крутые карточки. Карточки адаптивные. Они подстраиваются под ширину нашего дашборда. Здесь уже правильные тул-типы. Более того, он сюда применил даже переключатель тем. Смотрите, наша тёмная тема тоже работает. Тултипы работают. Давайте попробуем что-нибудь поискать. Да, то есть поиск сразу работает сразу из пакета. И даже кнопка посмотреть документ, она полностью рабочая, потому что мы просили создать три типа страниц: логин страницу, дашборд и непосредственную страницу документа. Смотрите, у нас тут есть и заголовок, и какие-то теги, и даже сам текст документа, и рабочие кнопки, например, назад к панели управления. То есть я прямо акцентирую внимание, что если мы подходим подготовленно, пользуемся клёво MCP-серверами, подключаем нужные нам регистры, делаем правильные команды и пошаговые инструкции для нашей неронки, то крутые результаты, особенно в части построения интерфейсов, можно добиваться буквально за считанные минуты. Исходный код, если вам нужно будет в моей прогруппе, а все ресурсы, которыми мы пользовались, для того, чтобы вы могли воспроизвести шаг за шагом этот workкflow будет в бесплатной Telegram-группе. залетайте, забирайте.