SL

Только легенды успели это лицезреть Или то, как Тимер положил телетайп Пишет мне не так давно Тимер и говорит, погнали в статью. Ну, а я пока звезду не словил и с радостью принял это предложение. Он решил позвать просто сумасшедшее количество маленьких гем каналов и задать всем вопросы. ЧИТАТЬ ЗАПОМИНАТЬ ДОБАВЛЯТЬ Смело рекомендую данную статью для прочтения, со многими ребятами из нее я лично знаком, так что за качество ручаюсь. Читайте, находите новых авторов и просто пополняйте свою голову новой информацией. Всех обнял. Еще увидимся.

Мой процесс работы и создания дизайна Выпустил новый ролик, где показал весь свой процесс создания сайта от поиска референсов до готового результата. В начале разобрался с регистрацией и подписками на ИИ сервисы, а дальше уже перешел непосредственно к дизайну. Показал, где ищу хорошие референсы, как собираю из них одну общую идею и подбираю цветовую палитру. После этого закинул всё в Codex. ПОСМОТРЕТЬ Весь сайт создавался постепенно от первых секций и их доработок, до создания истории бренда и качественного каталога. Лично для меня Codex сейчас является правой рукой во фронтенде. Он выполняет супер много в формировании сайта, но мне всё равно приходится искать референсы, понимать какой результат я хочу получить и постоянно доёбываться до мелочей. Но в этом и вся прелесть работы с ним. Кстати, монтировал этот видос инфл круче меня - @bybass_build Полезные ссылки из ролика: • Dribbble - основное место, где я ищу референсы • Awwwards - сайты с более интересными решениями и анимациями • Pinterest - подбор цветовых палитр и визуального направления • OnlineSim - одноразовые номера для регистрации • Сервис для оплаты ИИ подписок Надеюсь на ваш фидбек и поддержку! Еще увидимся.

- Ало, Chow, я бы хотел заказать доставку на дом Или то, как я впервые попробовал сделать вроде и базовый, но концепт для компании доставки еды. Эта идея сидела в голове очень давно, ну все таки база как никак. Но я все не решался сесть за нее, так как эту идею просто перебивали идеи покруче. Но вот, собирая себе портфолио, я подумал что и это надо бы оформить. Что получилось на мой взгляд круто, а что прям shit. 1. Начальная анимация - это было самым сложным, но при этом получилось самым красивым на мой взгляд. Продумывать логотип и кидать свои кривые наброски кодексу было невероятно тяжело. А про то, чтобы нарисовать хотя бы примерную анимацию по кадрам я вообще молчу. На грамотную реализацию всего этого через код, включая всю возможную плавность ушло 4 часа непрерывной работы кодекса. Получилось это все дело как по мне очень неплохо. Буква О - пицца (надеюсь все поняли) 2. Иконографика - одно из любимых. Над самими иконками я не парился слишком долго, нашел прикольные на пинтересте и слегка видоизменил + сделал новые. Мне нравится тот стиль, который смог удержать кодекс во ВСЕХ иконках. Как по мне, они не перегружают внимание пользователя, а как раз таки наоборот мягко обозначают важные элементы управления. 3. Главный экран - с ним были сложности не в плане реализации композиции и постановки элементов. Главной сложностью тут стала сама наполненность. Было много вариантов структуры, но чаще всего они мега перегружали страницу. В итоге я остановился на простой и хорошей (на мой взгляд) структуре: • адрес и профиль • поиск • акционное предложение • рестораны с бесплатной доставкой • категории • полный каталог ресторанов Изначально я поставил категории в самый вверх (после поиска) и получилось прям дерьмо, которым неудобно пользоваться. Чтобы поменять лишь одну категорию тебе приходилось скроллить все, что было на странице. 4. Карточки ресторанов - сначала они были слишком однообразные. Я не слишком старался над их заполнением в плане блюд, но по

Ну сделай уже из своего дашбордика конфетку Пост о моей ненависти к дашбордам и их дизайну. Я пытался несколько раз сделать из дашборда не только красивую, но и удобную систему. А эти две вещи иногда бывает очень сложно состыковать. Но у меня получилось. К посту прикреплен видеоролик вымышленного дашборда. Мне кажется дизайн получился достаточно минималистичным, но при этом очень приятным и самое главное - УДОБНЫМ. Давайте я сначала расскажу как и что я делал, почему дашборд именно такой, а в конце дам вам собственный скилл для ИИдеального повторения такого же стиля (палитра, шрифты, расположение ваших компонентов, графики и тд.) Больше всего меня раздражает и нервирует, когда на экране есть полно информации, но ты в душе не ебешь куда смотреть и твои глаза просто разбегаются по всем данным. Я решил создать дашборд для аналитики рекламных компаний для наглядного примера (его вы можете увидеть в видео прикрепленным к посту). Так вот, что же я делал для того, чтобы решить типичные проблемы + сделать привлекательный и не отвлекающий вид. • Первое, что вам нужно сделать - определить, какая информация самая важная и что вы хотите видеть первым своими глазами. В моем случае это связи между рекламным каналом, кампанией и результатом. Поэтому большую часть экрана занимает карта, по которой можно пройти эту цепочку. Выбираешь кампанию, ее связи выделяются, а снизу уже появляются все подробности. То есть я КОНКРЕТНО могу понять, что это за цифры и за что они ОТВЕЧАЮТ. • Второе - разобрался с цветами. В ранних версиях при разработке дизайна у меня было куча проблем и мне самому не нравилась ни одна палитра из тех что пробовал. Сначала я хотел взять акцент на бежевом и его оттенков и глубине, после переключился на зеленый, но все это выглядело дешево и ужасно. В итоге решил трайнуть черный + графитовый и мне безумно сильно зашло. Потом начал слегка играться: рабочую область сделал темнее, плашки чуть светлее, добавил тонкие границы и небольшую глубину. А св

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

GPT 6 ASTRA в ВЕБ-ДИЗАЙНЕ - СМОТРИ Новый ролик на моем канале, где решил затестить Astra в реализации дизайн идеи из головы. Пока записывал, успел немного приболеть, поэтому заранее извиняюсь за хрип и заложенный нос в некоторых моментах. Как только наступает осень, сразу ложусь с температурой, так что совет - одевайтесь теплее. ПОСМОТРЕТЬ Идея, которая была для создания: магазин роботов, в максимально темных тонах, использовав при этом генерацию видео. Короче, решил побаловаться и сделать для себя что то новое + загрузить вам на ютубчик. В ролике показал весь основной процесс, готовый каталог, корзину и отдельную страницу с историей бренда. В конце еще рассказал, что думаю про Astra и сколько лимитов у меня на всё это ушло. Всем приятного просмотра! А ниже я лишь оставлю ссылки из видео: • Покупка подписок, сервис из ролика • Генерация изображений и видео • Pinterest • Dribbble • Awwwards В течение 2х дней хочу затестить создание 3D моделей через Astra, поэтому ждите постик! Еще увидимся.

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 UX принципы, чтобы решения разных задач не стакались между собой. Также сейчас активно гоняю скилл Кисы, а именно Z.A.E.B.A.L, мне понравилось в нем автоматическое определение всей тяжести проблемы (чем больше я кричу - тем больший пиздец нужно фиксить). В общем то, просто держу вас в курсе в такой хороший вечерок. Сейчас создаю скилл, который заменит блядские дефолтные стили, предлагаемые Codexом для создания ваших страничек, сайтов и тд. Я хочу заменить их и сделать действительно хорошими, рассчитываю на это в ближайшие дни. Параллельно со всем этим работаю над SL UI Library, своим плагином с UI элементами. Дополняю его новыми штуками. Кто ВСЕ ЕЩЕ не вдупляет, вот первый ПОСТ и второй. Планов много, осталось реализовать все по достойному, а не как обычно. Еще увидимся!

Забудь о стандартах твоих проектов После библиотеки элементов и скилла для дашборда я решил создать еще один скильчик, который решит мою (и возможно вашу) проблему. При просьбе Codex сгенерировать несколько направлений твоего сайта на ЛЮБУЮ тематику, ты получаешь вайбкодерский калл. Этот калл выглядит вроде и неплохо, но ровно до того момента, пока ты не увидишь еще пару таких же дизайнов. Также есть еще одна проблема, даже если у тебя получается уникальный референс, при переносе в код все идет по пизде и получается как будто давний мем Ожидание/Реальность. Ну как то так. Поэтому я собрал SL Site Engine - скилл для создания уникальных референсов сайтов и еще много всего. Быстренько расскажу как он работает: Сначала он уточняет, что именно ты хочешь сделать. Для кого сайт, какой характер у бренда, какие цвета нравятся и все в этом духе, чтобы точно определить твои пожелания. Дальше скилл предлагает поискать референсы. Если соглашаешься, агент смотрит подходящие работы и предлагает приемы, которые можно использовать в твоем проекте. Такими приемами является: композиция, расположение фотографий, работа с текстом и фоном. Потом показывает несколько эскизов, из которых ты выбираешь одно направление которое тебе нравится. Постарался сделать так, чтобы скилл реально генерировал разные направления. Если подключена моя SL UI Library, скилл подбирает компоненты оттуда и адаптирует их под выбранное оформление. НО устанавливать библиотеку для работы скилла НЕ обязательно! Но как по мне прикольно, что они связаны и дополняют друг друга. А что с кодом? Перед реализацией можно выбрать обычный HTML/CSS/JavaScript, React или Next.js. Если не разбираешься в этом - попроси помочь с выбором и скилл подберет подходящий вариант под твою задачу. Если ты хочешь обновить существующий проект, то он не будет менять код, на котором он уже написан (сам не тестил, поэтому будьте осторожны и всегда имейте версию для отката в любой момент). И самое главное над чем я Codex постара

Месяц с 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 - скилл для создания нескольких действительно разных направлений сайта, которые потом можно нормально повторить в коде. Разные композиции, типогра

В 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 Спасибо, что используете и делитесь фидбеками. Еще увидимся!

Responsive design - или же, адаптивность вашего сайта Хорошая, но для кого то скучная тема поста. Я очень много раз ошибался просто не делая хороший адаптив, он тоже требует длительного времени как для проверки, так и для исправлений. И в адаптивность желательно включить вообще все, даже простое добавление мобильной версии далеко не финальный результат. Ведь у потенциальных пользователей вашего проекта существует бесконечное множество устройств: маленькие, большие телефоны, планшеты, ноутбуки, или же просто огромные мониторы. Все это проверять в ручную - пиздец полный. Поэтому я и хотел найти инструмент делающий адаптив за меня. Пошёл искать скиллы и плагины на GitHub. И нашёл инструменты, из которых можно собрать довольно удобный процесс. 1. Web Design Reviewer - описывает порядок работы: открыть сайт на разных размерах экрана, найти места, где всё поехало, исправить код и проверить ещё раз. 2. Impeccable - это более крупный проект для работы с дизайном сайта. У него есть отдельная команда adapt как раз для адаптации под разные экраны. Она предлагает агенту не просто уменьшить десктопную версию, а пересмотреть сетку, навигацию и порядок контента на телефоне. Ещё проверить, удобно ли нажимать на кнопки и не завязано ли что то важное на наведение мышью. 3. Responsively App - это браузер, в котором сайт можно одновременно смотреть на нескольких устройствах. Нажимаешь на элемент в одном окне - действие повторяется в остальных. Можно быстро сравнить экраны и сделать снимки, после чего скинуть их агенту и исправить все недочеты. Но даже если вы установите эти инструменты, косяки все равно будут, так что просматривать все же придется все самостоятельно! Еще увидимся.

Можно открывать мини завод по контенту С возможностями опуса 5.5 монтировать видео стало намного проще, поэтому я решил начать вести TikTok и дублировать видео на YT Shorts. Не обещаю, что ролики будут выходить регулярно, но я постараюсь. Хочется сейчас сделать максимальный упор на контент и его создание, как вертикальных роликов, так и горизонтальных. Можете подписаться: • TikTok • YouTube Ну и ссылка на сайт из видео - КЛИК

Мой кодекс стал для меня диетологом-нутрициологом Небольшой лайф пост с краткой историей. Каждый год я прохожу ЭКГ, все время делал это в своем городе и все было отлично. Но вот, как многие знают я переехал в город получше и при прохождении ЭКГ 13 сентября - обнаружились проблемы. "Дело в том, что из за вашего низкого веса на такой высокий рост, грудная клетка слишком маленькая и сердце стоит не в естественном положении" - вы бы знали, что я почувствовал после этих слов, я думал все, пожили и хватит. Но, меня быстро привели в чувства сказав что это не опасно и является достаточно частой особенностью у подростков. Тут я выдохнул и расслабился. Но в моей голове все равно поменялось отношение к тому, какие могут быть проблемы, если ты находишься вне нормального веса. После приезда домой, я сразу же поставил себе цель набрать массу чего бы мне это не стоило. Но, так как денег на поход к нормальному врачу у меня нет, мне в этом деле помог Codex. Вечером 13 числа я уже все создал: • главный чат для анализа и корректировки плана • отдельный дневник питания • учёт веса, самочувствия и тренировок • локальный дашборд с калориями, белком и динамикой веса И все эти дни я следовал четко поставленному плану. За 18 дней (включая этот), мне удалось набрать 3кг и сейчас расскажу что и как я делал. Скажу сразу, способ может подойти не всем и перед тем, как следовать моим указаниям подумайте несколько раз! То, что делал я, может вызвать у кого то реальные проблемы со здоровьем. Первые пару дней я постепенно увеличивал потребляемые калории. До 16 числа я ел меньше 2000 (сейчас вообще не понимаю каким образом). Так я дошел до 2400 и процесс шел невероятно тяжело. С 16 сентября я решил просто впихивать в себя еду, тошнит не тошнит, было без разницы. 18 числа я еле как мог осилить 3000 калорий. Позже до 23 я шел в этом же темпе набирая всего 3к калорий. 23 я уехал в другой город и перестал вести отчеты до 27 (к тому времени я набрал около 700 грамм). И вот, вернувш