Как вытащить AI сайт из слопа в премиум за 8 скиллов (проверено) transcript

Сегодня я покажу топ-восемь скилов, без которых я вообще не генерирую сайты. От них зависит, будет ли ваш интерфейс выглядеть как очередной и слоб или как будто над ним реально поработал дизайнер. Пойдём по нарастающей, от узких скилов, которые чинят одну конкретную вещь, например, анимацию или типографику до тех, которые могут собрать весь дизайн с нуля. А в конце отдам чек-лист со всеми командами и ссылками, чтобы вы самостоятельно не искали их во всём интернете. Быстро расскажу, что такое skill.

Skill - это файл с инструкцией, который агент читает перед тем, как выполнить какую-то задачу. Например, какой размер типографики использовать в том или ином месте, или же как анимировать эту кнопку. В процессе видео вам придёт больше понимания, потому что я буду показывать работу скилов на практике. Погнали. Первый скилл один из самых полезных, чтобы не придумывать компоненты самостоятельно, а брать из готовых и проверенных библиотек. Называется Pck UI Library или же Выбери UI библиотеку. Например, вам в проекте понадобился компонент тоста. Это такое всплывающее уведомление в правом нижнем углу. Когда вы вызываете скилл, он сверяется со списком проверенных библиотек и выбирает нужную. Сначала он заглянет в твой package, чтобы проверить, установлена ли эта библиотека или нет.

Package JSON - это список, где показан список всех установленных библиотек в вашем проекте. Если у вас не установлена библиотека для тостов, как в нашем примере, скил сам её установит, называется Sonor, и вставят готовый компонент в ваш проект. Также есть полезный нюанс. Если готовой библиотеки под вашу задачу нет в его списке, скил не будет что-то выдумывать, честно скажет об этом и предложит вариант из общих каких-то знаний. В целом, скилл очень полезен, чтобы не наступить на типичные грабли вайпкодеров, когда вы генерируете какие-то слоповые дропдауны, инпуты, те же самые тосты и так далее, скил автоматически подбирает нужную и проверенную библиотеку и делает качественные и хорошие компоненты. Второй и опять же очень полезный скилл называется прототайпe. Этот скилл нужен, когда вам нужно быстро придумать несколько вариантов одного и того же компонента или флоow. Проще показать работу скила на примере, я буду использовать свой проект аниматор, который позволяет создавать бесшовные карусели и рендерить их в видео. Сейчас у меня нету никакого онбординга, когда регистрируются новые пользователи, поэтому я хочу сгенерировать три абсолютно разных флоу, чтобы пользователь понимал, в какой продукт он попадает, для чего он ему и что он может тут делать. Давайте дадим такую задачку кодексу и вызовем скил протоotтайe. Ждём несколько минут генерации, и у нас открывается 3 тире5 абсолютно разных вариантов. Если вдруг результаты не отображаются, то напишите кодексу, что вы не видите, что получилось и нужно запустить локальный сервер. Внизу у нас есть сегмент Ctrol, который позволяет переключаться между тремя разными вариантами и при этом прокликивать их, чтобы оценить UX прототипов. После того, как вы выбрали вариант, который вам понравился, вы можете просто написать иишки, что вы выбираете вот такой-то вариант под таким-то названием и продолжать работу с ним, как-то улучшать или изменять. Основная польза этого скила в том, что вы можете быть ограничены, например, своим опытом или насмотренностью в дизайне, а этот скилл сделает вам 3 тире5 вариантов, а вы уже выберете лучше, исходя из дизайна, интерактивности, визуала и так далее. Стой, не перематывай, у меня для тебя есть отличное предложение. Если ты делаешь сайты с помощью искусственного интеллекта, но результаты всё равно не те, которые бы хотелось, то приходи ко мне на консультацию. полностью разберём твой проект от стека до дизайна, а также что не работает сейчас, как это исправить и как донести это нейросети. И за час ты уйдёшь с понятным планом по доработке своего проекта, а также с офигенным набором ресурсов и моих личных знаний. Ну а записаться можно в моём Telegram-боте по ссылке в описании. Газуй. Следующий скилл называется Саша, и он улучшает интерфейсные тексты на русском языке. Скил назван в честь редактора Т-банка. Здесь не удивляйтесь, а создатель скила дизайнер избера Missionр. Этот скилл отвечает за текстом вм интерфейсе на русском языке. Кнопки, подписи, ошибки, плейсхолдеры, подсказки и так далее. Давайте посмотрим на примере, как он работает. В Фигме у меня есть вот такой макет сайта для моего будущего курса по созданию качественных и продуманных интерфейсов через AI. Текстази здесь я написал самостоятельно. При этом я не редактор. У меня с этим, откровенно говоря, есть некие проблемы, но тем не менее я могу вызвать этот скилл и получить отличную редактуру и вставить её потом в интерфейс обратно. Давайте попросим скил проаудировать мой экран и предложить улучшение. Ну и вот такие тексты мы теперь получили. Они стали читаться проще, основные мысли доносятся при этом понятно, тексты сами стали короче, что уменьшает время чтения для пользователя и, соответственно, ускоряет восприятие информации.

Skill must have. Всем советую. Теперь давайте перейдём к типографике, потому что типографика - это, наверное, 80 или 90% успеха вашего интерфейса, и не стоит её недооценивать. Ну а скил называется максимально просто бетер типографи или же улучшенная типографика. Этот скил наводит порядок в размерах шрифтов, межстрочных интервалах и переносах текста, чтобы всё не выглядело как случайный набор букв. Основная суть - это использование небольшой шкалы размеров и понятной иерархии, а не пять разных шрифтов в одном месте и 10 размеров в другом и так далее. В общем, убирает хаос и улучшает читаемость. Я, кстати, планирую тоже сделать похожий скилл, только чуть-чуть а по моему стилю работы с типографикой. Поэтому, когда я его сделаю, то 100% опубликую в своём Telegram-канале. Поэтому подписывайтесь, чтобы не пропустить. Следующий скилл опять от Эмиля Ковальский. И называется он просто анимеe. Суть максимально простая. Скил помогает решить, нужна ли в вашем интерфейсе анимация или нет. А если нужна, то помогает подобрать плавность, длительность и другие параметры. Давайте покажу простой пример, как он работает. У нас есть вот такая секция лендинга. Сейчас все элементы одновременно появляются на экране у пользователя. Но после применения скила мы можем видеть, как весь контент появляется друг за другом плавно через прозрачность и трансформ позиции, что создаёт достаточно приятное ощущения плавности и сразу видно какой-то профессионализм и внимание к деталям при создании сайта. При этом анимация не мешает и выглядит уместно. Если говорить про то, как скил применяется компонентом, то по вот этой кнопке видно, что при нажатии на неё происходит уменьшение размера. В других вариантах, которые были сделаны без скила, такого, естественно, нету. Скилл очень хороший, чтобы добавить жизни и интерактивности в интерфейс, потому что если, например, ваши кнопки не откликаются на взаимодействие пользователя с ними, то интерфейс автоматически становится непригодным к использованию и не совсем интуитивным. Поэтому моя рекомендация. Следующий скилл называется Better UI. Он от создателя скила Better типограy, о котором мы упоминали ранее. Полишинг от английского - это полировка. Это уже примерно финальный этап работы над дизайном, когда вы добавляете какие-то мелкие детали, связанные с интерактивностью, анимациями и другими разными финтиплюшками. В данном скиле - это корректировка борда-радиусов, теней, анимаций, различных обводок у изображений, элементов доступности и другие детали интерфейса. Например, одно из правил хорошего UI - это то, что внешний радиус кругления должен равняться внутреннему радиусу плюс отступ между ними. Зачастую люди вообще не знают о таком правиле, но этот скилл как раз-таки позволяет его контролировать, чтобы ваш UI выглядел консистентным и правильным. Также есть отличные правила для доступности на мобильных устройствах. Например, зона нажатия на кнопку должна быть минимум 44х44 пикселя. Это делается для того, чтобы ваши пользователи могли легко попасть на нужный элемент при нажатии. Ну и вот такая краткая демка на самом сайте этого скила. Мы можем видеть, что без него у нас нет никаких анимаций. Все переключалки работают обычно, нет отзывчивости. Также есть морфинг иконок - это когда одна иконка мягкость меняется на другую. Есть отклик при нажатии на кнопки. Интерфейс выглядит намного приятней, отзывчивей и живым. Теперь хочу рассказать про один, наверное, из самых таких популярных и заезженных скилов для дизайна. Называется он impecable. И на гитхабе у него аж целых 68.000 звёзд, что достаточно много. Основное его отличие от предыдущих скилов в том, что он достаточно тяжеловесный, поэтому токенов будет скушать очень так прилично. Всё это потому, что он достаточно широконоправленный, тогда как предыдущие скилы у нас били в какую-то одну конкретную область, например, типографику или анимации. Тут же у нас всё-таки такой швейцарский нож, который может и там, и сям, и здесь, и тут. В общем, всё сразу. Сразу скажу, что лично я его никогда не использовал. Я решил про него рассказать, потому что спрашивал в чатиках в Телеграме перед созданием видео, кто какие скилы использует для фронт и дизайна. И многие ребята назвали именно его. На сайте мы можем видеть, как этот скилл изменяет интерфейс. В целом выглядит симпатично, но всё равно не мой вайб и стиль, поэтому я его никогда не пробовал, но возможно кому-то он и понравится. Сам скил позволяет через команду impicable Enit собрать контекст о продукте, для кого он, зачем, какие ограничения, какой у бренда голос, и сохраняет всё это в файл Productm. То есть, по идее, дизайн должен получиться достаточно осознанным и правильным. Если вы используете этот скил, то дайте знать в комментариях и расскажите, как он вам, потому что я пока что до сих пор не притрагивался. Пока снимал это видео, нашёл вот такой ресурс в твиттере, называется uilles.com. Из названия понятно, что здесь все скилы, которые как раз-таки посвящены UI. Здесь мы видим как раз скилы от Эмиля Ковальский, Improve Animations, про которые я говорил до этого, Better UI, Impeccable и так далее. Сервис достаточно полезный и удобный, чтобы не забыть про какие-то скилы, поэтому пользуйтесь и рассказывайте, как вам. Подводя ито, хочется сказать, что я лично сторонник использования более узконаправленных скилов по типу анимеate для анимации от Эмиля или же better типограф для типографики от Якоба, потому что такие скилы достаточно хорошо и глубоко прорабатывают одну область интерфейса, они охватывают всё сразу, но, как говорится, за двумя зайцами погонишься, никого не поймаешь. Плюс такие скилы тратят намного меньше токенов, чем тот же самый Impecable или UI UX Pro Max, которые отвечает вообще за всё. Ну а я напоминаю, что по ссылке в описании вы можете найти мой чек-лист со всеми ссылками на скилы, на команды для установки и промты. Подписывайтесь на канал. Каждую неделю я выпускаю ролики об яй, дизайне и разработке. Ну а меня зовут Артём. Пока.