Вайб Дизайн КРУЧЕ Чем Я Думал (Figma, Shadcn, MCP)

Друзья, всем привет. Ну что, мы с вами продолжаем обсуждать тематику Vй-дизайна или Vibe-код дизайна. В прошлый раз мы с вами посмотрели довольно интересный подход, каким образом можно внедрять компоненты SHCN прямо в ваш дизайн и создавать лендинги или интерфейсы за один, за два промта, которые выглядят очень неплохо и вполне себе функциональны. Сегодня мы с вами углубляемся ещё дальше и смотрим, а можно ли работать с Фигмой так, чтобы наш дизайн, созданный Фигме, превращался в идеальный Pixel Perfect design, работающий на фронте также буквально за несколько промтов. Как вы видите сейчас на экране, это возможно. Для того, чтобы сделать это реальностью, нам понадобится работать одновременно и с Фигмой, и с компонентами ShadCN. Мы будем делать это в курсоре. Вы можете делать это в любом редакторе кода, который вы используете и к которому вы привыкли. Ну что, я только что себе открыл свой курсор и засетапил новый NextJS проект. Каким образом это делается, мы с вами уже обсуждали в прошлом видео. Обязательно посмотрите его, потому что там мы обсуждали основы, которые сегодня лягут в корень нашего видео. В общем и целом, вам понадобится открыть AI чат курсора и сказать: "Засетапь мне новый NextJS проект". Там должны быть компоненты SatCN, там должен быть Tailwin для стилей, и он нам создаст базовую структуру NextJS проекта. У вас в вашем проекте появится файл компонента JSON, где нужно будет добавить краеугольную штуку для нашего видео - это реестры, в которые мы можем добавлять различные реестры компонента. Опять же, что такое реестры, каким образом они устанавливаются, посмотрите в прошлом видео. Но в общем и целом это значительное расширение библиотеки Шациn и его MCP-сервера для того, чтобы мы могли себе устанавливать в проекты как компоненты, так и целые паттерны и даже целые страницы с абсолютной точностью и без домыслов нейронок о том, каким образом их использовать. Набор реестров для шат постоянно увеличивается, поэтому обязательно используйте этот функционал. Нам для нашего видео понадобится себе установить SHATCN MCP сервер. Поэтому переходим на сайт SHATCN, переходим на доки и здесь видим вкладку MCP Server. Кстати, все ссылки, которые мы будем сегодня использовать, я прикреплю свою бесплатную Telegram-группу. Она будет прямо в описании к этому видео. Переходите, забирайте. Нам здесь нужно найти секцию Quickstart. И в зависимости от того, каким редактором кода вы пользуетесь, выбирайте опцию и забирайте команду для установки MCP-сервера SHCN. Я, например, буду пользоваться курсором, забираю эту команду, открываю терминал и выполняю эту команду. После выполнения этой команды у вас появится здесь папка курсор, в которой будет MCPJSON, в котором будет уже прописан ваш MCP сервер SHCN. Вам нужно будет после этого перейти в настройки курсора на вкладочку Tools and MCP и проверить, что у вас SH CN установлен и активирован, потому что после установки он бывает ещё не активирован. И нам с вами понадобится ещё один прекрасный MCP-сервер. Это не официальный MCP-сервер Фигмы, но он очень популярен. Вы видите, что у него 11.000 звёзд на Гитхабе. И если мы пролистаем ниже, то вот в зависимости от вашей операционной системы вы должны будете установить вот таким образом ваш MCP сервер. Соответственно, я здесь нажал установить новый MCP сервер и вставил прямо вот этот MCP сервер. И здесь, вот в этом поле, нужно будет прописать ваш токен от Фигмы для того, чтобы MCP-сервер мог получать доступ к вашим артбордам Фигме. Токены доступны даже на бесплатном плане, поэтому переходите в вашу Фигму, переходите после этого в настройки на вкладку Security. И здесь вы увидите кнопку, которая называется "Сгенерировать новый токен". Нажимайте её. Если вы сами только будете пользоваться этим токеном, то вы можете выбрать максимальное количество дней, 90 дней до прохания токена. И здесь обязательно выберите все read опции. То есть рай вам не нужен, записывание, да, но чтение. Выберите всев всевсе и нажмёте сгенерировать токен. После этого в интерфейсе у вас появится этот токен. Вы его обязательно копируете, возвращаетесь в свой курсор и вставляете прямо сюда Figma API. Ваш токен пойдёт вот сюда. После этого, на самом деле, ваш MCP-сервер получит возможность читать ваши артборды в Фигме. Это раскрывает мегапотенциал. Здесь теперь я хочу, чтобы мы поняли с вами основной концепт. У вас есть два MCP-сервера. Один имеет доступ к вашей Фигме, а другой имеет доступ к компонентам SHCN. Если вы посмотрите, что умеют делать эти MCP-серверы, здесь MCP-сервер Фигма умеет получать данные из ваших дизайнов и даже скачивать картинки прямо с артбордов. А вот MCP сервер SHSEN имеет доступ ко всемвсмвсм компонентам, их описанию и описанию того, каким образом они должны устанавливаться в ваши проекты через эти MCP-серверы. И здесь мы прокладываем мостик, соответственно. А что, если наш дизайн Фигми сделан на основе SH7 компонентов? Мы же с вами знаем, как продуктовые дизайнеры, что большинство интерфейсов сделано на основе SHSEN компонент. Вы, скорее всего, тоже ими пользуетесь. А если не пользуетесь SATn компонентами

компонентами, то чем же вы пользуетесь? Что вы делаете? Пользуетесь SHCN компонентами. Тем более, что теперь в этом есть намного больше логики. Каким образом мы начинаем использование SHCN компонент? Мы возвращаемся с вами в документацию SHCN и видим, что здесь есть вкладка, которая называется Figma. И здесь есть несколько опций, компонент, которые для нас предусмотрительно создали классные ребята. Есть парочку платных библиотек компонент, а есть и бесплатные. Вот, например, я нажму самую первую ссылку из бесплатных компонент и вижу, что аж почти 300.000 пользователей пользуются этими компонентами. И, соответственно, какой-то дизайнер сделал для нас компоненты и обеспечивает их своевременный апдейт для того, чтобы они соответствовали реальным компонентам из MCP репозитория. Если здесь нажать кнопку "Открыть Фигме" и потом уже в своей Фигме перейти прямо на этот файл, мы увидим, что тут есть полная библиотека компонент, которые обладают всеми необходимыми параметрами, чтобы они соответствовали компонентам SHCN. Ну что, здесь начинается магия. Вот у меня есть какой-то интерфейс, который накидан на основе шассин компонентов. Давайте посмотрим, из чего он состоит. Здесь создатель этого арборда поназывал группы одинаковым именем. По рукам бы ему надавать. Но в общем и целом, на самом нижнем уровне лежат реальные правильные компоненты. Например, вот табы или, например, вот таблица, где правильно указаны строки и внутри ещё указаны table cells. То есть, в принципе, это соответствует тому, каким образом реально устроены компоненты SHCN. Ну что, нам с вами понадобится забрать ссылку на этотборд. Нажимаем правую кнопку, скопировать ссылку на Sлеction. Возвращаемся в наш курсор и вставляем эту ссылку в окно диалога с нейронкой. А дальше самое важное. Мы должны расписать, что именно с этим делать. Для того, чтобы не писать это каждый раз, можно воспользоваться командой. Вот я только что создал сам себе команду. Вы можете через кнопку Create Command создать то же самое. То есть я нажимаю вот так. Это значит, что ссылку я отдал и дальше неронка будет следовать чётко моей команде для того, чтобы выполнить мою задачу. Вот эту команду нужно писать максимально подробно. В общем и целом, она должна инструктировать нейронку сначала воспользоваться MCP-сервером Figma для того, чтобы собрать все нужные данные из нашего артборда и потом не выдумывая ничего пользоваться SHCN MCP-сервером для того, чтобы использовать конкретные компоненты SHCN при построении нашего приложения. У меня команда довольно большая и подробная. Если вам нужна будет конкретно эта команда, то весь исходный код приложения вы сможете найти в моей прогруппе. Она вообще крута для того, чтобы познавать искусственный интеллект и все его грани. Если такое интересно, обязательно туда залетай. А мы начинаем исполнять эту команду. И смотрите, что происходит. Сначала мы фечим весь Фигмадизайн с помощью MCP сервера Фигма. И смотрите, насколько круто это выглядит. Он находит конкретные элементы, которые используются в этом дизайне, забирает все его характеристики, иконки, которые используются. Он даже может скачивать картинки и SG элементы из вашего дизайна и пользоваться ими для построения вашего приложения. То есть это мегакрутая тема. Смотрите, как только он это закончил, Неронка инициирует вызов MCP сервера SHCN и обращается к доступным реестрам. У нас сейчас доступен наш SHCN реестр. И дальше он начинает искать необходимые компоненты, которые соответствуют тому, что мы нарисовали в Фигме. И он подбирает: "Мне нужны патны, инпуты, аватары, табы, наконец, таблицы, карточки и чекбоксы". Это ровно то, что есть у нас в Фигмадизайне. Вместе с этим мы получаем инструкции, каким образом их правильно устанавливать в nextJS проекты. И начинаем устанавливать вот наш батн, вот наш инp. Короче, работает это реально как магия. Он создаёт папочку тест 1, потому что мы просили так назвать нашу страницу. Идём, проверяем. Вот она, наша сама прекрасная страница. И даже Redmiфайл, где он прописал всё, что он сделал с нашим дизайном. Нам осталось только перейти в терминал, запуститься npm runf, посмотреть, каким образом выглядит наш дизайн, и перейти на нашу страницу. Так вот страница, ребят, я вот даже сейчас попереключаюсь быстро. Я хочу сказать, что это сделано за один промпт, за одну команду. Обратите внимание, что интерфейс очень близко создан. Тут, конечно, есть неточности. Вот сам бэкграунд или мы видим, какой была аватарка. Чуть-чуть поплыло, но работоспособность компонентов, все тексты, работающие чекбоксы, никаких фейковых кнопок, всё реальное и с правильными расстояниями. Ну то есть я хочу сказать, что это сделано прямо за какое-то обозримое количество минут. Наш фронт-энд готов почти что идеально по нашему дизайну. После того, как я это сделал, я видел, что в дизайне у меня вот этот элемент выглядит несколько иначе, да? То есть у меня кнопка download отнесена к правому краю. Это значит, что я могу прямо забрать отсюда именно ссылку на этот компонент, вернуться в курсор и сказать: "Обрати внимание на этот объект. Здесь кнопка отнесена к правому краю. Сделай мне то же самое в коде". И как вы видите, кнопка из левого положения была перенесена вправо, потому что у нейронки есть чёткая инструкция и чёткое описание из Фигмы, каким образом должен быть устроен компонент. И это сделано на базе

шаблонов и компонент шат. Так, ну что, все ссылки, которыми мы пользовались в бесплатной Telegram-группе, а исходный код в прогруппе.