🔥🔥 Как создать дизайн-систему: курс о закулисье, а не о кнопках

Миша Шамин сделал бесплатный курс о проектировании дизайн-систем, но не про базовые вещи вроде теней и сеток. Он сразу предупреждает, что не будет учить создавать компоненты или настраивать цвета. Вместо этого курс раскрывает закулисье: какая работа скрывается за красивыми кнопочками и тенюшками. Курс построен на цитате инженера Дейва Акина о том, что необходимое количество итераций всегда на одну больше, чем уже сделано. Развитие дизайн-системы это бесконечный процесс, поэтому курс закладывает фундамент из принципов и учит самостоятельно развивать проект дальше. Научитесь вайб-кодить, использовать GitHub, Cursor и Docusaurus, перелинкуют Storybook с Figma и бэклогом, узнают про библиотеки pre-commit и lint-staged. Внутри: – Как настроить окружение и сформулировать первые задачи в бэклоге; – Зачем нужно экономическое обоснование дизайн-системы; – Как контролировать входящие изменения и версионирование; – Что такое линтинг документации через markdownlint и cspell; – Почему важны бэкапы и автоматизация деплоя; – Как работать с фичреквестами и метриками. ➡️ Пройти курс ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Maff.io — metaverse-студия, которая разрабатывает игры и занимается продвижением проектов на платформах Roblox, Fortnite, Spatial и других. Задачи: — закупка рекламы у блогеров и стримеров — продвижение в соцсетях и комьюнити-менеджмент — создание вирусного контента: видео, рилсы — разработка лендингов и презентаций Ожидания: — опыт в диджитал-маркетинге от 1 года — понимает метавселенные или хочет разбираться — умеет работать с блогерами/SMM/аналитикой — готов развиваться в геймдеве Условия: — зп от 60 000 → рост до 120 000 ₽ по KPI — гибкий график, удаленка — реальные проекты для крупных брендов — обучение и развитие в метавселенных → Почитать подробнее Если тебя заинтересовала вакансия, пиши @MaffHR, отправляя кодовую фразу "Точка входа", портфолио и несколько слов о себе #маркетинг

Кто тут первый раз видит такой пост, коротко: я пилю свой сервис поиска работы с помощью нейронок. Я не разработчик и не написал ни строчки кода сам. Все сделано мной. Дизайн, фронт, бэк, админка и всё остальное) Команды у меня нет. Вы можете почитать все остальные части с самого начала и посмотреть, какой путь проделал сервис и не умер без команды разработчиков. Я никуда не пропадал, просто октябрь пришёлся на путешествие по Европе длинною в месяц. Поэтому особо продуктовых фич сделать не получилось за это время. Но сейчас я уже осел на месте и в процессе делаю продуктовую фичу) Я уже провёл небольшой опросник на сайте и понял, что это нужно. Хочу сделать удобное хранение сиви, его редактирование и чтобы была красивая страничка по ссылке, которой можно делиться с кем угодно. И на этой же страничке его можно будет скачать в пдф тоже красиво. Это большая фича, которая требует времени, но уверен, что всё получится красиво и главное удобно. И ещё нужно переработать профиль. Так как сейчас это модалка, которую тяжело масштабировать. Нужно прийти к нормальной странице, которая может расти сколько угодно по фичам и не умереть 😱 Немного о том, что я всё-таки поделал (не так интересно, но всё же) Оплаты в админке Вывел в админке себе красиво графики. Теперь вижу сколько оплат по каждому дню и на какую сумму. Кстати, с момента релиза PRO версии оплат уже 150 штук. Не миллионы, но приятно. Дальше нужно растить трафик и просто продолжать) Я тот человек, что останавливаться не будет точно. Бэкэнд Поправил несколько технических штук, которые делали лишние запросы к БД, которые не требовались) Теперь их меньше и все работает стабильнее. Блог Сделал теги в блоге, чтобы можно было смотреть статьи по категориям. План — статья каждый день. Хочу посмотреть даст ли это какой-то эффект в плане роста трафика из поиска. К слову, блог показал рекорд в октябре по просмотрам. Ещё улучшил себе редактор, теперь там не прям сухой текст, а есть нормальные таблички, блоки юайные и прочее) По цифрам всё в целом не плохо, но немного вышло на плато будто бы. Не знаю пока, с чем это связано, но радует одно, что в октябре цифры растут и они выше, чем когда-либо за всё время. Из поиска просмотров больше всего. Оно не падает с момента появления сайта и это супер радует. – Из гугла уже 222 000 показов за полгода и 10 800 кликов. Напомню, что я не спец в SEO, все делаю сам, изучаю сам и пилю нейронкой. CTR 4.8% – В яндексе картинка интереснее, там 526 000 показов, но кликов 16 400 всего. CTR 3%, в целом не плохо – Retention немного растёт и это тоже круто) То есть, многие возвращаются, каждый день – Ну и среднее время на сайте 4 минуты, что тоже гуд, отказов 20% за все время работы Спасибо всем, кто пишет фидбек в личку, слова благодарности и находит какие-то ошибки. И отдельное спасибо всем, кто оформил PRO подписку. Мне супер приятно! ❤️❤️ Если у вас дополнительно есть идеи по функционалу хранения / редактирования CV в профиле (чтобы было супер удобно и красиво) — пишите тоже, я открыт к предложениям! 😍 По традиции, приходите на сайт, пользуйтесь и рекомендуйте знакомым 💥 ➡️ Смотреть вакансии ➡️ Смотреть вакансии ➡️ Смотреть вакансии ч.18 ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

Сохранить логотип, иконку или иллюстрацию можно с помощью расширения svg-grabber для Chrome. Показывает сразу все SVG со страницы, очень удобно. Расширение для Chrome ↗ А я всё время лез в исходный код. 🖼️ Хороший интерфейс 🖼️ Концепты интерфейсов 🖼️ Офферы для дизайнеров

Maff.io — metaverse-студия, которая разрабатывает игры и занимается продвижением проектов на платформах Roblox, Fortnite, Spatial и других. Условия: — проектная удаленная работа, объем задач и время определяем индивидуально — сдельная оплата с регулярными выплатами — все проекты под NDA: нельзя показывать у себя в портфолио, нужно будет подписать соглашение — упоминание вашего имени и роли при размещении проекта в портфолио на нашем сайте — работа над крупными и долгосрочными проектами Задачи: — разработка клиент-серверных решений на Unity с использованием WebSocket — создание проектов под WebGL-платформу — реализация систем сохранения данных и работа с базами данных — настройка взаимодействия клиент-серверной части проектов Ожидания: — Unity (C#) на уровне создания архитектурных решений — обязательно: портфолио с проектами, где есть WebGL-реализации и описание вашего вклада → Отклинуться Код для отклика: Точка входа #геймдев

Сегодня дарю вам шаблон коммерческого предложения для дизайнера-разработчика сайтов на Тильде (подойдёт как для фрилансера так и для команды) ✨ ❤️ ID шаблона: 87847526 Шаблон выполнен в виде странички на Тильде, сверстан он на стандартных блоках (с щепоткой CSS кода). Я отдала предпочтение именно стандартным блокам, чтобы их было легко редактировать и кастомизировать под свой фирменный стиль, и не надо было заморачиваться над адаптацией. Уникальный дизайн это, конечно, хорошо, но в переговорах и продажах важнее все таки скорость и мобильность, нежели красивая обёртка. Поэтому, когда вас попросят срочно отправить КП, вы сможете сделать это незамедлительно 🔥 ⭐️ В шаблоне некоторые блоки представлены в двух вариантах для различных схем работы. ⭐️ Также я добавила навигацию по странице КП, т.к. оно получилось довольно объемным. ⭐️ Все шрифты установлены «по умолчанию», поэтому когда вы добавите шаблон себе в проект — подключатся ваши установленные шрифты. Не призываю всех и каждого делать свое КП только по этой схеме, однако мой шаблон сможет послужить вам отличной основой для формирования своего собственного КП со своими уникальными текстами и предложениями. Инструкция по добавлению шаблона в проект на Тильде: ⭐️ Зайдите в ваш проект, где вы хотите разместить КП и нажмите «+ Создать новую страницу» ⭐️ Пролистайте страницу с шаблонами до самого низа, где будет располагаться кнопка «Указать ID шаблона» ⭐️ Нажмите на нее и в появившемся поле введите идентификатор моего шаблона КП: 87847526. И страница с КП у вас в проекте! Вы великолепны! 🌸 По всем вопросам или замечаниям по шаблону добро пожаловать в комментарии 😊 P.S. Не забудьте скрывать ваши КПшки заказчикам от индексации #документы #freebie

Как это сделано: из открытого набора LAION (около 100 млн научных и исследовательских текстов, здесь — небольшой срез) извлекли краткие выжимки, перевели статьи в векторные представления, спроецировали в 2D и сгруппировали по близости. 🔗 Демо: https://laion.inference.net/embeddings 🛠️ Код: https://github.com/context-labs/laion-data-explorer (React + D3)

Наткнулся на 21st — открытую площадку, где разработчики публикуют готовые React-компоненты и целые экраны. Это что-то вроде Figma Community, только для кода. На платформе много решений, собранных с реальных маркетинговых страниц популярных SaaS-сервисов. Например, на обложке — блок с главной страницы Linear. Помимо вдохновения: если ваша команда работает с React и придерживается подхода shadcn/ui, можно просто отправить ссылку на компонент — разработчики возьмут код и адаптируют его под ваш дизайн. Единственное: сейчас платформу обновляют — похоже, на её базе делают отдельный продукт. Поэтому возможны баги, а в навигации пока легко потеряться. Вам на страницу Community в раздел Components. 📎 Ссылка на площадку

У Миши Наера вышел выпуск «Спикерской» с Андреем Алексеевым — продуктовым дизайнером Т-Банка, который запустил и затем продал свой стартап Memo — приложение по изучение языков через видео и мемы. Всегда с особым интересом смотрю на истории, когда у дизайнеров получается запускать свои продукты. Часто мы не умеем в код, делаем большую ставку на дизайн и забываем про маркетинг — тем ценнее послушать, как у других получилось. Внутри видео: – Как начали работу над стартапом; – Как собирали команду и нанимали; – Про опыт хакатонов и бенефиты для стартапа; – Решение о продаже и стартапа; – Как тестировать гипотезы перед запуском. 📎 Ссылка на видео

Доступен бесплатно. #шрифт

Создайте полную цветовую палитру для Tailwind CSS, используя HEX-код, цвет в формате HSL или случайное значение. Формируйте и изменяйте группы цветовых переменных на основе полученной шкалы. #Plugin ОТКРЫТЬ

🔰 Adobe представила Substance 3D Connector: новую архитектуру плагинов с открытым исходным кодом, которая позволит художникам отправлять ресурсы непосредственно из приложений Substance 3D в программное обеспечение DCC, такое как 3ds Max, Blender и Maya. Новая система Connector расширит существующую функциональность отправки в приложениях Substance 3D, что позволит передавать данные между ними напрямую, без необходимости экспорта и повторного импорта файла. 👉🏼 Коллекция Substance 3D

По предложению Каспера, эти символы не должны быть видны в отрендеренном тексте

Поисковик с более чем 180 000 иконок с открытым исходным кодом Install 🖼️ Figma Дизайн

Здесь вы найдёте подборку стильных цветовых палитр, где каждый цвет представлен в виде HEX-кода ⬅️Глянуть сервис➡️ #Сервисы

Зачастую мне приходится прибегать к помощи нейросети для написания скриптов (сама я знаю JS не на столько хорошо, чтобы писать скрипты с нуля самостоятельно). Недавно я писала модификацию для калькулятора на Тильде с помощью чата GTP. Когда я ставила ему задачу, я набила несколько шишек, из-за которых код получался не совсем подходящим. В этом посте я собрала для вас несколько советов по составлению более корректного запроса к ChatGTP на написание скриптов для Тильды: ⭐️ Обязательно начинайте запрос с фразы "Напиши скрипт на чистом JS", чтобы в коде не использовалась библиотека jQuery, это слегка ускорит загрузку вашего сайта ⭐️ Для того, чтобы код применялся к конкретному элементу, заранее найдите его уникальный класс в разметке Тильды и добавьте к запросу фразу "элемент с селектором .calc_form .t-input" (даже для запроса все равно придется немного разобраться с html 🥲) ⭐️ Тщательно и по шагам опишите логику работы кода (не забываем про классы и селекторы). Например: "Элемент с классом .название_класса должен появляться из полной прозрачности за 0,5 секунд при клике на кнопку с селектором .ID_блока .класс_кнопки" ⭐️ Если вы пишите скрипт к элементу зеро блока, магазина или любого другого объекта, загружающегося на Тильде с задержкой, то в конце запроса добавьте фразу: "Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver." Дополнительные рекомендации: ⭐️ Можно сделать приписку в запросе, что сайт собран на Тильде, это поможет ChatGTP учесть ее некоторые особенности и, возможно, предложить какие-то улучшения кода ⭐️ Если вы пишите несколько скриптов для одной страницы и составляете запросы в разных диалогах ChatGTP, то надо учесть имена глобальных переменных в коде. Они ни в коем случае не должны повторяться! Глобальные переменные обозначаются с помощью слов var, let или const перед ними. Например: let value = this.value.replace(/[^\d ]/g, '').slice(0, MAX_LENGTH); здесь value — это имя глобальной переменной, и такое имя ChatGTP может использовать в своих кодах очень часто. Поэтому не допускайте повторов в именах переменных при нескольких запросах к чату GTP: "Не используй в качестве имени глобальной переменной value, оно уже занято". ⭐️ Если вам нужно, чтобы код работал только на определенном разрешении экрана, то также напишите об этом в запросе, чат GTP добавит в код медиа-запрос (отключение видимости блока с кодом в настройках Тильды не сработает). Например: "Код должен работать только на экранах размером от 960px и более" ⭐️ Если хотите отладить код и посмотреть в консоле его работу «на лету», добавьте в запрос фразу: "Добавь к коду консольное логирование". Пример полного запроса к ChatGTP: Напиши скрипт на чистом JS для сайта на Тильде, который будет выполнять следующее: - код должен запрещать вводить в инпут с селектором .calc_form .t-input любые знаки кроме цифр и пробела - также код должен ограничить максимальную длину вводимого текста в этот инпут до 7 знаков - скрипт должен предусматривать случай, если таких полей несколько на странице Не используй в качестве имени глобальной переменной input, оно уже занято. Скрипт также должен предусматривать случай, если нужный элемент появляется с задержкой, поэтому пусть скрипт отслеживает появление элемента в DOM структуре с использованием MutationObserver. 🌸 Поделитесь и вы своим опытом в составлении запросов чату GTP в комментариях. Есть ли у вас свои фишки и приемы в общении с ним? Также можете прислать примеры своих сработавших некорректно запросов, я попробую их улучшить для вас 😊 #тильда #нейросети #модификации

В рубрике «Находка» мы делимся интересными инструментами, сайтами и приложениями, о которых знают единицы. → Огромная библиотека UI-элементов 🎙 Сокровищница с кнопками, карточками, инпутами — и ещё много чем. Быстрый поиск, живые превью и мгновенное получение кода — HTML/CSS, Tailwind, React. На сайте можно потрогать любой элемент — смотреть анимацию, менять на темную тему и настраивать цвет фона. У ребят постоянно проходят челленджи на разнообразные темы, которые пополняют базу знаний свежими решениями. Сохрани в закладки — пригодится, когда захочешь оживить интерфейс 🦮

Владимир Макеев из Surf протестировал генерацию UI-компонентов в Claude 4 по методу one-shot UI. Простые компоненты вроде кнопок ИИ создаёт без ошибок, экономя до 80% времени. Сложные интерфейсы требуют доработки, но всё равно ускоряют работу на 25-30%. Главное открытие: без контекста ИИ выдаёт хаотичный код. Модель не понимает, что делает, а просто оперирует вероятностями. Поэтому нужен метод one-shot UI: загрузить максимум ограничений сразу, чтобы получить чистый результат с первой попытки. Автор описывает пять шагов: от загрузки правил и подключения линтеров до использования MCP для Figma и golden-тестов. Внутри: – Почему без контекста ИИ открывает десятки файлов и выдаёт случайный результат; – Как правила и линтеры доводят код до стандарта команды; – Зачем нужен master rule для повторяющихся задач; – Как MCP для Figma передаёт точные стили и размеры; – Почему golden-тесты помогают достичь pixel perfect; – На сколько процентов ИИ ускоряет работу с разными типами задач. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы

А теперь представьте, что можно делать, если уделить этому несколько недель? 💥 Именно этим мы займемся на следующем потоке ДжинИИ! Это практический курс без воды и сложных слов — разложим всё по полочкам и покажем, как нейросети помогут в реальной жизни и работе Вот, что вас ждёт 👇 ▪️ Модуль 0. Просто. Без заумных терминов, без кода, с реальными примерами. Твой безопасный вход в мир ИИ. ▪️ Модуль 1. Промпты: как получать нужный результат с первого раза. Научишься «разговаривать» с ИИ так, чтобы он слышал и понимал тебя с полуслова. ▪️ Модуль 2. ИИ и тексты. Писать быстро, улучшать, переводить и продавать контент с помощью нейросетей. ▪️ Модуль 3. Создание классных визуалов. Без сложных программ. Даже если нет дизайнерского опыта — обрастёшь главными принципами дизайн-мышления. ▪️ Модуль 4. Видео, звук и магия ИИ: создавай, редактируй, зарабатывай. Создание, монтаж и повышение качества — обрезка, удаление объектов, стабилизация, чистка звука и улучшение картинки. ▪️ Модуль 5. Визуализация данных и таблицы. Как превращать цифры в визуал с помощью ИИ. Таблицы, графики, инфографика, анимация — с нуля и под любые задачи. ▪️ Модуль 6. ИИ-ассистент. Как делегировать рутину и освободить себе время с помощью нейросетей. — 💬 Можно учиться в рассрочку — на 6, 10 или 12 месяцев. 🚨 Старт 27 октября. Следующий поток — в 2026 году. 📩 Подавайте заявку — и давайте уже разбираться, как эти нейросети могут работать на вас, а не просто “где-то там в интернете”.

Автор исследовал, почему интерфейсы в Азии кардинально отличаются от западных. Оказывается, дело в холистическом мышлении: азиаты воспринимают мир как единое целое, а не набор отдельных элементов. То, что европейцу кажется хаосом, для азиата это удобный и информативный интерфейс, где чем больше информации, тем выше доверие к продукту. В статье разбираются суперприложения вроде WeChat, который заменяет китайцам банк, госуслуги, такси и десятки других сервисов. Или японский Yahoo! с дизайном из нулевых, который до сих пор лидирует на рынке. Автор объясняет это через призму культуры контекста: в Азии не принято говорить прямо, поэтому пользователям нужно больше информации для принятия решений. Внутри: – Почему в Китае достаточно трёх приложений для всей цифровой жизни; – Как красные конверты стали универсальным паттерном бонусов; – Зачем японские лендинги добавляют боковые меню навигации; – Почему корейцы ищут информацию в отзывах, а не на сайтах; – Как QR-коды заменили терминалы оплаты во всём Китае; – Почему российский UX движется в сторону азиатского. ➡️ Читать статью ——— 💻 Курс по поиску работы 😍 Про дизайн 🔥 Вакансии дизайнерам 🎨 Референсы