SL

Мой кодекс стал для меня диетологом-нутрициологом

Небольшой лайф пост с краткой историей.

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

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

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

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

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

Вечером 13 числа я уже все создал:

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

И все эти дни я следовал четко поставленному плану. За 18 дней (включая этот), мне удалось набрать 3кг и сейчас расскажу что и как я делал.

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

Первые пару дней я постепенно увеличивал потребляемые калории. До 16 числа я ел меньше 2000 (сейчас вообще не понимаю каким образом). Так я дошел до 2400 и процесс шел невероятно тяжело.

С 16 сентября я решил просто впихивать в себя еду, тошнит не тошнит, было без разницы. 18 числа я еле как мог осилить 3000 калорий. Позже до 23 я шел в этом же темпе набирая всего 3к калорий.

23 я уехал в другой город и перестал вести отчеты до 27 (к тому времени я набрал около 700 грамм).

И вот, вернувшись в свой дом я снова начал кушать, но решил что нужно впихивать еще больше. с 29 числа по сегодняшний день я ем по 4300-4500 калорий ежедневно. Я вижу ежедневный ебанутый прирост в весе.

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

И вот с 29 числа мне удалось набрать 2кг и 300 грамм. А в сумме целых 3кг. В планах за ближайшие 7 дней дойти до стабильных 5000 калорий ежедневно. Напомню, 14 сентября я хавал МЕНЬШЕ 2000, и для меня сейчас это даже не укладывается в голове.

Чем такой способ может быть опасен?

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

Все. Еще увидимся!

Можно открывать мини завод по контенту

С возможностями опуса 5.5 монтировать видео стало намного проще, поэтому я решил начать вести TikTok и дублировать видео на YT Shorts.

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

Можете подписаться:

• TikTok
• YouTube

Ну и ссылка на сайт из видео - КЛИК

Сделай ахуенный видос для своего продукта за 10 минут

Все эти дни я баловался с созданием видео с помощью опус 5.5 и параллельно делился результатами с маленьким другом.

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

Мы, как настоящие коллеги, решили разделить обязанности: малой рассказал про опыт использования и сравнил Opus 5.5 с Sol 6, а я же подготовил скилл для создания видео под ОПРЕДЕЛЕННЫЙ стиль.

Скильчик на гитхаб - КЛИК

Скилл называется SL Glass Film и работает в Claude Code. Он нужен для показа своего продукта/приложения/сервиса.

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

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

Внутри есть семь схем для истории и шесть блоков сцен, из которых можно сложить разные видео в ОДНОМ визуальном направлении.

К посту прикрепил 20 секундное демо. Это пример того, как выглядит стиль.

В общем тестите, и пишите фидбек.

Теперь про вторую половину нашей совместки. Малой у себя разобрал скилл /brag и показал два видео. Там же рассказал, сколько заняла генерация и что ему понравилось и не понравилось в результатах.

Мы ещё договорились о следующем скилле с другим стилем. Если на этом посте и на посте Малого будет по 30 реакций.

И напоследок небольшой конкурс! Мы разыгрываем подписку Claude Pro. Для участия нужно поставить звезду на скилл и прислать идею для следующего поста в канал Малого.

Идею для поста и скрин звездочки (с ником на GitHub) скидывайте Ивангаю - СЮДА. Победителя выберем по лучшей идеи.

Итоги: 7 октября в случайное время

Всего за час можно создать такое

Наконец то малой вышел на связь и предоставил мне финальный видик

Сделано все кстати всего за 2 промпта.

Даже захотелось подписку за 20$ байнуть и побаловаться еще.

Можно добавить озвучку, подкрутить всякие приемчики и получится еще лучше

Как вам? Про свой плагин я кстати ничего в промптах не расписывал, просто дал ссылку на свой репозиторий

Нихуя че opus 5.5 с 1 промпта творит

Было использовано: 1 плагин + промпт из дохуя слов

Сильно, интересно через сколько OpenAI выебут вновь.

Нужно будет обновить видос на гитхабе

• Библиотека из видео - КЛИК
• Плагин - КЛИК

Responsive design - или же, адаптивность вашего сайта

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

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

Все это проверять в ручную - пиздец полный. Поэтому я и хотел найти инструмент делающий адаптив за меня.

Пошёл искать скиллы и плагины на GitHub. И нашёл инструменты, из которых можно собрать довольно удобный процесс.

1. Web Design Reviewer - описывает порядок работы: открыть сайт на разных размерах экрана, найти места, где всё поехало, исправить код и проверить ещё раз.

2. Impeccable - это более крупный проект для работы с дизайном сайта. У него есть отдельная команда adapt как раз для адаптации под разные экраны.

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

3. Responsively App - это браузер, в котором сайт можно одновременно смотреть на нескольких устройствах. Нажимаешь на элемент в одном окне - действие повторяется в остальных. Можно быстро сравнить экраны и сделать снимки, после чего скинуть их агенту и исправить все недочеты.

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

В 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, инструкции лежат в репозитории. Для полного процесса агенту нужны доступные инструменты поиска, просмотра страниц и снятия скриншотов.

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

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

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

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

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

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

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

ПОСМОТРЕТЬ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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