Проверит ваш UI по 10 критериям Material Design 3.
ИИ-ассистенты пишут код быстрее большинства людей. Но скорость - не качество. Попросите Claude Code собрать форму входа - получите рабочий вариант. Попросите собрать форму входа по правилам Material Design 3 - и тут начинаются проблемы. Потому что правил сотни: цветовые токены, масштабы шрифтов, отступы, тени, анимации. ИИ может «знать» их приблизительно, но приблизительно - не наш метод.
Material Design 3 Skill для Claude Code решает именно эту задачу. Бесплатный набор правил с открытым кодом, который превращает вашего ИИ-ассистента в специалиста по дизайн-системе Google.
Что умеет Material Design 3 Skill
Компактная энциклопедия спецификаций Material Design 3, упакованная в формат, который Claude Code понимает «из коробки». Внутри - описание более 30 интерфейсных компонентов (кнопки, поля ввода, карточки, навигация и так далее) с точными значениями цветов, размеров и отступов. Всё собрано из официальной документации Google и структурировано по платформам.
Когда вы просите ассистента создать компонент, он не гадает - берёт готовые правила из этого набора. Результат: интерфейс, который соответствует стандартам MD3, а не «примерно похож» на них.
Сначала Compose, потом остальные
У проекта чёткая иерархия платформ. Jetpack Compose - основной фокус. Логично: именно на Compose реализация Material Design 3 наиболее полная и актуальная. Flutter идёт вторым приоритетом - полезно, но не так глубоко. Веб - с оговоркой.
И вот тот момент, который стоит обсудить. Разработчик прямо указывает: библиотека Material Web находится в режиме обслуживания. Google не развивает её активно, а новые возможности M3 Expressive на веб вообще не реализованы. Это не баг конкретного проекта - это позиция Google. Если вы делаете веб-интерфейсы, имейте это в виду.
Аудит: проверь свой интерфейс по десяти критериям
Самая интересная возможность - режим проверки соответствия. Вы указываете путь к своему проекту, и инструмент оценивает его по десяти категориям: цветовые токены, типографика, формы, тени, компоненты, макет, навигация, анимации, доступность и темы. На выходе - баллы и конкретные рекомендации по исправлению.
Работает для проектов на Kotlin, Flutter и вебе. Бесплатный аудитор, который проверит ваш интерфейс на соответствие стандартам Google - без найма дизайнера и без покупки подписки на Figma.
Какие команды использовать
Четыре основных действия. Первая команда - создать компонент: вы описываете, что нужно, ассистент собирает по правилам MD3. Вторая - сгенерировать тему: достаточно указать базовый цвет, и система предложит полную палитру. Третья - собрать каркас приложения с навигацией. Четвёртая - запустить аудит, о котором мы говорили выше.
Честные ограничения
Проект создан совместно с Claude Code - не командой Google и не командой Android. Информация собрана из публичных источников и может отставать от актуальной версии спецификации. Разработчик предупреждает об этом прямо.
Для Compose-разработки это некритично: приоритет поддержки высокий. Для точных сигнатур API лучше сверяться с официальной документацией Android. Для веба - тем более проверяйте вручную, учитывая режим обслуживания.
Установка
Нужно скопировать файлы проекта в папку навыков Claude Code. Если вы раньше устанавливали расширения для терминала - справитесь за пару минут. Если нет - на странице проекта есть пошаговая инструкция. Ничего сложного.
Кому это реально нужно
Если вы разрабатываете Android-приложения на Compose - это находка. Вместо переключения между документацией и кодом вы просто просите ассистента собрать компонент по правилам MD3. Экономия времени ощутима уже на первой форме.
Для Flutter-разработчиков полезность ниже, но есть. Для веба - используйте с осторожностью и сверяйтесь с оригиналом.
Один забавный нюанс: проект создан при помощи Claude Code - инструмент помог улучшить самого себя. Рекурсия в чистом виде.
Если вы уже пользуетесь ИИ-ассистентом для написания интерфейсов, попробуйте этот набор правил. Он бесплатный, с открытым кодом и реально экономит время. А если только думаете о переходе на ИИ-разработку - это хороший повод начать.
А вы доверяете ИИ-ассистентам генерацию интерфейсов, или предпочитаете контролировать каждый отступ вручную?
Источник: Material Design 3 Skill
🔔 КликХак - канал, где мы находим такие инструменты и проверяем, работают ли они на практике. Подпишитесь, если хотите получать находки, а не обещания.