ios-glass-ui-designer — скилл для Claude Code: iOS-интерфейс
Переделывает интерфейс мобильного приложения под нативный iOS: стеклянные материалы, типографика SF Pro, safe-area. Пригодится, когда экран выглядит чужим на iPhone.
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-codeЧто делает ios-glass-ui-designer
Скилл задаёт агенту роль старшего iOS-дизайнера и ведёт переделку экрана по Human Interface Guidelines. Материалы делятся на три толщины: ultra-thin для оверлеев и плавающих контролов, regular для карточек, thick для нижних шторок и модалок. Прозрачность и блюр растут вместе со сложностью фона под ними.
На выходе по каждому экрану получаешь шесть пунктов: замысел, структуру раскладки с отступами и safe-area, карту материалов, карту типографики, заметки по анимации и обоснование через системные паттерны. Список запретов тоже есть: без неона, свечения, тяжёлых градиентов и фейковых отражений. Стекло ставится только туда, где оно помогает иерархии, а не по всему интерфейсу.
Платформа заявлена как iOS-first, Android идёт вторым. Если у вас кроссплатформенный проект с общей кодовой базой, советы по навигации и шторкам придётся адаптировать под Android вручную. Скилл рассуждает о дизайне, а не пишет код за вас.
Какие задачи решает
- убрать ощущение чужого приложения на iPhone
- разложить стеклянные слои по толщине материала
- выстроить иерархию текста размером и весом, а не цветом
- перевести модалки на нижние шторки с drag-to-dismiss
- избавиться от неона и тяжёлых градиентов в макете
Примеры запросов агенту
- Переделай экран профиля под нативный iOS, стекло только на навбаре и нижней шторке
- Разбери текущий макет: где тут лишнее стекло и что заменить на solid-поверхности
- Собери карту материалов для экрана ленты: где ultra-thin, где regular, где thick
Как установить ios-glass-ui-designer
1Через Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-code2Вручную: положить файлы
~/.claude/skills/ios-glass-ui-designer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ios-glass-ui-designer/
1Через Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a codex2Вручную: положить файлы
.agents/skills/ios-glass-ui-designer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a cursor2Вручную: положить файлы
.cursor/skills/ios-glass-ui-designer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install heyman333/atelier-ui ios-glass-ui-designer2Вручную: положить файлы
.github/skills/ios-glass-ui-designer/SKILL.md1Через Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a gemini-cli2Командой платформы
gemini skills install https://github.com/heyman333/atelier-ui --path skills/ios-glass-ui-designerВручную: положить файлы
.devin/skills/ios-glass-ui-designer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ios-glass-ui-designer
Как установить ios-glass-ui-designer в Claude?
Выполните npx skills add heyman333/atelier-ui --skill ios-glass-ui-designer -a claude-code. После этого файл скилла лежит в ~/.claude/skills/ios-glass-ui-designer/SKILL.md.
Что делает ios-glass-ui-designer?
Проводит редизайн экранов мобильного приложения под нативный iOS: материалы со стеклом, типографика SF Pro, safe-area, поведение системных компонентов. По каждому экрану выдаёт структуру, карту материалов и заметки по анимации.
Чем этот скилл отличается от обычного glassmorphism-подхода?
Он ставит стекло только там, где оно улучшает иерархию и читаемость, и прямо запрещает сплошную прозрачность, неон и фейковые отражения. Ориентир — системные паттерны iOS, а не трендовая тема.
