SL

В SL UI Library добавлена проверка корректности переноса компонентов

Получил фидбек, что якобы элемент переносится не так, как показано в библиотеке. Но дело в том, что кодекс (и наверное клод) просто берут компонент и переделывают его, меняя код и в целом весь стиль элемента.

Теперь появилась проверка, она сравнивает HTML после интеграции с оригиналом библиотеки и выявляет потерянные CSS классы, отсутствующие или изменённые SVG иконки.

Проверка запускается отдельно, работает локально и ничего на сайте не изменяет. Она помогает обнаружить отклонения при переносе, но не заменяет проверку внешнего вида, анимаций и поведения в браузере.

Для использования нужно обновить плагин. Уже вставленные на сайт компоненты автоматически не исправляются.

• Codex:
codex plugin marketplace upgrade sl-ui-library
codex plugin add sl-ui-library@sl-ui-library

• Claude Code:
claude plugin marketplace update sl-ui-library
claude plugin update sl-ui-library@sl-ui-library

Спасибо, что используете и делитесь фидбеками. Еще увидимся!

Месяц с GPT Pro x5

До 18 августа я все время сидел на подписках Plus, причем не важно где. Но вот, как задач, так и интереса стало больше и настало время для покупки хорошей подписки. Да я даже пост об этом сейчас пишу, вот настолько это было жесткой покупкой для меня и моего кармана.

Месяц прошел очень быстро и у меня даже нет сомнений продлевать ли эту подписку.

За месяц активность в Codex была ежедневная, ни одного дня не было пропущено (даже в моменты отъездов или выходных).

К сожалению, у меня нет какой то жесткой сводки на целый месяц, большинство чатов были удалены после того, как стали бесполезными. Но что то у меня да и осталось.

За этот месяц я потратил все недельные лимиты до нуля, использовав при этом 4 сброса.

Что касается моего некого портфолио:

Я создал шесть новых проектов чисто для наполненности, о которых либо писал, либо рассказывал на YouTube:

• SILT - выдуманный магазин электронных сигарет
• CINDER - концепт технической одежды
• CHOW - мобильное приложение доставки еды
• SCOPE - маркетинговый дашборд на русском и английском
• ROBOTICS - магазин роботов с десктопной и мобильной версиями
• ALTITUDE - интерактивный сайт горных экспедиций.

В целом, неплохой результат, но в последнее время я углубился немного в другое, а именно - в создание скиллов и плагинов на GitHub. Я упоминаю все это дело в каждом своем посте, поэтому тут кратко пробегусь.

Первым делом я создал Graphite Dashboard Design - скилл, позволяющий создать или переделать ваш дашборд в графитовый стиль. Подробный пост про него можете почитать ТУТ.

Далее я создал SL UI Library - библиотеку интерактивных HTML, CSS и JavaScript компонентов, которую можно использовать самостоятельно или подключать как плагин для агента. Упоминаю ее почти в каждом посте, информацию вы можете почитать в закрепе канала.

Третьим стал SL Site Engine - скилл для создания нескольких действительно разных направлений сайта, которые потом можно нормально повторить в коде. Разные композиции, типографика, подача контента и продолжение после первой секции. Почитать подробно про него можно ТУТ.

Параллельно со всем этим я сделал отдельный второй мозг в Obsidian для своих дизайнерских решений. Сейчас в нём 29 заметок и около 7000 слов, разделённых на Web, Mobile, UI/UX, дизайн системы, визуальный контент и моушн.

Если что, второму мозгу и 10ти дней нет, поэтому там пока что пустовато. С каждым новым проектом, или же созданием чего либо все автоматически и классненько пополняется.

Вот такой хороший и продуктивный месяц выдался на мой взгляд. Кто не понял - я уже продлеваю подписку. Еще увидимся!

Забудь о стандартах твоих проектов

После библиотеки элементов и скилла для дашборда я решил создать еще один скильчик, который решит мою (и возможно вашу) проблему.

При просьбе Codex сгенерировать несколько направлений твоего сайта на ЛЮБУЮ тематику, ты получаешь вайбкодерский калл. Этот калл выглядит вроде и неплохо, но ровно до того момента, пока ты не увидишь еще пару таких же дизайнов.

Также есть еще одна проблема, даже если у тебя получается уникальный референс, при переносе в код все идет по пизде и получается как будто давний мем Ожидание/Реальность. Ну как то так.

Поэтому я собрал SL Site Engine - скилл для создания уникальных референсов сайтов и еще много всего.

Быстренько расскажу как он работает:

Сначала он уточняет, что именно ты хочешь сделать. Для кого сайт, какой характер у бренда, какие цвета нравятся и все в этом духе, чтобы точно определить твои пожелания.

Дальше скилл предлагает поискать референсы. Если соглашаешься, агент смотрит подходящие работы и предлагает приемы, которые можно использовать в твоем проекте. Такими приемами является: композиция, расположение фотографий, работа с текстом и фоном.

Потом показывает несколько эскизов, из которых ты выбираешь одно направление которое тебе нравится. Постарался сделать так, чтобы скилл реально генерировал разные направления.

Если подключена моя SL UI Library, скилл подбирает компоненты оттуда и адаптирует их под выбранное оформление. НО устанавливать библиотеку для работы скилла НЕ обязательно! Но как по мне прикольно, что они связаны и дополняют друг друга.

А что с кодом?

Перед реализацией можно выбрать обычный HTML/CSS/JavaScript, React или Next.js. Если не разбираешься в этом - попроси помочь с выбором и скилл подберет подходящий вариант под твою задачу.

Если ты хочешь обновить существующий проект, то он не будет менять код, на котором он уже написан (сам не тестил, поэтому будьте осторожны и всегда имейте версию для отката в любой момент).

И самое главное над чем я Codex постарался больше всего: финальный референс снимается с работающей страницы в браузере. То есть у тебя уже есть код именно того результата, который ты видишь. Это именно то, что я буду использовать абсолютно всегда.

Я проверял скилл на автосервисе, кондитерской, ресторане, парикмахерской и салоне красоты. Приходилось многое переделывать и дорабатывать, так как это было на этапе создания скилла. Поэтому мне оч интересны ваши тесты на других задачах.

Установить можно как в Codex, так и Claude Code, инструкции лежат в репозитории. Для полного процесса агенту нужны доступные инструменты поиска, просмотра страниц и снятия скриншотов.

Буду невероятно рад фидбеку, особенно с какими то скриншотами и показами того, что вы сделали. Ставьте звездочки если понравилось и еще увидимся!

До меня только дошел тренд второго мозга

Лучше поздно, чем никогда. Я решил создать его исключительно по своим наработкам, верным и неверным решениям в дизайне.

Причем разделил заметки на веб дизайн, моб. дизайн и общие UI UX принципы, чтобы решения разных задач не стакались между собой.

Также сейчас активно гоняю скилл Кисы, а именно Z.A.E.B.A.L, мне понравилось в нем автоматическое определение всей тяжести проблемы (чем больше я кричу - тем больший пиздец нужно фиксить).

В общем то, просто держу вас в курсе в такой хороший вечерок.

Сейчас создаю скилл, который заменит блядские дефолтные стили, предлагаемые Codexом для создания ваших страничек, сайтов и тд. Я хочу заменить их и сделать действительно хорошими, рассчитываю на это в ближайшие дни.

Параллельно со всем этим работаю над SL UI Library, своим плагином с UI элементами. Дополняю его новыми штуками. Кто ВСЕ ЕЩЕ не вдупляет, вот первый ПОСТ и второй.

Планов много, осталось реализовать все по достойному, а не как обычно. Еще увидимся!

124 - что это за магическое число?

Ладно, магического в нем ничего нет, это лишь количество новых элементов, добавленных в релизе 1.1.0 моей UI библиотеки и плагина. Было 110, теперь целых 234.

Продолжаю разрабатывать различные как прикольные и нестандартные, так и полностью дефолтные UI элементы, которые вы можете использовать где угодно: на своем сайте, дашборде, лендинге и еще хуй его знает где.

В этом обновлении появились два новых раздела - Feedback и Data display. Это уведомления, состояния загрузки, таблицы, графики и другие элементы для отображения всех нужных вам данных. Остальные разделы тоже пополнились, плюс я прошелся по анимациям, выпадающим спискам и мелким косякам в интерфейсе.

Библиотеку можно использовать как тебе удобно: установить плагин целиком в Codex или Claude Code, скачать отдельный элемент или просто скопировать его HTML, CSS и JS. А через плагин нейросеть поможет подобрать элемент, адаптировать его под твою палитру и добавить в проект.

С каждым днем я все больше и больше работаю над ним постоянно дополняя и обновляя, в данный момент это работа стоит у меня в приоритете.

Эту библиотеку я создаю как для себя, так и для вас. Я и сам очень часто использую элементы от туда (не все, конечно, но очень большую часть).

В общем, долго вас мучать не буду, хочу получить фидбек и буду ждать его как в лс канала, так и в комментариях под этому посту. А если вам будет полезен этот плагин, то не поленитесь поставить звездочку на репозитории!

• Codex:
codex plugin marketplace add SLtowl/sl-ui-library && codex plugin add sl-ui-library@sl-ui-library

• Claude Code:
claude plugin marketplace add SLtowl/sl-ui-library && claude plugin install sl-ui-library@sl-ui-library

Если ты вообще не вдуплил, о чем этот текст, то прочитай пост выше. Еще увидимся!

Библиотека UI элементов - единственное что нужно для счастья

Перед своими неожиданными выходными решил выложить для вас первую версию своей UI библиотеки на GitHub. В первой версии загружено 110 элементов.

Там содержатся: 10 кнопок, полей ввода, переключателей, 25 чекбоксов, 20 слайдеров, 15 менюшек, 10 навигационных элементов и 10 оверлеев.

И все это абсолютно бесплатно как для кодеров, так и для вайбкодеров. Если ты являешься представителем кодеров - ты можешь пройтись по всей библиотеке и взять код на CSS, HTML и JS (в будущем будет добавлено еще больше вариаций).

Но, если ты являешься вайбкодером, то просто установи плагин в свою ебейшую нейросеть и она все сделает за тебя. Что именно она сделает? По мимо того, что она самостоятельно добавит эти элементы в твой проект, так она еще и подберет для них ТВОЮ палитру. Ты только вдумайся, круто же.

В данный момент я добавил базовые кнопки, но с более проработанной анимацией, иконками и плавностью.

Буду безумно благодарен за ваш фидбек в использовании. Так как увидеть каждую ошибку в таком количестве элементов невероятно сложно.

Новые версии не заставят вас долго ждать, так еще и параллельно с ними выйдет скилл, для аудита всего кривого в вашем пользовательском интерфейсе!

И еще одна ссылка

Команда для установки в Codex: codex plugin marketplace add SLtowl/sl-ui-library && codex plugin add sl-ui-library@sl-ui-library

Ну либо просто ссылку закиньте на репу, а там уже разберетесь!

Завтра на телефоне буду допиливать все, включая сам репозиторий. Еще увидимся.

Всем огромное спасибо! Без вас этого бы не было

Лучшая статистика за все ведение канала на ютубе, которая продолжает расти сегодня целый день.

Очень радуют бегущие цифры просмотров на экране. А если еще не смотрели, кликайте сюда.

(Сегодня выкачу первую версию библиотеки UI элементов и сделаю вам постик, уже сделано 70+ разных приколов).

GPT 6 ASTRA в ВЕБ-ДИЗАЙНЕ - СМОТРИ

Новый ролик на моем канале, где решил затестить Astra в реализации дизайн идеи из головы.

Пока записывал, успел немного приболеть, поэтому заранее извиняюсь за хрип и заложенный нос в некоторых моментах. Как только наступает осень, сразу ложусь с температурой, так что совет - одевайтесь теплее.

ПОСМОТРЕТЬ

Идея, которая была для создания: магазин роботов, в максимально темных тонах, использовав при этом генерацию видео.

Короче, решил побаловаться и сделать для себя что то новое + загрузить вам на ютубчик.

В ролике показал весь основной процесс, готовый каталог, корзину и отдельную страницу с историей бренда. В конце еще рассказал, что думаю про Astra и сколько лимитов у меня на всё это ушло.

Всем приятного просмотра! А ниже я лишь оставлю ссылки из видео:

• Покупка подписок, сервис из ролика
• Генерация изображений и видео
• Pinterest
• Dribbble
• Awwwards

В течение 2х дней хочу затестить создание 3D моделей через Astra, поэтому ждите постик! Еще увидимся.

Я к чему то очень хорошо готов, но пока что не знаю к чему...

А пока готовится видеоролик на ютуб о веб-дизайне с Astra, я бы вам очень рекомендовал посмотреть этот

Также готовлю много приколюх на GitHub. В скором времени выложу готовые UI элементы, которые можно будет забрать и адаптировать под свой проект, скиллы для анимаций элементов и отдельный скилл для аудита UI/UX. Он будет находить косяки и подсказывать, что вам стоит исправить.

Ну сделай уже из своего дашбордика конфетку

Пост о моей ненависти к дашбордам и их дизайну. Я пытался несколько раз сделать из дашборда не только красивую, но и удобную систему. А эти две вещи иногда бывает очень сложно состыковать.

Но у меня получилось.

К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ.

Давайте я сначала расскажу как и что я делал, почему дашборд именно такой, а в конце дам вам собственный скилл для ИИдеального повторения такого же стиля (палитра, шрифты, расположение ваших компонентов, графики и тд.)

Больше всего меня раздражает и нервирует, когда на экране есть полно информации, но ты в душе не ебешь куда смотреть и твои глаза просто разбегаются по всем данным.

Я решил создать дашборд для аналитики рекламных компаний для наглядного примера (его вы можете увидеть в видео прикрепленным к посту).

Так вот, что же я делал для того, чтобы решить типичные проблемы + сделать привлекательный и не отвлекающий вид.

• Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами.

В моем случае это связи между рекламным каналом, кампанией и результатом. Поэтому большую часть экрана занимает карта, по которой можно пройти эту цепочку.

Выбираешь кампанию, ее связи выделяются, а снизу уже появляются все подробности. То есть я КОНКРЕТНО могу понять, что это за цифры и за что они ОТВЕЧАЮТ.

• Второе - разобрался с цветами. В ранних версиях при разработке дизайна у меня было куча проблем и мне самому не нравилась ни одна палитра из тех что пробовал. Сначала я хотел взять акцент на бежевом и его оттенков и глубине, после переключился на зеленый, но все это выглядело дешево и ужасно.

В итоге решил трайнуть черный + графитовый и мне безумно сильно зашло. Потом начал слегка играться: рабочую область сделал темнее, плашки чуть светлее, добавил тонкие границы и небольшую глубину. А свечение оставил только для выбранных элементов.

• Третье - циферки и шрифт.

У меня были плашки, которые выглядели просто ужасно из за их содержания внутри и их размера. Где то слишком мало места, а где то наоборот полно.

Поэтому я отдельно подгонял размеры самих блоков, отступы и соотношения текста с цифрами.

Для цифр взял Instrument Sans с табличными знаками (цифры занимают одинаковую ширину и их удобнее сравнивать между собой). Плюс следил, чтобы сумма и знак валюты не разъезжались по разным строкам.

• И финал - кнопки и взаимодействия с ними.

Изначально кнопки мне тоже вообще не нравились. Переделал скругления, иконки, внутренние отступы и состояния при наведении.

Потом доделал список, чтобы при нажатии все было хорошо.

Карту я тоже сделал интерактивной: можно приблизить нужную область и рассмотреть связи подробнее.

Ну и теперь обещанный скилл.

Все эти решения я собрал в Graphite Dashboard Design: палитру, шрифты, поверхности, отступы, оформление компонентов и правила проверки.

Он помогает ИИ создавать дашборды в таком же стиле, но под ВАШУ задачу. Копировать мою карту связей не обязательно. Я уже попробовал его на аналитике видеороликов и расходах компании.

В репозитории есть инструкция по установке и примеры, которые можно открыть и потыкать.

Буду безумно рад вашему фидбеку и тестам! Еще увидимся.

- Ало, Chow, я бы хотел заказать доставку на дом

Или то, как я впервые попробовал сделать вроде и базовый, но концепт для компании доставки еды.

Эта идея сидела в голове очень давно, ну все таки база как никак. Но я все не решался сесть за нее, так как эту идею просто перебивали идеи покруче. Но вот, собирая себе портфолио, я подумал что и это надо бы оформить.

Что получилось на мой взгляд круто, а что прям shit.

1. Начальная анимация - это было самым сложным, но при этом получилось самым красивым на мой взгляд. Продумывать логотип и кидать свои кривые наброски кодексу было невероятно тяжело.

А про то, чтобы нарисовать хотя бы примерную анимацию по кадрам я вообще молчу. На грамотную реализацию всего этого через код, включая всю возможную плавность ушло 4 часа непрерывной работы кодекса.

Получилось это все дело как по мне очень неплохо. Буква О - пицца (надеюсь все поняли)

2. Иконографика - одно из любимых.

Над самими иконками я не парился слишком долго, нашел прикольные на пинтересте и слегка видоизменил + сделал новые. Мне нравится тот стиль, который смог удержать кодекс во ВСЕХ иконках.

Как по мне, они не перегружают внимание пользователя, а как раз таки наоборот мягко обозначают важные элементы управления.

3. Главный экран - с ним были сложности не в плане реализации композиции и постановки элементов. Главной сложностью тут стала сама наполненность.

Было много вариантов структуры, но чаще всего они мега перегружали страницу. В итоге я остановился на простой и хорошей (на мой взгляд) структуре:

• адрес и профиль
• поиск
• акционное предложение
• рестораны с бесплатной доставкой
• категории
• полный каталог ресторанов

Изначально я поставил категории в самый вверх (после поиска) и получилось прям дерьмо, которым неудобно пользоваться. Чтобы поменять лишь одну категорию тебе приходилось скроллить все, что было на странице.

4. Карточки ресторанов - сначала они были слишком однообразные. Я не слишком старался над их заполнением в плане блюд, но постарался над внешним видом и удобством.

Сейчас в концепте 38 ресторанов, отдельные фотографии, нормальные названия, кухни, рейтинги, сроки и стоимость доставки. Для каждой категории есть несколько вариантов.

Карточки получились достаточно компактными, но в них осталось всё необходимое.

Финальная часть работы состояла в основном из полировки элементов: выравнивание, настройка hover-реакций, прокрутки, инерции, переходов и отмены конфликтующих анимаций.

Мой процесс работы и создания дизайна

Выпустил новый ролик, где показал весь свой процесс создания сайта от поиска референсов до готового результата.

В начале разобрался с регистрацией и подписками на ИИ сервисы, а дальше уже перешел непосредственно к дизайну. Показал, где ищу хорошие референсы, как собираю из них одну общую идею и подбираю цветовую палитру. После этого закинул всё в Codex.

ПОСМОТРЕТЬ

Весь сайт создавался постепенно от первых секций и их доработок, до создания истории бренда и качественного каталога.

Лично для меня Codex сейчас является правой рукой во фронтенде. Он выполняет супер много в формировании сайта, но мне всё равно приходится искать референсы, понимать какой результат я хочу получить и постоянно доёбываться до мелочей. Но в этом и вся прелесть работы с ним.

Кстати, монтировал этот видос инфл круче меня - @bybass_build

Полезные ссылки из ролика:

• Dribbble - основное место, где я ищу референсы
• Awwwards - сайты с более интересными решениями и анимациями
• Pinterest - подбор цветовых палитр и визуального направления
• OnlineSim - одноразовые номера для регистрации
• Сервис для оплаты ИИ подписок

Надеюсь на ваш фидбек и поддержку! Еще увидимся.

Только легенды успели это лицезреть

Или то, как Тимер положил телетайп

Пишет мне не так давно Тимер и говорит, погнали в статью. Ну, а я пока звезду не словил и с радостью принял это предложение. Он решил позвать просто сумасшедшее количество маленьких гем каналов и задать всем вопросы.

ЧИТАТЬ
ЗАПОМИНАТЬ
ДОБАВЛЯТЬ

Смело рекомендую данную статью для прочтения, со многими ребятами из нее я лично знаком, так что за качество ручаюсь. Читайте, находите новых авторов и просто пополняйте свою голову новой информацией.

Всех обнял. Еще увидимся.

Почему все хуесосят вайбкодинг?

К посту прикреплено несколько скринов, которые я увидел за 2 ролика в тиктоке. И я искренне не понимаю их. Человек берет, создает что то и показывает на видео, как вывод - его хейтят за то, что он полез в вайбкодинг будучи НЕ профессионалом в программировании.

Так вот вопрос, почему его хейтят? За то, что он собирается создать что то вайбкодом?

Нет, его хейтят за то, что он это демонстрирует. И это настолько низко что пиздец.

К самой критике я отношусь очень положительно, но только это уже не критика, а просто хейт. У людей сейчас есть возможность создать свои идеи при помощи вайбкода, им необязательно учится несколько лет, чтобы что то сделать и загрузить в сеть.

Зачем хейтить человека, который просто хочет показать то, чем он занимается. Да похуй пусть это даже будет счетчик калорий или трекер привычек. Да пусть хоть десяток таких создаст.

Почему людям реально не похуй на то, чем человек занимается. Или почему им так легко обосрать, но настолько тяжело поддержать кого то.

Кто то может реально объяснить смысл такого хейта людей, что у человека в голове когда он пишет какой то уебанский комментарий. Мне действительно очень интересно.

Как часто вы слышите ИИ треки?

Я как будто постоянно встречаюсь с ними.

Например, даже сейчас, когда еду межгородом в автобусе играют онли ИИ треки. Один плохой сменяется вторым.

И каждый из них как будто создан для того, чтобы загонять людей в какую-то ебануто любовную депрессию (по крайней мере за два часа я не услышал ни одного веселого).

Я бы не сказал, что это режет уши, но они уже повсюду.

Где я пропадаю почти фулл тайм 2 часть

Привет, после этого поста и до сегодняшнего дня я занимался созданием нового дизайна. В этот раз решил, что хочу сделать акцент на продукте.

Так и появился он, Тайлер Дёрден SILT.

Это полностью выдуманный магазин электронных сигарет. Дизайн создавался чисто для портфолио.

Почему вообще электронки?

По мимо того, что у меня есть вредная привычка. У электронок достаточно простая форма, но сильно отличаются материалы, размеры, экраны и всякие мелкие детали. Поэтому на них удобно учиться показывать разницу между товарами.

Сначала появились три основных устройства - SILT ONE, SILT AIR и SILT CORE. Под каждое я попытался сделать свою визуальную подачу.

Один более простой и минималистичный, второй лёгкий, третий уже с экраном и настройками. Дальше сгенерил и другие модели, которые показы в каталоге.

Кстати, как раз таки на каталог я потратил больше всего времени. Он дергался, слишком сильно лагал и ощущался так, будто он не принадлежит к самому сайту. Но основные проблемы были именно с кривой анимацией.

Сколько бы правок я не вносил, какого контекста они бы не были - мне все равно максимально не нравилось то, что получается. Поэтому я порыскал и нашел этот скилл - UI Animation. Он чем то похож на Emil Design Engineering (который упоминал в прошлом посте). Но слегка отличается в том, что он разбирает дерганные анимации, резкие переходы, непрерывность движения и обратные состояния.

Что использовалось из интересного при создании:

— Первый экран и каталог сделаны через sticky-сцены. Пользователь продолжает листать страницу, но сам блок какое-то время остаётся на месте. Внутри него уже меняются устройства, фон, текст и остальные элементы.

— В каталоге вертикальный скролл превращается в горизонтальное движение. Так можно показать больше устройств и не делать очередную бесконечную сетку из карточек (я ее пиздец хейчу хз почему).

— Ещё я отказался от резкого переключения между готовыми состояниями. У всей сцены есть непрерывный прогресс от 0 до 1, и уже от него рассчитывается положение карточек, их прозрачность и момент перехода к следующему блоку.

— Движения при скролле дополнительно сглаживаются. Также при движении есть небольшая инерция из за которой карточки перестают дергаться.

— Для пользователей с отключёнными анимациями я ещё оставил обычную последовательную версию товаров.

Теперь можно сказать, что это моя некая постоянная рубрика. Я буду показывать вам то, чему научился и что сделал.

Сейчас хочу еще сильнее в это погрузиться, потому что доставляет невероятное удовольствие (осталось только придумать, как это можно монетизировать).

Сейчас активно готовлю хороший видеоролик на ютуб, выйдет уже в течение недели. Еще увидимся!