Набор инструкций и знаний, который помогает Claude и другим coding agents стать экспертами по UX/UI-дизайну: DTCG-токены, спецификации компонентов, 138 дизайн-систем и 52 объективные проверки.
jakubkrehel/skills
Набор навыков для AI-агентов, помогающих создавать более качественные интерфейсы: доступность, компоновка, типографика, цвет, тексты и полировка UI.
- Звёзды
- 8,038
- Форки
- 307
- Открытые issues
- 5
- Последний коммит
- 8 дней назад
Что это?
В репозитории собраны навыки для AI-агентов — переиспользуемые наборы инструкций, которые агенты для написания кода могут загружать, чтобы улучшить работу над интерфейсами. Навыки охватывают доступность, компоновку, типографику, цвет, тексты интерфейса и полировку UI. Каждый навык можно использовать отдельно или объединить с остальными с помощью единого навыка для ревью.
Навыки проверяют отдельные аспекты интерфейса. better-accessibility оценивает работу клавиатуры и фокуса, ARIA, формы и объявления для скринридеров на соответствие WCAG 2.2. better-typography отвечает за шкалу размеров шрифта, его функции, переносы и обрезку текста, а better-colors генерирует палитры, задаёт семантические токены и измеряет контрастность. better-writing и better-layout помогают проработать подписи, сообщения об ошибках, пустые состояния и адаптивную структуру.
Помимо навыков для ревью, есть инструменты для создания UI по файлу Figma или изображению дизайна, проверки ветки или pull request на регрессии интерфейса, отображения компонента со всеми его состояниями или граничными сценариями на временной странице и генерации нескольких вариантов компонента для сравнения. Установка выполняется с помощью npx skills add или плагина Claude Code.
Ключевые возможности
- 01Объединяет проверки доступности, компоновки, текстов, типографики, цвета и UI в одном ревью.
- 02Проверяет клавиатуру, фокус, ARIA и формы на соответствие WCAG 2.2.
- 03Генерирует цветовые палитры, задаёт семантические токены и измеряет контрастность.
- 04Создаёт UI по файлу Figma или изображению дизайна, используя существующие токены и компоненты проекта.
- 05Отображает компонент со всеми его состояниями на временной странице для стресс-тестирования.
Сценарии использования
- Проверка pull request на регрессии интерфейса перед слиянием.
- Аудит существующего приложения на проблемы с навигацией с клавиатуры и скринридерами.
- Настройка цветовой системы с семантическими токенами и проверками контрастности.
- Преобразование дизайна из Figma в код, соответствующий дизайн-системе.
Быстрый старт
- 1
Установите коллекцию skills
npx skills add jakubkrehel/skills - 2
Или добавьте маркетплейс плагинов Claude Code
/plugin marketplace add jakubkrehel/skills - 3
Затем установите плагин
/plugin install interfaces@interfaces
Что важно знать
- Коллекция состоит из навыков агента в формате Markdown, поэтому для работы с ней нужен совместимый ИИ-агент для программирования.
Темы
Частые вопросы
- Что такое skills?
- Набор навыков для AI-агентов, помогающих создавать более качественные интерфейсы: доступность, компоновка, типографика, цвет, тексты и полировка UI. В репозитории собраны навыки для AI-агентов — переиспользуемые наборы инструкций, которые агенты для написания кода могут загружать, чтобы улучшить работу над интерфейсами. Навыки охватывают доступность, компоновку, типографику, цвет, тексты интерфейса и полировку UI. Каждый навык можно использовать отдельно или объединить с остальными с помощью единого навыка для ревью.
- skills можно использовать бесплатно? Какая у него лицензия?
- skills распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- skills всё ещё поддерживается?
- Активно поддерживается. Последний коммит в skills — 13 окт. 2026 г..
- Для чего можно использовать skills?
- Проверка pull request на регрессии интерфейса перед слиянием. Аудит существующего приложения на проблемы с навигацией с клавиатуры и скринридерами. Настройка цветовой системы с семантическими токенами и проверками контрастности. Преобразование дизайна из Figma в код, соответствующий дизайн-системе.
- Как установить skills?
- Установите коллекцию skills: npx skills add jakubkrehel/skills Или добавьте маркетплейс плагинов Claude Code: /plugin marketplace add jakubkrehel/skills Затем установите плагин: /plugin install interfaces@interfaces
- Где скачать skills?
- Исходный код и инструкции по установке — на GitHub: https://github.com/jakubkrehel/skills
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
CLI открывает любой сайт в headless-браузере и извлекает его дизайн-систему в виде токенов DTCG, конфига Tailwind, переменных Figma и других форматов.
Рекомендации по дизайну для AI-агентов, включая дизайн-навык, 24 команды, итерации в браузере и 61 детерминированное правило проверки AI-сгенерированных интерфейсов.
Нативный CLI на Rust, с помощью которого AI-агенты управляют Chrome через снимки страниц, ссылки на элементы и команды автоматизации.
Набор Agent Skills и плагинов, с помощью которых агенты для программирования работают с дизайн-проектами Google Stitch через сервер Stitch MCP.
Open-source сервис Computer Use в виде MCP-сервера, который позволяет AI-агентам управлять рабочим столом macOS, Linux и Windows.