mobile-app-ui-design — скилл для Claude Code: как установить
Задаёт агенту правила проектирования экранов мобильных приложений. Помогает собирать прототипы и интерфейсные блоки с учётом сетки, типографики и зон досягаемости.
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-codeЧто делает mobile-app-ui-design
Скилл инструктирует модель строить экраны для мобильных платформ по строгим правилам верстки. Вместо случайных стилей агент применяет цветовую схему 60/30/10, где основной нейтральный тон занимает шестьдесят процентов площади, дополнительный цвет забирает треть, а акцентный остаётся для ключевых действий. В типографике вводится лимит: не более четырёх размеров шрифта и двух начертаний на экран, а моноширинные глифы идут на цифры и метрики.
Инструкции требуют выравнивать отступы по сетке с шагом 8 или 4 пикселя и размещать главные кнопки в нижней трети экрана для удобного хвата. Минимальный размер интерактивных зон ограничен планкой 44×44pt. Логика опирается на пошаговый процесс: сначала выстраивается сценарий и MVP-состав экрана, затем накладывается визуальная иерархия с мягкими цветными тенями вместо чёрных. Для финального шага прописаны правила эмоционального отклика и оформление базовых состояний: пустого, загрузки, успеха и ошибки.
Если проект не использует сетку, кратную 4 или 8 пунктам, интерфейсный код придётся править вручную: скилл жёстко фиксирует этот шаг.
Какие задачи решает
- спроектировать структуру экрана с кнопками в зоне досягаемости пальца
- настроить цвета интерфейса по правилу 60/30/10 с мягкими тенями
- собрать визуальные прототипы для React Native, Flutter или SwiftUI
- проработать пустые экраны, состояния загрузки и подтверждения действий
Примеры запросов агенту
- Спроектируй экран личного кабинета фитнес-приложения с графиком прогресса.
- Переделай этот экран оформления заказа: вынеси кнопку оплаты в нижнюю треть и настрой отступы по сетке 8pt.
- Собери прототип онбординга для финансового сервиса с шагами регистрации.
Как установить mobile-app-ui-design
1Через Skills CLI (Vercel)
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-code2Вручную: положить файлы
~/.claude/skills/mobile-app-ui-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mobile-app-ui-design/
1Через Skills CLI (Vercel)
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a codex2Вручную: положить файлы
.agents/skills/mobile-app-ui-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a cursor2Вручную: положить файлы
.cursor/skills/mobile-app-ui-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install ceorkm/mobile-app-ui-design mobile-app-ui-design2Вручную: положить файлы
.github/skills/mobile-app-ui-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/ceorkm/mobile-app-ui-designВручную: положить файлы
.devin/skills/mobile-app-ui-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о mobile-app-ui-design
Как установить mobile-app-ui-design в Claude Code?
Выполните команду npx skills add ceorkm/mobile-app-ui-design --skill mobile-app-ui-design -a claude-code в терминале.
Что делает скилл mobile-app-ui-design?
Он задаёт языковой модели набор правил мобильной верстки: сетку 8pt, цветовую раскладку 60/30/10, зоны нажатия от 44×44pt и порядок проектирования от сценария к полировке.
Какие технические ограничения по стилям задаёт этот скилл?
Правила запрещают использовать больше четырёх размеров шрифтов и более трёх начертаний, требуют выдерживать отступы, кратные 4 или 8, и предписывают мягкие тени в тон фона.
