Appllama — два агентных навыка для сборки мобильных экранов, которые не стыдно показать

Appllama — это библиотека дизайна самых успешных мобильных приложений: настоящие экраны, сценарии и приёмы интерфейса с данными о выручке и количестве загрузок. В этом репозитории библиотека превращена в два агентных навыка. Первый объясняет агенту, что изучать. Второй — как по этим образцам собирать экраны на Expo и React Native. Оба требуют одного: закончить работу можно только тогда, когда экран запущен в симуляторе и придраться к нему не к чему.

Репозиторий набирает около 2,1 тысячи звёзд и распространяется по лицензии MIT.

Что внутри

В репозитории два навыка и восемь справочных файлов. Навыки работают в паре, а не по отдельности.

Справочные файлы к первому навыку: сборка приложения с нуля, улучшение экрана, метод исследования.

Ко второму: нативные элементы управления, анимации, производительность, графические ассеты, цикл проверки в симуляторе.

Навык appllama-usage: как вести исследование

Главная мысль простая: не выдумывать экран, а посмотреть, как такую же задачу решили приложения с самой высокой выручкой. Там уже накопились тысячи часов правок дизайна и сплит-тестов.

Через MCP доступны двенадцать инструментов. Основные из них:

Главное правило: ходить по всем экранам целиком, а не выборочно. Язык дизайна живёт в картинках, а не в описаниях. Скриншоты и видео нужно скачивать сразу: ссылки на медиа живут около часа, а идентификаторы экранов остаются навсегда.

Ещё несколько правил, которые навык задаёт жёстко:

• начинать с бесплатного get_credits — он показывает баланс, лимиты и дату сброса;
• не перемалывать каталог целиком ради выгрузки данных, это прямо запрещено условиями;
• игнорировать водяной знак Appllama в углу картинок и никогда не переносить его в свой интерфейс;
• постраничный доступ только последовательный: перейти на страницу N нельзя, курсор действует только для того же запроса, который его выдал;
• ошибки инструментов считать инструкциями, а не поводом долбить запросами.

Навык appllama-app-design-skill: планка качества

Здесь задана планка, по которой проверяют собранный экран. Правила разложены по группам.

Точность до нативной. С первого дня нужны обе темы — светлая и тёмная, через системные цвета, а не свои. Переключатели, слайдеры, выбор даты и контекстные меню берутся нативными: самодельный тумблер, который отрабатывает на 50 мс медленнее системного, мгновенно выдаёт подделку. Иконки — SF Symbols или Material Symbols, шрифты — типографская шкала платформы, у скруглённых прямоугольников включается непрерывный изгиб, отступы держатся на базовом шаге 4 или 8.

Навигация. Это то, чего не видно на скриншоте, но пользователь замечает за десять секунд. Каждый переход отвечает на три вопроса: куда мы пришли, должен ли пользователь уметь вернуться и что делает кнопка «назад». Уходящие назад двери — вход, завершённый онбординг, покупка, законченная сессия — закрывают через Stack.Protected, чтобы «назад» не вернул в старое состояние. Заблокировать «назад» разрешено ровно в двух случаях: идёт необратимый запрос или в модальном окне есть несохранённая работа.

Запрет типового «слопа». Слоп — это приметы, по которым видно, что интерфейс собирала нейросеть: фиолетовые градиенты с свечением, стеклянные карточки на каждом экране, конфетти по любому поводу, эмодзи вместо иконок, разные формулировки одной и той же кнопки. Навык запрещает это списком и добавляет механическую проверку перед запуском: один акцентный цвет, один набор скруглений из заявленной шкалы, ноль эмодзи в интерфейсе, ноль градиентов без привязки к бренду.

Анимации. Сначала решается, нужна ли анимация вообще. Частота использования важнее красоты: то, что человек делает сотни раз в день, анимировать не нужно вовсе. Если в анимации участвует палец, она строится на пружине, которая подхватывает скорость отпускания. Всё остальное — тайминги короче 300 мс с сильным замедлением к концу. Жест не должен прыгать на поток JavaScript.

Проверка в симуляторе

Самая строгая часть навыка. Скриншот доказывает только вёрстку и ничего не говорит про движение. Поэтому весь сценарий записывается видео в симуляторе и просматривается дважды: на нормальной скорости ради ощущения и покадрово ради дефектов. Ищутся рваные кадры, вспышки белого при первой отрисовке, прыжки вёрстки, пружины, уходящие за края.

Планка — стабильные 60 кадров в секунду на релизной сборке, на самом медленном поддерживаемом устройстве. Dev-сборки этот показатель прячут. Отдельно проверяются тёмная тема, крупный шрифт, длинный текст, пустые состояния и состояние ошибки.

Установка

Одна команда из корня проекта, работает с Claude Code, Cursor, Codex и ещё с семьюдесятью агентами:

npx skills@latest add appllama/appllama-skills

Чтобы поставить только один навык, добавьте флаг --skill:

npx skills@latest add appllama/appllama-skills --skill appllama-app-design-skill

Установка для конкретных агентов без вопросов и для всех проектов сразу:

npx skills@latest add appllama/appllama-skills -a claude-code -a cursor -y
npx skills@latest add appllama/appllama-skills -g

Навыки — обычные папки с текстом, так что их можно просто скопировать в каталог навыков вашего агента:

git clone https://github.com/Appllama/appllama-skills
cp -r appllama-skills/skills/* ~/.claude/skills/

Кроме папки skills, в репозитории лежат манифесты плагинов для Claude Code и Cursor, а также готовые файлы подключения MCP — .mcp.json.

Подключение MCP

Навык appllama-usage работает через MCP, адрес сервера — https://mcp.appllama.io/mcp. Подключите его как пользовательский коннектор в Claude, Cursor, Codex или любом другом клиенте и подтвердите вход учётной записью Appllama.

Доступ к MCP входит в платный тариф. В нём 1500 кредитов в месяц, они полностью сбрасываются первого числа. Каждый вызов инструмента тратит один кредит, get_credits остаётся бесплатным.

Если MCP не подключён, второй навыл всё равно работает: планка качества, запрет типового «слопа» и цикл проверки в симуляторе не зависят от доступа к библиотеке.

Лицензия

Код — MIT. Название Appllama, лама и логотип остаются товарными знаками, лицензия не даёт на них прав.